Task Management Apps: Step-by-Step Guide

Introduction

This guide provides a comprehensive step-by-step approach to developing a task management application using the MERN stack. The project includes user authentication, task CRUD operations, task categorization, a responsive and intuitive UI, notification features, and collaboration capabilities.

Project Setup

Backend Setup

Initialize the Project

 mkdir task-manager
 cd task-manager
 npm init -y

Install Dependencies

 npm install express mongoose dotenv cors bcryptjs jsonwebtoken
 npm install --save-dev nodemon

Project Structure

 task-manager/
 ├── backend/
 │   ├── models/
 │   │   ├── Task.js
 │   │   └── User.js
 │   ├── routes/
 │   │   ├── auth.js
 │   │   └── tasks.js
 │   ├── middleware/
 │   │   └── auth.js
 │   ├── .env
 │   ├── server.js
 │   └── package.json
 ├── frontend/
 │   ├── public/
 │   ├── src/
 │   │   ├── components/
 │   │   ├── pages/
 │   |   |
 │   │   ├── App.js
 │   │   ├── index.js
 │   │   └── ... (other necessary files)
 │   ├── package.json
 │   └── ... (other necessary files)
 ├── package.json
 └── README.md

Frontend Setup

Initialize React App

 npx create-react-app frontend
 cd frontend

Install Dependencies

 npm install axios redux react-redux react-router-dom @mui/material @emotion/react @emotion/styled
 npm install @mui/icons-material

Project Structure

 frontend/
 ├── public/
 ├── src/
 │   ├── components/
 │   │   ├── Login.js
 │   │   ├── Registration.js
 │   │   ├── TaskForm.js
 │   │   ├── TaskList.js
 │   │   ├── ... (other necessary files)
 │   ├── pages/
 │   │   ├── HomePage.js
 │   │   └── ... (other necessary files)
 │   ├── App.js
 │   ├── index.js
 │   └── ... (other necessary files)
 ├── package.json
 └── ... (other necessary files)

User Authentication

User Registration

Backend: User Model (models/User.js)

 const mongoose = require('mongoose');

 const UserSchema = new mongoose.Schema({
     username: { type: String, required: true },
     email: { type: String, required: true, unique: true },
     password: { type: String, required: true }
 });

 module.exports = mongoose.model('User', UserSchema);

Backend: Auth Routes (routes/auth.js)

 const express = require('express');
 const router = express.Router();
 const bcrypt = require('bcryptjs');
 const jwt = require('jsonwebtoken');
 const User = require('../models/User');

 router.post('/register', async (req, res) => {
     const { username, email, password } = req.body;
     try {
         let existingUser = await User.findOne({ email });
         if (existingUser) {
             return res.status(400).send('Email already registered');
         }

         const hashedPassword = await bcrypt.hash(password, 10);
         const newUser = new User({ username, email, password: hashedPassword });
         await newUser.save();
         res.status(201).send('User registered');
     } catch (error) {
         console.error('Registration error:', error);
         res.status(500).send('Server Error');
     }
 });

 module.exports = router;

Frontend: Registration Component (components/Registration.js)

 import React, { useState } from 'react';
 import axios from 'axios';

 const Registration = () => {
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');

     const handleSubmit = async (e) => {
         e.preventDefault();
         try {
             const response = await axios.post('http://localhost:5000/api/auth/register', {
                 username,
                 email,
                 password
             });
             console.log(response.data);
             // Optionally handle success or redirect to login
         } catch (error) {
             setError('Registration failed. Please try again.');
         }
     };

     return (
         <div className="flex justify-center items-center h-screen">
             <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                 <h2 className="text-2xl mb-4">Register</h2>
                 <div className="mb-4">
                     <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username" required />
                 </div>
                 <div className="mb-4">
                     <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Email" required />
                 </div>
                 <div className="mb-4">
                     <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Password" required />
                 </div>
                 {error && <p className="text-red-500 text-xs italic">{error}</p>}
                 <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                     Register
                 </button>
             </form>
         </div>
     );
 };

 export default Registration;

Backend: Auth Routes (routes/auth.js)

 router.post('/login', async (req, res) => {
     const { email, password } = req.body;

     try {
         const user = await User.findOne({ email });
         if (!user) {
             return res.status(401).json({ msg: 'Invalid credentials' });
         }

         const isMatch = await bcrypt.compare(password, user.password);
         if (!isMatch) {
             return res.status(401).json({ msg: 'Invalid credentials' });
         }

         const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
         res.json({ token });
     } catch (err) {
         console.error(err.message);
         res.status(500).send('Server Error');
     }
 });

Frontend: Login Component (components/Login.js)

 import React, { useState } from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';

 const Login = ({ onLogin }) => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');

     const handleSubmit = async (e) => {
         e.preventDefault();
         try {
             const response = await axios.post('http://localhost:5000/api/auth/login', { email, password });
             const token = response.data.token;
             onLogin(token); // Notify parent component (App.js) about successful login
         } catch (error) {
             if (error.response) {
                 setError('Invalid credentials. Please try again.');
             } else {
                 setError('Something went wrong. Please try again later.');
             }
         }
     };

     return (
         <div className="flex justify-center items-center h-screen">
             <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                 <h2 className="text-2xl mb-4">Login</h2>
                 <div className="mb-4">
                     <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Email" required />
                 </div>
                 <div className="mb-4">
                     <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Password" required />
                 </div>
                 {error && <p className="text-red-500 text-xs italic">{error}</p>}
                 <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                     Login
                 </button>
                 <p className="mt-4">
                     Don't have an account? <Link to="/register" className="text-blue-500 hover:text-blue-700">Register here</Link>
                 </p>
             </form>
         </div>
     );
 };

 export default Login;

JWT Authentication

Backend: Auth Middleware (middleware/auth.js)

 const jwt = require('jsonwebtoken');

 const authMiddleware = (req, res, next) => {
     const token = req.header('Authorization')?.replace('Bearer ', '');
     if (!token) {
         return res.status(401).send('Access denied');
     }

     try {
         const verified = jwt.verify(token, process.env.JWT_SECRET);
         req.user = verified;
         next();
     } catch (error) {
         res.status(400).send('Invalid token');
     }
 };

 module.exports = authMiddleware;

Backend: Protecting Routes

 const express = require('express');
 const router = express.Router();
 const Task = require('../models/Task');
 const authMiddleware = require('../middleware/auth');

 // Example of a protected route
 router.get('/', authMiddleware, async (req, res) => {
     try {
         const tasks = await Task.find({ userId: req.user.userId });
         res.json(tasks);
     } catch (error) {
         res.status(500).send('Server Error');
     }
 });

 // ... other routes