Cloud Midterm

MongoDB Password: DxSTP5nWfMoiafv6

Connection string: mongodb+srv://user-
one:[email protected]/?
retryWrites=true&w=majority&appName=Cluster0

email domain: trial-k68zxl2y0dk4j905.mlsender.net

email API token:
mlsn.9c2d6dec3c111d34248ed07356bececabb15d691f98c3039deb7be6a60fe73a4
image upload api key: HoUipSSaBUTr1ovw125JOd9WMTI2hYrb

Frontend:
repo: https://github.com/pnlt/my-super-awesome-app-frontend

An overview of the web app we're deploying

It's a simple web blog where users can:

Signup using their name, email, and password.

Upon signup, the user receives a verification email, clicks the email
confirmation link, and verifies their account.

Login with their email and password after verification.

Post articles (with optional image uploads).

Get the list of posted articles.

Tech stack
The frontend is built using Svelte. I used Tailwind for styling. I made a simple
RESTful API for the backend with Node.js using Express.js. As for the database, I
am using your-all-the-time-favorite database MongoDB. I am using the coolest
😎
stack ever , the MESN (MongoDB, Express.js, Svelte, Node.js) stack.

Cloud Midterm 1
 Please note that using the MESN stack is unnecessary. The services we use for
deployment do not require the usage of a specific stack. You can use almost any
programming language, stack, or framework.

The Free Services

We're using several services that provide a free tier.

MongoDB Atlas for the database.

Imghippo for image uploads.

Mailersend for sending emails

Koyeb for backend deployment.

Cloudflare for the following:

Frontend deployment.

Database
We will be using the well-known NoSQL database MongoDB. MongoDB Atlas offers
a free tier. The free tier has 512MB of storage which is enough for our demo.

MongoDB Atlas is a fully-managed cloud database that handles

all the complexity of deploying, managing, and healing your
deployments on the cloud service provider of your choice (AWS,
Azure, and GCP). MongoDB Atlas is the best way to deploy, run,
and scale MongoDB in the cloud.

Cloud Midterm 2
 Go to mongodb.com/cloud/atlas/register and create your Atlas account.

Check your inbox and click the verification link to complete your registration.

Cloud Midterm 3
 After successfully verifying your email, click Continue .

Cloud Midterm 4
 Complete the required info here and click Finish .

Cloud Midterm 5
 Choose the FREE Shared option and click Create .

Click Create Cluster .

Choose the Username and Password authentication option and follow the
instructions to create a database user using a username and password. Make
sure to keep your credentials safe because we will need them later. Click Create
User .

Cloud Midterm 6
 Go to the Network Access tab and click Add IP Address .

Cloud Midterm 7
 Choose ALLOW ACCESS FROM ANYWHERE and click Confirm . Please wait for it to finish
deploying the changes to your cluster.

Go to the Database tab and click Connect .

Cloud Midterm 8
 Choose MongoDB Drivers .

Cloud Midterm 9
 Copy the connection string and keep it safe. We will use it later during the
backend deployment. Do not forget to replace the <password> part with your
password.

Cloud Midterm 10
 I use Mongoose to connect to MongoDB Atlas.

Sending Emails

Cloud Midterm 11
 Create API key token:

Image Uploads

Cloud Midterm 12
 Backend
Now we're ready to deploy our backend code. We've got what we need:

Imghippo API key for image uploads ✅

MongoDB Atlas connection string for the database ✅

Cloud Midterm 13
 Mailersend API key for sending emails ✅
We will use Koyeb to deploy our backend API.

Koyeb is a developer-friendly serverless platform designed to

let businesses easily deploy reliable and scalable applications
globally. The platform has been created by Cloud Computing
Veterans(opens in a new tab) and is financially backed by
industry leaders.

Frontend
To the final step 🥁. We will deploy the frontend part of My Super Awesome App.
As we mentioned at the beginning of the article, we will use Cloudflare Pages to
deploy our frontend. Cloudflare Pages is part of your Cloudflare account, so there
are no more registrations.

Cloud Midterm 14
 Cloudflare Pages is a JAMstack platform for frontend
developers to collaborate and deploy websites. Build fast sites.
Deploy frontend applications in record time.

Head to dash.cloudflare.com/?account=pages. Click Create a project .

Cloud Midterm 15
 You have various options to deploy your frontend, but the super awesome
frontend is available on GitHub so I will go with that.

Choose your frontend repository. Click Begin Setup .

Cloud Midterm 16
 Change build settings to fit your case. In this case, I set the framework
to Svelte and the output directory to dist . I also added 2 env vars to set the
base API URI to which the frontend will send requests and the NodeJS version
to be used during the build process. Click Save and Deploy .

Cloud Midterm 17
 After a successful build, you should see the following. Click Continue to project .

Cloud Midterm 18
Cloud Midterm 19
 Woohoo! 🥳 Our frontend is now connected

Cloud Midterm 20