Task Management App

A full-stack task management application built with Node.js, Express, MongoDB, and vanilla JavaScript. This app allows users to create, edit, delete, and manage tasks with features like authentication, search, filtering, and priority management.

Features

• User Authentication: Signup and login with JWT authentication
• Task Management: Create, read, update, and delete tasks
• Task Status: Mark tasks as pending or completed
• Priority Levels: Set task priority (High, Medium, Low)
• Due Dates: Set due dates for tasks
• Search: Search tasks by title or description
• Filtering: Filter tasks by status and priority
• Responsive Design: Works on desktop, tablet, and mobile devices
• Modern UI: Clean and intuitive user interface

Tech Stack

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• JWT (JSON Web Tokens) for authentication
• bcryptjs for password hashing
• CORS for cross-origin resource sharing

Frontend

• HTML5
• CSS3 (with modern features like Grid and Flexbox)
• Vanilla JavaScript (ES6+)
• Fetch API for HTTP requests

Prerequisites

Before running this application, ensure you have the following installed:

• Node.js (v14 or higher)
• MongoDB (Make sure MongoDB is running on your system)

Installation

1. Clone or download the project

2. Install dependencies

   npm install

3. Configure environment variables

   The .env file is already created with default values. You can modify it if needed:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/taskmanagement
   JWT_SECRET=your_jwt_secret_key_change_this_in_production
   

   Important: Change the JWT_SECRET to a secure random string in production.

4. Install and Start MongoDB

   For Windows Users:

   a. Download MongoDB Community Server from: https://www.mongodb.com/try/download/community

   b. Run the installer and choose "Complete" installation

   c. During installation, uncheck "Install MongoDB as a Service" if you want to start it manually

   d. After installation, start MongoDB:

   • If installed as service: MongoDB starts automatically
   • Manual start: Open Command Prompt as Administrator and run:

     "C:\Program Files\MongoDB\Server\7.0\bin\mongod.exe" --dbpath "C:\data\db"
     

   • Or use MongoDB Compass (GUI) to connect

   e. Create the data directory if it doesn't exist:

   mkdir C:\data\db
   

   Alternative: Use MongoDB Atlas (Cloud)

   a. Create a free account at https://www.mongodb.com/cloud/atlas

   b. Create a new cluster (free tier)

   c. Get your connection string from Atlas Dashboard

   d. Update your .env file with the Atlas connection string:

   MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/taskmanagement
   

   Verify MongoDB is running:

   • Open Command Prompt and run: mongod (if in PATH)
   • Or check if MongoDB service is running in Services

5. Start the server

   npm start

   For development with auto-reload:

   npm run dev

6. Access the application

   Open your browser and navigate to:

   http://localhost:5000
   

Usage

Authentication

1. Sign Up: Click "Sign up" on the login page to create a new account
2. Login: Use your email and password to log in
3. Logout: Click the logout button in the header to log out

Task Management

1. Create Task: Fill in the task form with title, description, priority, and due date
2. View Tasks: All tasks are displayed in the task list
3. Edit Task: Click the "Edit" button on a task to modify it
4. Delete Task: Click the "Delete" button to remove a task
5. Toggle Status: Click "Complete" to mark a task as done, or "Undo" to mark it as pending

Search and Filter

• Search: Use the search box to find tasks by title or description
• Filter by Status: Click "All", "Pending", or "Completed" buttons
• Filter by Priority: Use the dropdown to filter by priority level

Project Structure

task-management-app/
├── models/
│   ├── User.js          # User model with password hashing
│   └── Task.js          # Task model with schema
├── routes/
│   ├── auth.js          # Authentication routes (signup, login)
│   └── tasks.js         # Task CRUD routes
├── middleware/
│   └── auth.js          # JWT authentication middleware
├── public/
│   ├── index.html       # Main HTML file
│   ├── styles.css       # CSS styling
│   └── script.js        # Frontend JavaScript
├── server.js            # Express server setup
├── package.json         # Dependencies and scripts
├── .env                 # Environment variables
└── .gitignore          # Git ignore rules

API Endpoints

Authentication

• POST /api/auth/signup - Register a new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user info

Tasks

• GET /api/tasks - Get all tasks (with search and filter support)
• GET /api/tasks/:id - Get single task
• POST /api/tasks - Create new task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task
• PATCH /api/tasks/:id/toggle - Toggle task completion status

Security Features

• Password hashing with bcryptjs
• JWT token-based authentication
• Protected routes requiring authentication
• User-specific task isolation (users can only access their own tasks)
• Input validation on both frontend and backend

Responsive Design

The application is fully responsive and works on:

• Desktop computers (1200px+)
• Tablets (768px - 1199px)
• Mobile devices (less than 768px)

Troubleshooting

MongoDB Connection Error

• Ensure MongoDB is running on your system
• Check the MONGODB_URI in your .env file
• Verify MongoDB is listening on the correct port (default: 27017)

Port Already in Use

• Change the PORT in your .env file to a different port
• Or stop the process using the current port

Authentication Issues

• Clear your browser's localStorage
• Try logging out and logging back in
• Check that your JWT_SECRET is set correctly

Future Enhancements

Potential features to add:

• Task categories/tags
• Task sharing between users
• Email notifications for due dates
• Task reminders
• Dark mode
• Export tasks to CSV/PDF
• Drag and drop task reordering
• Subtasks
• File attachments to tasks

License

This project is open source and available for educational purposes.

Author

Created as a full-stack project demonstrating modern web development practices.