Here's a simple MERN Stack project you can build — with a clear explanation and step-
by-step instructions to run it.
Project: Task Manager App
A basic CRUD app where users can:
Add tasks
View tasks
Delete tasks
Tech Stack (MERN)
Part Tech
Frontend React.js
Backend Express.js with Node.js
Database MongoDB
Runtime Node.js
Folder Structure
task-manager/
│
├── backend/ ← Express + MongoDB API
└── frontend/ ← React App
Step 1: Create Backend
1.1. Go to your terminal and run:
mkdir task-manager && cd task-manager
mkdir backend && cd backend
npm init -y
npm install express mongoose cors
1.2. Create index.js
// backend/index.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
app.use(express.json());
app.use(cors());
// Connect to MongoDB
mongoose.connect("mongodb://127.0.0.1:27017/taskDB", {
useNewUrlParser: true,
useUnifiedTopology: true
});
// Schema and model
const Task = mongoose.model("Task", {
text: String,
});
// Routes
app.get("/tasks", async (req, res) => {
const tasks = await Task.find();
res.json(tasks);
});
app.post("/tasks", async (req, res) => {
const newTask = new Task({ text: req.body.text });
await newTask.save();
res.json(newTask);
});
app.delete("/tasks/:id", async (req, res) => {
await Task.findByIdAndDelete(req.params.id);
res.json({ success: true });
});
app.listen(5000, () => console.log("Backend running on
http://localhost:5000"));
Step 2: Create Frontend
2.1. Go back to task-manager folder and run:
npx create-react-app frontend
cd frontend
npm install axios
2.2. Replace App.js with:
// frontend/src/App.js
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [tasks, setTasks] = useState([]);
const [text, setText] = useState("");
useEffect(() => {
fetchTasks();
}, []);
const fetchTasks = async () => {
const res = await axios.get("http://localhost:5000/tasks");
setTasks(res.data);
};
const addTask = async () => {
if (!text) return;
await axios.post("http://localhost:5000/tasks", { text });
setText("");
fetchTasks();
};
const deleteTask = async (id) => {
await axios.delete(`http://localhost:5000/tasks/${id}`);
fetchTasks();
};
return (
<div style={{ padding: "20px" }}>
<h1>Task Manager</h1>
<input value={text} onChange={(e) =>
setText(e.target.value)} />
<button onClick={addTask}>Add</button>
<ul>
{tasks.map((task) => (
<li key={task._id}>
{task.text}
<button onClick={() =>
deleteTask(task._id)}>❌</button>
</li>
))}
</ul>
</div>
);
}
export default App;
Step 3: Run Everything
3.1. Start MongoDB locally
If installed via MongoDB Community Edition:
mongod
Or use MongoDB Atlas and update the connection string in backend/index.js.
3.2. Start Backend
cd backend
node index.js
3.3. Start Frontend
cd ../frontend
npm start
Frontend runs at:
➡ http://localhost:3000
Backend runs at:
➡ http://localhost:5000
You now have a full MERN stack app:
Add a task
View tasks
Delete a task
Bonus Ideas:
Add edit/update task feature
Add user login
Deploy to Render/Netlify
To start MongoDB locally, follow the guide below based on your operating system:
For Windows
Step 1: Install MongoDB
1. Go to: https://www.mongodb.com/try/download/community
2. Download and install MongoDB Community Edition
3. During installation, check "Install MongoDB as a Service" (recommended)
Step 2: Start MongoDB
If installed as a service, it starts automatically.
To check if it's running:
Open Command Prompt
Run:
mongod
or
net start MongoDB
MongoDB runs by default at:
mongodb://127.0.0.1:27017
Optional: Use Compass GUI
You can also install MongoDB Compass (GUI client) to browse collections and data.
For macOS
Step 1: Install MongoDB using Homebrew
brew tap mongodb/brew
brew install mongodb-community
Step 2: Start MongoDB Service
brew services start mongodb/brew/mongodb-community
To stop:
brew services stop mongodb/brew/mongodb-community
For Ubuntu/Linux
Step 1: Install MongoDB
sudo apt update
sudo apt install -y mongodb
Step 2: Start MongoDB
sudo systemctl start mongodb
Check status:
sudo systemctl status mongodb
Enable on boot:
sudo systemctl enable mongodb
Test Connection
To confirm MongoDB is running, open a new terminal and run:
mongo
You’ll enter the MongoDB shell. To exit:
exit
Common Error?
If mongod says "data/db not found", create the default data directory:
mkdir -p C:\data\db # Windows
mkdir -p ~/data/db # macOS/Linux
