MERN Stack Example: Employee Records App (MongoDB Atlas, Express, React, Node.js)

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

Companion code for the MERN Stack Tutorial and video walkthrough.

Project Overview

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.

MERN Stack Architecture

┌─────────────────────┐ 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)

Project Structure

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

Prerequisites

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

Quick Start and MongoDB Setup

# 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 and Dev Containers

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.

REST API Endpoints

Base URL: http://localhost:5050

Method	Endpoint	Description
GET	/record	Retrieve all records
GET	/record/:id	Retrieve one record by ID
POST	/record	Create a record
PATCH	/record/:id	Update a record
DELETE	/record/:id	Delete a record

Example request body for create or update:

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

MongoDB Features Demonstrated

Feature	Where
MongoDB Node.js Driver	mern/server/db/connection.js
CRUD operations	mern/server/routes/record.js
MongoDB Atlas	ATLAS_URI in config.env
Server API version	ServerApiVersion.v1 in connection.js

Troubleshooting

Cannot connect to MongoDB Atlas

• 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

Backend fails to start

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

Frontend shows empty data

• 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)

Port already in use

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

Community and Support

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

Additional Resources

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

License

Apache 2.0

Disclaimer

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