Creating a Task Manager App in MERN

This guide walks you through building a Task Manager application using the MERN stack (MongoDB, Express, React, Node.js). The app will allow users to create, read, update, and delete (CRUD) tasks, and can be extended with authentication, filtering, and deployment.

1. Application Overview

Features

Create new tasks

View all tasks

Update task status (complete / incomplete)

Edit and delete tasks

Optional: user authentication and task ownership

Tech Stack

Frontend: React

Backend: Node.js + Express

Database: MongoDB (Mongoose)

API Style: RESTful APIs

Styling (optional): CSS / Tailwind / Material UI

2. Project Structure

task-manager/

├── client/ # React frontend

└── server/ # Node.js backend

3. Backend Setup (Node.js + Express)

Step 1: Initialize Server

mkdir server && cd server

npm init -y

npm install express mongoose cors dotenv

Step 2: Basic Server Setup (index.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 connected"))

.catch(err => console.error(err));

app.listen(5000, () => {

console.log("Server running on port 5000");

});

4. Create Task Model (MongoDB)

Task Schema (models/Task.js)

const mongoose = require("mongoose");

const TaskSchema = new mongoose.Schema({

title: {

type: String,

required: true

description: String,

completed: {

type: Boolean,

default: false

createdAt: {

type: Date,

default: Date.now

}

});

module.exports = mongoose.model("Task", TaskSchema);

5. Build REST API Routes

Task Routes (routes/tasks.js)

const express = require("express");

const Task = require("../models/Task");

const router = express.Router();

// Get all tasks

router.get("/", async (req, res) => {

const tasks = await Task.find();

res.json(tasks);

});

// Create task

router.post("/", async (req, res) => {

const task = new Task(req.body);

await task.save();

res.json(task);

});

// Update task

router.put("/:id", async (req, res) => {

const task = await Task.findByIdAndUpdate(

req.params.id,

req.body,

{ new: true }

);

res.json(task);

});

// Delete task

router.delete("/:id", async (req, res) => {

await Task.findByIdAndDelete(req.params.id);

res.json({ message: "Task deleted" });

});

module.exports = router;

const taskRoutes = require("./routes/tasks");

app.use("/api/tasks", taskRoutes);

6. Frontend Setup (React)

Step 1: Create React App

npx create-react-app client

cd client

npm install axios

7. Build React Components

API Helper (services/api.js)

import axios from "axios";

export default axios.create({

baseURL: "http://localhost:5000/api"

});

Main App (App.js)

import { useEffect, useState } from "react";

import api from "./services/api";

function App() {

const [tasks, setTasks] = useState([]);

const [title, setTitle] = useState("");

const fetchTasks = async () => {

const res = await api.get("/tasks");

setTasks(res.data);

};

const addTask = async () => {

await api.post("/tasks", { title });

setTitle("");

fetchTasks();

};

const toggleTask = async (id, completed) => {

await api.put(`/tasks/${id}`, { completed: !completed });

fetchTasks();

};

const deleteTask = async (id) => {

await api.delete(`/tasks/${id}`);

fetchTasks();

};

useEffect(() => {

fetchTasks();

}, []);

return (

<div>

<h2>Task Manager</h2>

<input

value={title}

onChange={(e) => setTitle(e.target.value)}

<ul>

{tasks.map(task => (

<span

style={{

textDecoration: task.completed ? "line-through" : "none"

}}

{task.title}

</span>

<button onClick={() => toggleTask(task._id, task.completed)}>

Toggle

</button>

<button onClick={() => deleteTask(task._id)}>

Delete

</button>

</li>

))}

</ul>

</div>

);

}

export default App;

8. Optional Enhancements

a) Authentication

JWT-based login and signup

Tasks per user

b) Filters & Sorting

Completed vs pending

Sort by date or priority

c) UI Improvements

Tailwind CSS or Material UI

Drag-and-drop task ordering

d) Deployment

Backend: Render, Railway, or GCP

Frontend: Vercel or Netlify

MongoDB: MongoDB Atlas

9. Common Pitfalls

No error handling in APIs

Missing environment variables

CORS misconfiguration

Hardcoded API URLs

✅ Final Summary

A MERN-based Task Manager app is a great full-stack project to learn CRUD operations, REST APIs, state management, and MongoDB integration. Starting simple and adding features gradually helps you build a production-ready application.

Learn MERN Stack Training in Hyderabad

💡 Projects & Tutorials in MERN

Working with Environment Variables in Production

Using Git Hooks for Code Quality

Visit Our Quality Thought Training Institute in Hyderabad