Enhanced Todo List Application

An advanced Todo application built with React, Node.js (v22.11.0), and MongoDB. This app allows users to manage tasks across different categories with authentication and user-specific data management.

---

Table of Contents

• Features
• Tech Stack
• Project Structure
• Setup and Installation
  • Docker Deployment
  • Local Deployment
• Environment Variables
• API Endpoints
• Database Schema
• Future Enhancements

---

Features

Frontend

• Comprehensive task management: Create, update, display, and delete tasks.
• Mark tasks as completed to track progress effectively.
• Categorize tasks for better organization and prioritization.
• Advanced sorting options: Sort tasks by priority or due date.
• Searching specific task.
• Secure user authentication using JSON Web Tokens (JWT).
• Intuitive UI styling to clearly distinguish between completed and pending tasks.
• Paginated task lists for enhanced navigation and usability.
• User-defined custom categories for personalized task organization.
• Flexible pagination settings: Customize the number of tasks displayed per page.

Backend

• RESTful APIs for efficient management of tasks, categories, and user data.
• JSON Web Token (JWT) based authentication ensuring secure user sessions.
• Comprehensive data validation to maintain application integrity and prevent errors.
• Well-defined MongoDB schemas to structure and store data effectively.
• Dockerization of the application for consistent and portable deployment.

Database

• Schemas for tasks, categories, and users.
• User-specific tasks and categories.
• Secure storage of sensitive user data.

---

Tech Stack

• Frontend: React, Vite, Tailwind CSS, Nginx
• Backend: Node.js, Express
• API Documentation: Swagger
• Database: MongoDB
• Containerization: Docker, Docker Compose

---

Project Structure

enhanced-todo-list-application/
│
├── frontend/                 # React-based frontend
│   ├── public/
│   ├── src/
│   └── .envExample
│   └── .gitignore
│   └── Dockerfile
│   └── eslint.config.js
│   └── index.html
│   └── nginx.conf
│   └── package.json
│   └── postcss.config.js
│   └── README.md
│   └── tailwind.config.js
│   └── tsconfig.json
│   └── vite.config.ts
│   └── yarn.lock
│
├── backend/                  # Node.js backend
│   ├── src/
│   ├── .dockerignore
│   └── .editorconfig
│   └── .env.example
│   └── .eslintignore
│   └── .eslintrc.json
│   └── .gitattributes
│   └── .gitignore
│   └── .lintstagedrc.json
│   └── .prettierignore
│   └── .prettierrc.json
│   └── Dockerfile
│   └── ecosystem.config.json
│   └── package.json
│   └── README.md
│   └── yarn.lock
│
├── docker-compose.yml        # Compose file for running the app
└── README.md                 # Project documentation

---

Setup and Installation

Docker Deployment

1. Docke: Ensure Docker and Docker Compose are installed on your machine.

2. Clone the repository:

   git clone https://github.com/mobin-ism/enhanced-todo-list-application.git
   cd enhanced-todo-list-application

3. Build and run the application:

   sudo docker compose build --no-cache && sudo docker compose up -d

4. Access the application:

   • Frontend: http://localhost:8080
   • Backend: http://localhost:3000

5. Authentication Options

   • Superadmin Access:

     A pre-seeded superadmin account is available for immediate use. The credentials are:

     • Email: [email protected]
     • Password: password123

   • User Registration:

     New users can create their own accounts directly from the application. Each user will have a personalized dashboard to manage tasks and categories.

The superadmin account is populated via the seeding mechanism during the initial setup, providing administrative access to oversee the application.

---

Local Deployment

1. Install prerequisites:

   • Node.js (v22.11.0)
   • Yarn (v1.22.22)
   • MongoDB

2. Clone the repository:

   git clone https://github.com/mobin-ism/enhanced-todo-list-application.git
   cd enhanced-todo-list-application

3. Set up environment variables: Create .env files for both frontend and backend services. See the Environment Variables section for details.

4. Install dependencies and run services:

   • Backend:

     cd backend
     yarn
     yarn dev

   • Frontend:

     cd frontend
     yarn
     yarn build
     yarn dev

5. Access the application:

   • Frontend: http://localhost:8080
   • Backend: http://localhost:3000

6. Authentication Options

   • Superadmin Access:

     A pre-seeded superadmin account is available for immediate use. The credentials are:

     • Email: [email protected]
     • Password: password123

   • User Registration:

     New users can create their own accounts directly from the application. Each user will have a personalized dashboard to manage tasks and categories.

---

Environment Variables

Backend

Create a .env file in the backend/ directory and copy all the content from .envExample:

# Port number
PORT=3000

# Your local Mongo DB credentials
MONGODB_USER=admin
MONGODB_PASSWORD=password
MONGODB_HOST=localhost
MONGODB_PORT=27017
MONGODB_DATABASE=todo

# JWT
# JWT secret key
JWT_SECRET=thisisasamplesecret
# Number of minutes after which an access token expires
JWT_ACCESS_EXPIRATION_MINUTES=60
# Number of days after which a refresh token expires
JWT_REFRESH_EXPIRATION_DAYS=60
# Number of minutes after which a reset password token expires
JWT_RESET_PASSWORD_EXPIRATION_MINUTES=60
# Number of minutes after which a verify email token expires
JWT_VERIFY_EMAIL_EXPIRATION_MINUTES=60

# SMTP configuration options for the email service
# For testing, you can use a fake SMTP service like Ethereal: https://ethereal.email/create
SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=587
SMTP_USERNAME=apikey
SMTP_PASSWORD=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
[email protected]

Frontend

Create a .env file in the frontend/ directory and copy all the content from .envExample:

VITE_API_BASE_URL=http://localhost:3000/v1

---

API Endpoints

You can see the API documentation in Swagger, If you follow the local deployment. Go to http://localhost:3000/v1/docs/

Tasks

• GET /tasks: Retrieve all tasks.
• GET /tasks/:id: Retrieve a specific tasks.
• POST /tasks: Create a new task.
• PATCH /tasks/:id: Update a task.
• DELETE /tasks/:id: Delete a task.

Categories

• GET /categories: Retrieve all categories.
• GET /categories/:id: Retrieve a specific categories.
• POST /categories: Create a new category.
• PATCH /categories/:id: Update a category.
• DELETE /categories/:id: Delete a category.

Authentication

• POST /auth/login: User login.
• POST /auth/register: User registration.
• POST /auth/refresh-token: Access token refreshing.

Users

• GET /users: Retrieve all users.
• GET /users/:id: Retrieve a specific users.
• POST /users: Create a new user.
• PATCH /users/:id: Update a user.
• DELETE /users/:id: Delete a user.

---

Database Schema

Task

• title: String (required, trimmed)
• description: String (optional, trimmed)
• dueDate: Date (optional)
• categoryId: ObjectId (references Category, optional)
• isCompleted: Boolean (default: false)
• userId: ObjectId (references User, required)
• priority: Number (enum: [1, 2, 3] for low, medium, high, default: 1)

Category

• name: String (required, unique, trimmed)
• description: String (optional, trimmed)
• isActive: Boolean (default: true)
• userId: ObjectId (references User, optional)
• timestamps: CreatedAt, UpdatedAt (automatically added by mongoose)

User

• name: String (required, trimmed)
• email: String (required, unique, trimmed, lowercase)
• password: String (required, trimmed, minimum length: 8) Must contain at least one letter and one number, Stored privately (excluded from JSON representation)
• role: String (enum: values defined in roles, default: 'user')
• isEmailVerified: Boolean (default: true)
• timestamps: CreatedAt, UpdatedAt (automatically added by mongoose)

---