Task Manager App

A modern, full-stack Todo application with a secure backend built with Node.js, Express, and MongoDB, and a responsive frontend using HTML, CSS, and JavaScript with Tailwind CSS for styling.

Overview

The Task Manager App is a comprehensive todo management system that allows users to create, organize, and track their tasks efficiently. The application features user authentication, role-based access control, and a clean, intuitive interface that works seamlessly across all devices.

Features

Backend Features

• Authentication & Authorization

  • Secure user registration and login with password hashing
  • JWT-based authentication with configurable token expiration
  • Role-based access control supporting user and admin roles
  • Protected routes with middleware validation
  • Secure session management

• Task Management

  • Full CRUD operations for tasks
  • Mark tasks as completed or incomplete
  • User-specific todo lists
  • Admin access to view and manage all tasks
  • Timestamp tracking for creation and updates

• Security & Best Practices

  • Secure HTTP headers with Helmet
  • CORS support for cross-origin requests
  • Request logging with Morgan
  • Input validation with express-validator
  • Environment variable configuration
  • Centralized error handling
  • Password hashing with bcryptjs

Frontend Features

• Modern UI/UX

  • Responsive design that works on desktop, tablet, and mobile
  • Dark mode and light mode support
  • Smooth animations and transitions
  • Clean and intuitive interface
  • Tailwind CSS for modern styling

• User Experience

  • Intuitive todo creation and management
  • Real-time status updates
  • Clean and organized todo listing
  • User profile management
  • Admin dashboard for administrative users
  • Seamless authentication flow
  • Form validation and error handling

Tech Stack

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing library
• Express Validator - Input validation middleware
• Helmet - Security headers middleware
• Morgan - HTTP request logger
• CORS - Cross-origin resource sharing
• dotenv - Environment variable management

Frontend

• HTML5 - Markup language
• CSS3 - Styling with custom CSS
• JavaScript (ES6+) - Modern JavaScript features
• Tailwind CSS - Utility-first CSS framework
• Font Awesome - Icon library

Project Structure

Testing Todo/
├── backend/
│   ├── config/
│   │   └── db.js                 # MongoDB connection configuration
│   ├── controllers/
│   │   ├── authController.js     # Authentication logic
│   │   └── todoController.js     # Todo CRUD operations
│   ├── middlewares/
│   │   ├── auth.js               # JWT authentication middleware
│   │   ├── role.js               # Role-based access control
│   │   ├── errorHandler.js       # Error handling middleware
│   │   └── logger.js             # Custom logging middleware
│   ├── models/
│   │   ├── Todo.js               # Todo data model
│   │   └── User.js               # User data model
│   ├── routes/
│   │   ├── auth.js               # Authentication routes
│   │   └── todos.js              # Todo routes
│   ├── utils/
│   │   └── generateToken.js      # JWT token generation
│   ├── createadmin.js            # Admin user creation script
│   ├── server.js                 # Main application entry point
│   ├── package.json              # Backend dependencies
│   └── README.md                 # Backend documentation
│
├── frontend/
│   ├── assets/
│   │   └── logo.jpg              # Application logo
│   │               
│   ├── js/
│   │   ├── auth.js               # Authentication logic
│   │   ├── config.js             # API configuration
│   │   ├── create.js             # Todo creation/editing
│   │   ├── home.js               # Todo listing and management
│   │   ├── nav.js                # Navigation functionality
│   │   ├── profile.js            # User profile and admin dashboard
│   │   └── theme.js            # Theme toggle functionality
│   ├── index.html                # Landing page
│   ├── login.html                # Login page
│   ├── register.html             # Registration page
│   ├── home.html                 # Main todo dashboard
│   ├── create.html               # Create/edit todo page
│   ├── profile.html              # User profile page
│   └── README.md                 # Frontend documentation
│
├── .gitignore                    # Git ignore rules
└── README.md                     # This file

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher) - Download Node.js
• MongoDB - Local installation or MongoDB Atlas account
  • Local: Download MongoDB
  • Cloud: MongoDB Atlas
• npm or yarn - Package manager (comes with Node.js)
• Git - Version control system

Backend Setup

1. Navigate to the backend directory

   cd backend

2. Install dependencies

   npm install

3. Create a .env file in the backend directory

   MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/todoapp
   JWT_SECRET=your_super_secret_jwt_key_here
   TOKEN_EXPIRATION=7d
   PORT=12000
   NODE_ENV=development

   Replace the placeholders with your actual values:

   • MONGODB_URI: Your MongoDB connection string
   • JWT_SECRET: A strong, random string (minimum 32 characters recommended)

4. Create an admin user (optional)

   node createadmin.js

5. Start the backend server

   npm run backend

   The server will run on http://localhost:12000

