l5sh1bxkp6vnz492s-blob-update.svg

Rich text languages/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

If you are a visual learner, check out the video version of this tutorial.

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

(Feel free to code along or to download the full code from the 

MERN lets us create full-stack solutions. So, to leverage its full potential, we will be creating a MERN stack project. For this project, we will create both a back end and a front end. The front end will be implemented with React and the back end will be implemented with MongoDB, Node.js, and Express. We will call the front end 

Let’s start by creating an empty directory: 

. This folder will contain our client and server folders.

Next, create a folder for the back end and name it server. Then, we will initialize the 

, the officially supported standard format to package JavaScript code for reuse, we’ll add a line to the 

The command above installs three different packages:

We can check out installed dependencies in the package.json file. It should list the packages along with their versions.

After we have ensured that dependencies were installed successfully, we create a file called 

It’s time to connect our server to the database. We will use MongoDB Atlas as the database. MongoDB Atlas is a cloud-based database service that provides robust data security and reliability. MongoDB Atlas provides a free tier cluster that never expires and lets you access a subset of Atlas features and functionality.

 guide to create an account, deploy your first cluster, and locate your cluster’s connection string.

Now that you have the connection string, go back to the server directory and create a config.env file. There, assign the connection string to a new 

, your file should look similar to the one below. Replace 

with your database username, password, cluster name, and project ID.

. There we can add the following code to connect to our database:

Database done. Server done. Now, it's time for the API endpoints. Let's start by creating a 

 in it. Navigate back to your “server” directory and create the new directory and file:

 file will also have the following lines of code in it:

If you run the application at this point, you will get the following message in your terminal as the connection establishes. Notice that we are using the built-in environment variable functionality of the latest versions of Node.js.

That’s it for the back end. Now, we will start working on the front end.

, a modern way to create a React application. In a new terminal within the 

There are some additional dependencies that will be used in our project. We’ll start with 

Next, we’ll edit the content field in the 

 file, we need to add the Tailwind directives and delete everything else.

Tailwind is a utility-first CSS framework that allows you to add CSS styles by utilizing predefined class names. And React Router adds client-side page routing to React!

We have set up our application page routes in the 

 helps with seamless transitions while switching between components. Basically, it will only reload or refresh the component that needs to be changed instead of refreshing or reloading the entire page. Though React Router is not a necessity, it is 

Next, let’s create the components we defined in our routes. Create a 

 folder. For each component we create, we will add a new 

In the navbar.js component, we will create a navigation bar that will link us to the required components using the following code.

The following code will serve as a viewing component for our records. It will fetch all the records in our database through a GET method.

mern/client/src/components/RecordList.jsx

The following code will serve as a form component to create or update records. This component will either submit a create command or an update command to our server.

 will always be at the top of every page and the 

 will accept the children components we defined in our 

creating components. We also connected our React app to the back end using 

, which provides cleaner and easier ways to handle http requests. In 

 block. When either a POST or PATCH request is sent to the URL, 

 will either add a new record to the database or update an existing record in the database.

We also placed the following block of code to 

 beneath the constructor block in order to load an existing record, if it exists.

 fetches the records from the database, so we will be using 

 method to retrieve records from the database. To achieve this, we added the following lines of code above the 

After closing everything, to start the app, follow the steps below:

This is what the landing page of the record component will look like after we’ve added records for “Jesse Hall,” “Kushagra Kesav,” and “Stanimira Vlaeva” via the “Create Employee” button.

This is what the screen that lets you add an employee will look like:

Congratulations on building your first MERN application. For more ideas and advanced concepts, visit our 

, and if you have any questions, post them in our 

Rich text2 languages/mern-stack-tutorial

Get Started With MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

Join us at AWS re:Invent 2024! Learn how to use MongoDB for AI use cases. Learn more >>

You will need access to a MongoDB Atlas database for this tutorial. If you don’t have an account, you can sign up for free to follow along.

How to Use MERN Stack: A Complete Guide

Hero languages/mern-stack-tutorial

Introducing MongoDB 8.0, the fastest MongoDB ever! Read More >>