How to Use MERN Stack: A Complete Guide

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.

Get Started Free

This tutorial will show you how to build a full-stack MERN application with the most current tools available. The application you’ll be building is an employee management system. Before you begin, make sure that you are familiar with Node.js and React.js basics. You will also need access to a MongoDB Atlas database for this tutorial. The full code is available in the GitHub repo.

Table of contents

What is the MERN stack?
How to get started with the MERN stack

Option A: Start the finished app in GitHub Codespaces (no setup required)
Option B: Build the app locally from scratch

Setting up the project
Connecting to MongoDB Atlas
Server API endpoints
Setting up the React application
Setting up the React router
Creating React components

Navbar component
Record list component
Record component

Running the application
Conclusion

What is the MERN stack?

MERN is a full-stack JavaScript technology stack composed of MongoDB, Express, React, and Node.js. It is one of several variants of the MEAN stack.

When you use the MERN stack, you work with React to implement the presentation layer, Express and Node.js to make up the middle or application layer, and MongoDB to create the database layer.

In this MERN stack tutorial, we will use these four technologies to develop a basic application that can record employee information and display it using a React front-end.

How to get started with the MERN stack

You can either run the completed app in GitHub Codespaces with no local setup or build it from scratch locally by following the rest of this tutorial.

Option A: Start the finished app in GitHub Codespaces (no setup required)

The GitHub repository for this tutorial is set up as a Dev Container. You can start the complete application in the cloud without installing Node.js, React, or MongoDB.

Create a Codespace for this project. If you’re not already signed in to GitHub, you’ll be prompted to log in. Once signed in, click Create codespace.

The Codespace automatically builds the environment and starts MongoDB with seeded sample data, the React app, and the Express API.

Once the client finishes compiling, a preview of the app opens automatically. If it doesn’t, open the Ports tab and click the 🌐 icon next to port 5173.

You will see the finished employee application. You can explore the code in the code editor. If you make any changes to the code, the app will rebuild automatically, and you can see them instantly.

Option B: Build the app locally from scratch

Alternatively, you can follow the tutorial step by step to build the app. To get started, you will need to install Node.js, register for MongoDB Atlas, and deploy a free database cluster.

Install Node.js

Install Node.js by downloading either the LTS version or the current version. Avoid installing odd-numbered versions, such as 25.9.0. They become unsupported after six months.

Note: The version used in this tutorial is v24.20.0.

To verify you have Node.js installed correctly, open a terminal window and run the following:

Code Snippetnode --version

Deploy a free MongoDB Atlas database cluster

Follow the Get Started with Atlas guide to create your free MongoDB Atlas cluster. Be sure to complete all the steps and copy your cluster’s connection string. You’ll need it later when you connect the application to your database.

Setting up the project

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 client and the back-end server.

Let’s start by creating an empty directory: mern. This folder will contain our client and server folders.

Code Snippet

Throughout the tutorial, we’ll use shell commands to create directories and files. Feel free to use whichever method you prefer.

Next, create a folder for the back-end, named server, and navigate into it.

Code Snippet

Then, initialize the package.json file using npm init. To use ECMAScript Modules, you need to configure the init-type to module.

Code Snippet

Next, install the dependencies.

Code Snippet

The command above installs three different packages:

mongodb - the MongoDB database driver that allows your Node.js applications to connect to the database and work with data
express - the web framework for Node.js that simplifies creating a RESTful API
cors - a Node.js package that allows cross-origin resource sharing

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

After you have ensured that dependencies were installed successfully, create a file called server.js with the following code:

mern/server/server.js

Code Snippet

Here, you are importing the express and cors packages. Then, you read the port environment variable if configured, and finally, start the express server with app.listen().

Connecting to MongoDB Atlas

It’s time to connect the server to the database. You 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.

If you haven’t done so already, follow the Get Started with Atlas guide to create a free 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 ATLAS_URI variable. Once finished, your file should look similar to the one below. Replace < username >, < password >, < clusterName >, and < projectId > with your database username, password, cluster name, and project ID.

mern/server/config.env

Code Snippet

Important: Never commit the config.env file to Git or any other source control system.

Create a folder under the server directory named db, and inside it, a file named connection.js.

Code Snippet

There, add the following code to connect to the database:

mern/server/db/connection.js

Code Snippet

Server API endpoints

Database done. Server done. Now, it's time for the API endpoints. Start by creating a routes folder and adding record.js in it. Navigate back to your server directory and create the new directory and file:

Code Snippet

The routes/record.js file will also have the following lines of code in it:

mern/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = db.collection("records");
  
  if (!ObjectId.isValid(req.params.id)) {
    return res.status(400).json({ error: "Invalid record ID" });
  }

let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.status(404).send("Not found");
  else res.status(200).send(result);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };

let collection = db.collection("records");
    let result = await collection.insertOne(newDocument);

res.status(201).json({
      _id: result.insertedId,
      ...newDocument,
    });
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    if (!ObjectId.isValid(req.params.id)) {
      return res.status(400).json({ error: "Invalid record ID" });
    }

