mkdir backend cd backend npm init -y npm install express mongoose cors dotenv

MERN + MongoDB Atlas Deployment Practical (Step-by-Step)
This practical tutorial explains how to deploy a complete MERN (MongoDB, Express, React, Node.js) application using MongoDB Atlas.

1. Practical Overview
   Objective
   Deploy a MERN application where: - MongoDB runs on MongoDB Atlas (Cloud) - Backend uses Node.js + Express - Frontend uses React - Application connects securely to Atlas cluster
   Tools Required
   Node.js (v18+ recommended)
   npm
   MongoDB Atlas account
   VS Code
   Browser

2. Architecture (MERN + Atlas)
   Flow:
   React (Frontend) → Express/Node (Backend API) → MongoDB Atlas (Cloud Database)

3. Step 1: Create MongoDB Atlas Cluster
   Login to MongoDB Atlas
   Create a Project (e.g., MERN-Lab)
   Click Build a Database
   Choose Shared Cluster (M0 – Free)
   Select:
   Cloud Provider: AWS
   Region: Nearest (e.g., Mumbai)
   Name cluster: mernCluster
   Click Create

4. Step 2: Configure Atlas Security
   4.1 Create Database User
   Go to Database Access
   Click Add New Database User
   Set:
   Username: mernUser
   Password: strong password
   Role: readWriteAnyDatabase
   Save user
   4.2 Network Access (IP Whitelisting)
   Go to Network Access
   Click Add IP Address
   Choose Allow Access from Anywhere
   (0.0.0.0/0 – for labs only)
   Confirm

5. Step 3: Get MongoDB Atlas Connection String
   Go to Database → Connect
   Choose Connect your application
   Select Driver: Node.js
   Copy connection string
   Example:
   mongodb+srv://mernUser:@merncluster.xxxxx.mongodb.net/mernDB

6. Step 4: Create Backend (Node.js + Express)
   6.1 Initialize Backend Project
   mkdir backend
   cd backend
   npm init -y
   npm install express mongoose cors dotenv
   6.2 Create Project Structure
   backend/
   ├── models/
   ├── routes/
   ├── .env
   └── server.js
   6.3 Configure MongoDB Connection
   .env
   MONGO_URI=mongodb+srv://mernUser:[e-mail]/mernDB
   PORT=5000
   6.4 server.js
   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect(process.env.MONGO_URI)
.then(() => console.log('MongoDB Atlas Connected'))
.catch(err => console.log(err));

app.get('/', (req, res) => {
res.send('MERN Backend Running');
});

app.listen(process.env.PORT, () => {
console.log(Server running on port ${process.env.PORT});
});
Run backend:
node server.js

1. Step 5: Create MongoDB Schema & API 7.1 Create Model models/User.js const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
name: String,
email: String
});

module.exports = mongoose.model('User', UserSchema);
7.2 Create API Route
routes/userRoutes.js
const express = require('express');
const User = require('../models/User');
const router = express.Router();

router.post('/add', async (req, res) => {
const user = new User(req.body);
await user.save();
res.json(user);
});

router.get('/', async (req, res) => {
const users = await User.find();
res.json(users);
});

module.exports = router;
Add route to server.js:
app.use('/api/users', require('./routes/userRoutes'));

1. Step 6: Create Frontend (React) 8.1 Create React App npx create-react-app frontend cd frontend npm install axios npm start 8.2 Connect React to Backend src/App.js import axios from 'axios'; import { useEffect, useState } from 'react';

function App() {
const [users, setUsers] = useState([]);

useEffect(() => {
axios.get('http://localhost:5000/api/users')
.then(res => setUsers(res.data));
}, []);

return (

MERN + Atlas Demo

{users.map(u => (

{u.name} - {u.email}

))}

);
}

export default App;

1. Step 7: Test Complete MERN Flow
   Start MongoDB Atlas cluster
   Run backend server
   Run React frontend
   Use POST request (Postman) to add data
   Verify data appears in React UI
   Check Atlas → Collections

2. Common Errors & Fixes
   Error Reason Solution
   MongoNetworkError IP not whitelisted Add IP
   Mongoose timeout Wrong URI Check URI
   CORS error Backend config Enable CORS

Comments

[Areeba Malik]

Please help me in this assignment I am very Upset and I can't make this assignment and my final paper held on 19 January 2026 sir said that if you complete this assignment then you will pass the exam