Skip to content

README.md

Latest commit

 

History

History
170 lines (115 loc) · 3.4 KB

README.md

File metadata and controls

170 lines (115 loc) · 3.4 KB

Task Management System (MERN Stack)

Project Overview

The Task Management System is a full-stack MERN (MongoDB, Express, React, Node) web application that helps users manage and track tasks efficiently. Users can add, update, complete, and delete tasks with a clean and responsive interface. It also includes secure user authentication.

Features

  • User Authentication: Secure registration and login using JWT tokens.

  • Task Management:

    • Add tasks with a title and description.
    • View tasks categorized into pending and completed.
    • Update task status (complete/revert).
    • Delete tasks.

  • Role Management: Basic support for user and admin roles (if applicable).

  • Responsive UI: Optimized for all devices using Tailwind CSS.

Tech Stack

Frontend

  • React.js
  • React Router DOM
  • Axios
  • Tailwind CSS

Backend

  • Node.js
  • Express.js
  • JWT (JSON Web Token) for authentication
  • Mongoose for MongoDB ODM

Database

  • MongoDB (Cloud or Local using MongoDB Compass)

Folder Structure

task-management-system/
├── backend/          # Node + Express + MongoDB API
│   └── models/       # Mongoose models
│   └── routes/       # Express routes
│   └── controllers/  # Route handlers
│   └── middleware/   # Auth middleware
│   └── .env          # Environment variables
├── frontend/         # React app
│   └── src/
│       └── components/
│       └── pages/
│       └── context/
│   └── .env

Setup Instructions

Prerequisites

  • Node.js and npm
  • MongoDB installed locally or use MongoDB Atlas
  • Git

1. Clone the Repository

git clone https://github.com/your-username/task-management-system.git  
cd task-management-system

2. Backend Setup

cd backend  
npm install

Create a .env file in the backend directory:

PORT=5000  
MONGO_URI=your_mongodb_connection_string  
JWT_SECRET=your_jwt_secret

3. Frontend Setup

cd ../frontend  
npm install

Create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5000/api

4. Run the App

Backend:

cd backend  
npm run dev

Frontend:

cd frontend  
npm run dev

Open http://localhost:5173 to view the app in your browser.

API Endpoints

Auth Routes

  • POST /api/auth/register - Register new user
  • POST /api/auth/login - User login

Task Routes

  • GET /api/tasks/pending - Get all pending tasks
  • GET /api/tasks/completed - Get all completed tasks
  • POST /api/tasks - Add new task
  • PUT /api/tasks/:id/complete - Mark task as complete
  • PUT /api/tasks/:id/pending - Revert task to pending
  • DELETE /api/tasks/:id - Delete task

Deployment

Frontend

cd frontend  
npm run build
  • Deploy the /frontend/dist folder to Netlify, Vercel, or Surge.

Backend

  • Deploy using platforms like Render, Railway, or DigitalOcean.
  • Add your production MongoDB URI and other secrets in the hosted .env.

Screenshots

Add screenshots of the app here (Pending, Completed views, Login/Register UI).

Future Enhancements

  • Google or GitHub OAuth login
  • Task reminders/notifications
  • Task prioritization
  • Subtasks or checklists
  • Real-time collaboration

Contributors

  • Your Name – Full-stack Developer
  • Collaborators (if any)