const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    if (!ObjectId.isValid(req.params.id)) {
      return res.status(400).json({ error: "Invalid record ID" });
    }

const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

If you run the application at this point, you will see the following message in your terminal as the connection is established. Notice that you’re using the built-in environment variable functionality of the latest versions of Node.js.

Code Snippet

You should see the following output:

Code Snippet

That’s it for the back-end. Now let’s start working on the front-end.

Setting up the React application

For the front end, you’ll use Vite, a modern way to create a React application. In a new terminal within the mern directory, run the following to set up the client app:

Code Snippet

You will be prompted with a few options to configure the application. Choose “ESLint” for the linter, and select “Yes” when asked if you would like to “install with npm and start now”.

Open the application at http://localhost:5173/ in the browser to verify that it’s running successfully.

There are some additional dependencies that will be used in our project. Let’s start with Tailwind CSS.

Setting up Tailwind CSS

Tailwind is a utility-first CSS framework that allows you to add CSS styles by utilizing predefined class names.

Open a new terminal window and run the following in the mern/client directory:

Code Snippet

After Tailwind is installed, you need to register the Tailwind plugin in the Vite config. Additionally, since you’re modifying the config, let’s take the chance to register a proxy that routes all requests to /record to the backend dev server that you started earlier.

mern/client/vite.config.js

Code Snippet

Finally, add the Tailwind directive to the main CSS file and delete everything else.

mern/client/src/index.css

Code Snippet

Setting up the React router

React Router adds client-side page routing to React. Install by running the following in the client directory:

Code Snippet

Replace the implementation of src/main.jsx with the following code:

mern/client/src/main.jsx

Code Snippet

You have set up the application page routes in the router variable and used RouterProvider to keep our UI in sync with the URL. RouterProvider keeps the UI in sync with the current URL and renders the route elements that match it. When users navigate between routes, React Router updates the relevant parts of the interface without performing a traditional full-page reload.

React Router isn’t required for a React application, but it becomes useful when your application has multiple views that should be represented by distinct URLs.

Creating React components

Next, you’ll create the components you defined in the routes. Create a components folder inside the client/src folder. For each component you create, you will add a new .jsx file inside the components folder. In this case, you will add Navbar.jsx, RecordList.jsx, and Record.jsx.

Code Snippet

In the Navbar.jsx component, you will create a navigation bar that links to the other components. Open the file and paste the following code.

mern/client/src/components/Navbar.jsx

Code Snippet

Record list component

The following code will serve as a viewing component for our records. It fetches all records from the database using a GET method.

mern/client/src/components/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

function displayLevel(level) {
  if (!level) return "";
  const normalized = level.toString().trim().toLowerCase();
  if (normalized === "intern") return "Intern";
  if (normalized === "junior") return "Junior";
  if (normalized === "senior") return "Senior";
  return level;
}

const Record = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {displayLevel(props.record.level)}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
      }, []);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Record component

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

mern/client/src/components/Record.jsx

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

function normalizeLevel(level) {
    if (!level) return "";
    const normalized = level.toString().trim().toLowerCase();
    if (normalized === "intern") return "Intern";
    if (normalized === "junior") return "Junior";
    if (normalized === "senior") return "Senior";
    return level;
  }

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm({ ...record, level: normalizeLevel(record.level) });
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error(error);
      alert('The record could not be saved. Please try again. If the problem persists, use the contact form.');
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

Now, replace the contents of src/App.jsx with the following:

mern/client/src/App.jsx

Code Snippet

This is the main layout component. The Navbar will always be at the top of every page, and the Outlet will accept the children components, defined in the routes in the main.jsx file.

You have completed the component creation process. You also connected the React app to the back-end using fetch, which provides cleaner and easier ways to handle HTTP requests.

Running the application

To start the app, follow the steps below:

Ensure that the server app is still running. If it’s not, start it by executing the following command in the server directory:

Code Snippet

Ensure that the client is also still running. If not, run the following in the client directory:

Code Snippet

Open the client application in your browser - http://localhost:5173/.

This is what the landing page of the record component will look like after we’ve added records via the “Create Employee” button.

A screenshot depicting the process of creating an employee record.

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

A screenshot depicting the process of creating and updating an employee record.

Conclusion

Thank you for joining me on this journey and following along! I hope you enjoyed it and learned a lot along the way.

The MERN stack makes it easy to get started building scalable applications. You can use JavaScript across the entire stack, while MongoDB's document model makes it natural to map data to objects. With MongoDB Atlas’s forever-free cluster, you can also host your data without worrying about costs.

Ready to keep learning? Earn the free MongoDB CRUD Operations skill badge to continue building your MongoDB skills.

Get started with Atlas today

Get started in seconds. Our free clusters come with 512 MB of storage so you can play around with sample data and get oriented with our platform.

Try FreeContact sales

GET STARTED WITH:

125+ regions worldwide
Sample data sets
Always-on authentication
End-to-end encryption

Command line tools