A full-stack CRUD application built with MongoDB, Express, React, and Node.js (MERN).

Companion code for the MERN Stack Tutorial and video walkthrough.

CI License: Apache-2.0 GitHub stars

This project demonstrates an employee record tracker:

• Create records
• Read records from MongoDB Atlas
• Update records
• Delete records

The React app in mern/client calls an Express API in mern/server, and data is stored in MongoDB Atlas.

┌─────────────────────┐ REST (JSON) ┌──────────────────────────┐
│ React (Vite) │ ─────────────────────► │ Express API │
│ mern/client │ ◄───────────────────── │ mern/server │
│ :5173 │ │ :5050 │
└─────────────────────┘ └───────────┬──────────────┘
 │ MongoDB Node.js driver
 ▼
 ┌──────────────────────────┐
 │ MongoDB Atlas │
 │ database: employees │
 │ collection: records │
 └──────────────────────────┘

Stack:

• Frontend: React 18, Vite, Tailwind CSS, React Router
• Backend: Node.js, Express 4, MongoDB Node.js Driver 6
• Database: MongoDB Atlas (employees.records collection)

mern/
 client/ # React + Vite frontend
 server/ # Express API + MongoDB integration

• Node.js 20+
• npm 9+
• A free MongoDB Atlas cluster

# 1) Clone
git clone https://github.com/mongodb-developer/mern-stack-example.git
cd mern-stack-example
# 2) Create server environment file
cp mern/server/config.env.example mern/server/config.env

Update mern/server/config.env with one of the following ATLAS_URI values:

Atlas cluster:

ATLAS_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/
PORT=5050

If you are new to Atlas, use the Atlas quick start guide and then paste your connection string into ATLAS_URI.

Optional: seed sample data:

cd mern/server && node seed.js

Start the backend API:

cd mern/server
npm install
npm start

Start the frontend in a second terminal:

cd mern/client
npm install
npm run dev

Open http://localhost:5173.

GitHub Codespaces is an easy and fast way to get this project running without installing anything locally. It uses a dev container, which is a Docker environment configured for development.

Open in GitHub Codespaces

Base URL: http://localhost:5050

Example request body for create or update:

{
 "name": "Jane Smith",
 "position": "Developer",
 "level": "Senior"
}

• Verify ATLAS_URI in mern/server/config.env
• Confirm your database user credentials are correct in mern/server/config.env
• Confirm your IP is in Atlas Network Access

• Check Node version: node --version
• Confirm mern/server/config.env exists
• Reinstall dependencies in mern/server: npm install

• Confirm backend is running on :5050
• Open browser dev tools and check network requests
• Confirm records exist in Atlas (or run node seed.js in the server folder)

• Change PORT in mern/server/config.env, or stop the process using :5050

• Use GitHub Issues for bugs and feature requests
• Use MongoDB Community Forums for general MongoDB questions

• MERN Stack Tutorial
• MongoDB Atlas Docs
• MongoDB Node.js Driver Docs

Apache 2.0

This repository is for educational use and is not a supported MongoDB product.