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, [Link], [Link], [Link]):
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 [Link] and MongoDB on your machine.
Use a package manager like npm or yarn for managing dependencies.
2. Backend ([Link] + [Link])
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 [Link] file:
Const express = require(‘express’);
Const mongoose = require(‘mongoose’);
Const cors = require(‘cors’);
Const dotenv = require(‘dotenv’);
[Link]();
Const app = express();
[Link](cors());
[Link]([Link]());
Const PORT = [Link] ||
5000;[Link]([Link].MONGO_URI, { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => {
[Link](PORT, () => [Link](`Server running on port ${PORT}`));
})
.catch((error) => [Link]([Link]));
Create Task Schema and Model :
In a models folder, add [Link]:
Const mongoose = require(‘mongoose’);
Const TaskSchema = new [Link]({
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: [Link] },
});
[Link] = [Link](‘Task’, TaskSchema);
Set Up Routes Coding :
In a routes folder, create [Link]:
Const express = require(‘express’);
Const Task = require(‘../models/Task’);
Const router = [Link]();
Create a new task Coding :
[Link](‘/’, async (req, res) => {
Try {
Const task = new Task([Link]);
Await [Link]();
[Link](201).json(task);
} catch (error) {
[Link](500).json({ error: [Link] });
});
Get all tasks Coding :
[Link](‘/’, async (req, res) => {
Try {
Const tasks = await [Link]();
[Link](200).json(tasks);
} catch (error) {
[Link](500).json({ error: [Link] });
});
Update a task Coding :
[Link](‘/:id’, async (req, res) => {
Try {
Const task = await [Link]([Link], [Link],
{ new: true });
[Link](200).json(task);
} catch (error) {
[Link](500).json({ error: [Link] });
});
Delete a task Coding :
[Link](‘/:id’, async (req, res) => {
Try {
Await [Link]([Link]);
[Link](200).send(‘Task deleted’);
} catch (error) {
[Link](500).json({ error: [Link] });
});
[Link] = router;
Link the route in [Link]:
Const taskRoutes = require(‘./routes/taskRoutes’);
[Link](‘/tasks’, taskRoutes
Front End React Js coding :
Npx create-react-app task-manager-frontend
Cd task-manager-frontend
Npm install axios react-router-dom
[Link] 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, [[Link]]: [Link] });
};
Const handleSubmit = async € => {
[Link]();
try {
await [Link](‘[Link] formData);
fetchTasks();
setFormData({ title: ‘’, description: ‘’, priority: ‘Medium’, category: ‘’ });
} catch (error) {
[Link]([Link]);
};
Return (
<form onSubmit={handleSubmit}>
<input name=”title” value={[Link]}
onChange={handleChange} placeholder=”Task Title” required />
<textarea name=”description” value={[Link]}
onChange={handleChange} placeholder=”Description” />
<select name=”priority” value={[Link]}
onChange={handleChange}>
<option value=”Low”>Low</option>
<option value=”Medium”>Medium</option>
<option value=”High”>High</option>
</select>
<input name=”category” value={[Link]}
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 ]