MERN Stack Assignment
Develop a task management application using the MERN stack. The
application should allow users to manage their tasks with features like
creating, updating, deleting, prioritizing and categorising
Here’s a roadmap for developing a Task Management Application using the
MERN stack (MongoDB, Express.js, React.js, Node.js):
Features
Task Management:
Add new tasks.
Edit existing tasks.
Delete tasks.
Mark tasks as complete/incomplete.
Set priority levels (e.g., Low, Medium, High).
Categorize tasks (e.g., Work, Personal, Urgent).
User Management (optional for additional functionality):
User authentication (sign-up/login).
User-specific task lists.
Step-by-Step Development Guide
1. Setup the Development Environment
Install Node.js and MongoDB on your machine.
Use a package manager like npm or yarn for managing dependencies.
2. Backend (Node.js + Express.js)
Coding :
Initialize the Project:
Mkdir task-manager
Cd task-manager
Npm init -y
Npm install express mongoose dotenv body-parser cors
Npm install –save-dev nodemon
Set Up the Server Coding :
Create an index.js file:
Const express = require(‘express’);
Const mongoose = require(‘mongoose’);
Const cors = require(‘cors’);
Const dotenv = require(‘dotenv’);
Dotenv.config();
Const app = express();
App.use(cors());
App.use(express.json());
Const PORT = process.env.PORT ||
5000;Mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => {
App.listen(PORT, () => console.log(`Server running on port ${PORT}`));
})
.catch((error) => console.error(error.message));
Create Task Schema and Model :
In a models folder, add Task.js:
Const mongoose = require(‘mongoose’);
Const TaskSchema = new mongoose.Schema({
Title: { type: String, required: true },
Description: { type: String },
Priority: { type: String, enum: [‘Low’, ‘Medium’, ‘High’], default: ‘Medium’ },
Category: { type: String },
Completed: { type: Boolean, default: false },
createdAt: { type: Date, default: Date.now },
});
Module.exports = mongoose.model(‘Task’, TaskSchema);
Set Up Routes Coding :
In a routes folder, create taskRoutes.js:
Const express = require(‘express’);
Const Task = require(‘../models/Task’);
Const router = express.Router();
Create a new task Coding :
Router.post(‘/’, async (req, res) => {
Try {
Const task = new Task(req.body);
Await task.save();
Res.status(201).json(task);
} catch (error) {
Res.status(500).json({ error: error.message });
});
Get all tasks Coding :
Router.get(‘/’, async (req, res) => {
Try {
Const tasks = await Task.find();
Res.status(200).json(tasks);
} catch (error) {
Res.status(500).json({ error: error.message });
});
Update a task Coding :
Router.put(‘/:id’, async (req, res) => {
Try {
Const task = await Task.findByIdAndUpdate(req.params.id, req.body,
{ new: true });
Res.status(200).json(task);
} catch (error) {
Res.status(500).json({ error: error.message });
});
Delete a task Coding :
Router.delete(‘/:id’, async (req, res) => {
Try {
Await Task.findByIdAndDelete(req.params.id);
Res.status(200).send(‘Task deleted’);
} catch (error) {
Res.status(500).json({ error: error.message });
});
Module.exports = router;
Link the route in index.js:
Const taskRoutes = require(‘./routes/taskRoutes’);
App.use(‘/tasks’, taskRoutes
Front End React Js coding :
Npx create-react-app task-manager-frontend
Cd task-manager-frontend
Npm install axios react-router-dom
Task.Form coding:
Import React, { useState } from ‘react’;
Import axios from ‘axios’;
Const TaskForm = ({ fetchTasks }) => {
Const [formData, setFormData] = useState({
Title: ‘’,
Description: ‘’,
Priority: ‘Medium’,
Category: ‘’,
});
Const handleChange = € => {
setFormData({ …formData, [e.target.name]: e.target.value });
};
Const handleSubmit = async € => {
e.preventDefault();
try {
await axios.post(‘http://localhost:5000/tasks’, formData);
fetchTasks();
setFormData({ title: ‘’, description: ‘’, priority: ‘Medium’, category: ‘’ });
} catch (error) {
Console.error(error.message);
};
Return (
<form onSubmit={handleSubmit}>
<input name=”title” value={formData.title}
onChange={handleChange} placeholder=”Task Title” required />
<textarea name=”description” value={formData.description}
onChange={handleChange} placeholder=”Description” />
<select name=”priority” value={formData.priority}
onChange={handleChange}>
<option value=”Low”>Low</option>
<option value=”Medium”>Medium</option>
<option value=”High”>High</option>
</select>
<input name=”category” value={formData.category}
onChange={handleChange} placeholder=”Category” />
<button type=”submit”>Add Task</button>
</form>
);
};
Export default TaskForm;
Combine page coding :
Import React from ‘react’;
Import TaskForm from ‘../components/TaskForm’;
Import TaskList from ‘../components/TaskList’;
Const HomePage = () => {
Return (
<div>
<h1>Task Manager</h1>
<TaskForm />
<TaskList />
</div>
);
};
Export default HomePage;
Add Routing Coding :
Import React from ‘react’;
Import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’;
Import HomePage from ‘./pages/HomePage’;
Const App = () => {
Return (
<Router>
<Routes>
<Route path=”/” element={<HomePage />} />
</Routes>
</Router>
);
};
Export default App;
Output :
Task Manager
[Title: _____________________]
[Description: _____________________]
[Priority: [Low] [Medium] [High]]
[Category: _____________________]
[ Add Task ]
- [ ] Complete MERN assignment
Priority: High | Category: Work
[ Mark Complete ] [ Delete ]
- [ ] Buy groceries
Priority: Medium | Category: Personal
[ Mark Complete ] [ Delete ]