Frontend Setup

1. Navigate to the frontend directory

   cd frontend

2. Configure the API base URL

   Open js/config.js and update the API base URL:

   const API_BASE_URL = "http://localhost:12000";

3. Start a local web server

   Option 1: Using VS Code Live Server

   • Install the "Live Server" extension
   • Right-click on index.html and select "Open with Live Server"

   Option 2: Using Python

   python -m http.server 8000

   Option 3: Using Node.js http-server

   npm install -g http-server
   http-server -p 8000

4. Open the application

   Navigate to http://localhost:8000 (or the port you configured) in your web browser.

API Endpoints

Authentication

• POST /api/auth/register

  • Register a new user
  • Body: { "username": "user", "email": "user@example.com", "password": "password123" }

• POST /api/auth/login

  • Login and receive JWT token
  • Body: { "username": "user", "password": "password123" }

• POST /api/auth/logout

  • Logout (client-side token removal)

Todos (Requires JWT Authentication)

• POST /api/todos

  • Create a new todo
  • Body: { "title": "Todo title", "description": "Todo description" }

• GET /api/todos

  • Get all todos for the authenticated user

• GET /api/todos/:id

  • Get a specific todo by ID

• PUT /api/todos/:id

  • Update a todo
  • Body: { "title": "Updated title", "description": "Updated description", "completed": true }

• DELETE /api/todos/:id

  • Delete a todo

Admin Endpoints (Requires Admin Role)

• GET /api/todos/admin

  • Get all todos from all users

• DELETE /api/todos/admin/:id

  • Delete any todo by ID

• GET /api/todos/admin/users

  • Get all users and their todos

For detailed API documentation, see the Backend README.

Authentication Flow

1. User registers or logs in through the frontend
2. Backend validates credentials and returns a JWT token
3. Frontend stores the token in localStorage
4. Token is included in the Authorization header for all protected requests
5. Backend validates the token on each request
6. User can access protected routes based on their role

Security

Backend Security

• Passwords are hashed using bcryptjs before storage
• JWT tokens are used for stateless authentication
• Role-based access control for admin routes
• Secure HTTP headers with Helmet
• Input validation with express-validator
• CORS configuration for cross-origin requests
• Environment variables for sensitive configuration

Frontend Security

• JWT tokens stored securely
• Input validation on forms
• XSS protection through proper data sanitization
• Secure API communication
• Error handling without exposing sensitive information

Testing

Backend Testing

A Postman collection is included in the repository for testing API endpoints:

1. Import Testing Todo.postman_collection.json into Postman
2. Set up environment variables:
   • base_url: http://localhost:12000
   • token: (automatically set after login)
3. Run requests in sequence to test the full flow

Frontend Testing

• Test user registration and login
• Verify todo creation, editing, and deletion
• Test admin functionality (if logged in as admin)
• Verify responsive design on different screen sizes
• Test dark/light mode toggle

Deployment

Backend Deployment

1. Set up environment variables on your hosting platform
2. Ensure MongoDB connection is configured
3. Deploy to platforms like:
   • Heroku
   • Render
   • Railway
   • AWS
   • DigitalOcean

Frontend Deployment

1. Update API base URL in js/config.js to point to deployed backend
2. Deploy static files to:
   • Netlify
   • Vercel
   • GitHub Pages
   • AWS S3
   • Any static hosting service

Frontend Pages

• Index Page (index.html): Landing page with application overview
• Login Page (login.html): User authentication
• Register Page (register.html): New user registration
• Home Page (home.html): Main todo dashboard
• Create Page (create.html): Add or edit todos
• Profile Page (profile.html): User profile management and admin dashboard

Development

Project Structure

The project follows a clean separation of concerns:

• Backend: RESTful API with Express.js
• Frontend: Vanilla JavaScript with modular architecture
• Database: MongoDB with Mongoose ODM

Code Style

• ES6+ JavaScript features
• Modular code organization
• Consistent naming conventions
• Comments for complex logic

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Troubleshooting

Common Issues

Backend won't start:

• Check MongoDB connection string
• Verify all environment variables are set
• Ensure port 12000 is not in use

Frontend can't connect to backend:

• Verify backend server is running
• Check API base URL in js/config.js
• Verify CORS settings on backend

Authentication issues:

• Check token expiration
• Verify JWT secret is set correctly
• Clear browser localStorage and try again

For more detailed troubleshooting, see the individual README files in the backend and frontend directories.

License

This project is licensed under the MIT License.

Support

If you encounter any issues or have questions:

1. Check the documentation in backend and frontend README files
2. Review existing GitHub issues
3. Create a new issue with detailed information
4. Contact the maintainer for direct support

---

Built by Amritanshu Goutam.