NextTask — Modern Task Tracker

NextTask is a production-quality, interview-ready, full-stack Task Tracker application. Built with a clean architecture pattern, it features user authentication, scoped task isolation (multi-tenant safety), robust server-side validations, real-time dashboard analytics, and full Docker containerization.

---

🚀 Key Features

• Secure Authentication & Session Retention: JWT-based authentication with bcrypt password hashing, session persistence via React Context (AuthContext), and custom Axios request interceptors to automatically inject credentials.
• Scoped Access Control: Tasks are fully isolated per user. Database queries, filters, sort indexes, and facet statistics are dynamically filtered at the database layer based on the authenticated user ID.
• Premium Dashboard Analytics: Real-time calculated statistics summarizing total tasks, status breakdowns (Pending, In Progress, Completed), completion percentage, and priority tracking.
• Advanced Filtering, Sorting & Search: Case-insensitive text search, status and priority query filtering, and multiple sort indexes (e.g., newest, oldest, alphabetical, due date) backed by Mongoose database indexes.
• Modern CSS System & Dark Mode: Harmonious dark/light theme switching with native persistent storage. Built using premium, responsive modern layouts.
• Docker Containerized Composition: Multi-service Docker orchestrations for local MongoDB databases, Node.js API servers, and Nginx client environments.

---

🛠️ Technology Stack

Backend (nexttask-server)

• Core: Node.js, Express.js, TypeScript (Strict Mode)
• Database: MongoDB, Mongoose (indexing, schemas, hooks, aggregation pipelines)
• Security: JSON Web Tokens (JWT), bcryptjs, Helmet, custom NoSQL Injection Sanitization
• Testing: Jest, Supertest
• Logging: Custom request/response execution console loggers

Frontend (nexttask-client)

• Core: React, TypeScript, Vite
• Styling: Tailwind CSS, Lucide React (Icons)
• Form & Validation: React Hook Form, Zod Resolver
• Routing: React Router DOM (protected route guards)
• State Management: React Context API (ThemeContext, AuthContext, TaskContext)
• Notifications: Sonner (Toast system)
• HTTP Client: Axios (configured request interceptor)

---

📐 System Architecture

The diagram below illustrates the communication flow, container boundary layouts, and authentication injection mechanism:

graph TD
    subgraph "Docker Compose Mesh"
        subgraph "nexttask-client Container (Port 3000)"
            A[React App] -->|Reads token| B[localStorage]
            A -->|Injects Authorization| C[Axios Interceptor]
            D[Nginx Web Server] -->|Serves Static Files| A
        end

        subgraph "nexttask-server Container (Port 5000)"
            E[Express Server] -->|Applies protect middleware| F[JWT Verification]
            F -->|Validates Token| G[Auth Router]
            F -->|Restricts Context by UserID| H[Task Router]
        end

        subgraph "nexttask-db Container (Port 27017)"
            I[(MongoDB Database)]
        end

        C -->|HTTP Request with Bearer Token| E
        G -->|Read/Write User| I
        H -->|Scoped Query: {user: req.user._id}| I
    end

---

📂 Project Structure

NextTask/
├── docker-compose.yml                    # Orchestrates DB, API, and Static client containers
├── nexttask-server/                      # REST API Node.js backend
│   ├── src/
│   │   ├── config/db.ts                  # Database connection & validation checks
│   │   ├── constants/                    # Enums, HTTP codes, validation limits
│   │   ├── interfaces/                   # Strict TypeScript type contracts
│   │   ├── models/                       # Mongoose schemas (User, Task)
│   │   ├── middleware/                   # JWT Auth, request loggers, global handlers
│   │   ├── controllers/                  # Clean route handlers
│   │   ├── routes/                       # Express router mapping
│   │   ├── services/                     # Business logic & scoped database queries
│   │   ├── validators/                   # Schema validation middleware (Zod)
│   │   ├── utils/                        # Response formatting & query building helpers
│   │   ├── __tests__/                    # Automated testing suite
│   │   └── app.ts                        # Express middleware setup
│   └── Dockerfile                        # Multi-stage production build script
└── nexttask-client/                      # Vite React frontend
    ├── src/
    │   ├── api/client.ts                 # Interceptor-enabled Axios client
    │   ├── components/
    │   │   ├── common/                   # Reusable UI controls (Button, Input, guards)
    │   │   ├── layout/                   # MainLayout, Header, and Navbar
    │   │   └── task/                     # Stat cards, filter panels, grids, task forms
    │   ├── context/                      # React Context providers (Theme, Auth, Tasks)
    │   ├── pages/                        # Dashboard, Login, Register, NotFound
    │   └── services/taskService.ts       # Service wrappers for backend communication
    └── Dockerfile                        # Multi-stage static build served via Nginx

---

🔑 API Reference

Public Endpoints

• GET /health - Service health diagnostic validation. Returns 200 OK.

Authentication Endpoints

• POST /api/auth/register - Create a new user.
  • Body: { "name": "John Doe", "email": "john@example.com", "password": "password123" }
  • Returns: User metadata & signed JWT token.
• POST /api/auth/login - Authenticate an existing user.
  • Body: { "email": "john@example.com", "password": "password123" }
  • Returns: User metadata & signed JWT token.

Protected Endpoints (Requires Header: Authorization: Bearer <token>)

• GET /api/auth/me - Retrieve current logged-in user profile.
• GET /api/tasks - List tasks owned by the authenticated user.
  • Query Params:
    • search (optional): Case-insensitive match against title/description.
    • status (optional): Filter by Pending, In Progress, or Completed.
    • priority (optional): Filter by Low, Medium, or High.
    • sort (optional): newest, oldest, alphabetical, or dueDate.
    • page / limit (optional): Pagination controls (default: page 1, limit 10).
• POST /api/tasks - Create a new task.
  • Body: { "title": "Buy groceries", "description": "Milk, eggs, and bread", "priority": "Medium", "dueDate": "2026-07-15" }
• GET /api/tasks/:id - Fetch task details by ID (verifies ownership).
• PUT /api/tasks/:id - Update task details (verifies ownership).
• DELETE /api/tasks/:id - Delete task by ID (verifies ownership).
• GET /api/tasks/stats - Compile analytics metrics scoped to the active user.

---

🛠️ Getting Started

Option A: Run via Docker Compose (Recommended)

This runs the client, backend server, and MongoDB database within an isolated network without requiring local installations.

1. Ensure Docker Desktop is running.
2. Initialize and run:

   docker compose up --build -d
   

3. Access the applications:
   • Frontend Client: http://localhost:3000
   • Backend API: http://localhost:5000

---

Option B: Local Development (Manual Setup)

1. Setup Local MongoDB

Ensure you have MongoDB running locally at mongodb://localhost:27017.

2. Run the Backend API

1. Navigate to the server folder:

   cd nexttask-server
   

2. Setup environment variables by copying .env.example:

   cp .env.example .env
   

3. Install dependencies:

   npm install
   

4. Start the API Server in development mode:

   npm run dev
   

3. Run the Frontend Client

1. Navigate to the client folder:

   cd nexttask-client
   

2. Setup environment variables:

   cp .env.example .env
   

3. Install dependencies:

   npm install
   

4. Launch the React dev server:

   npm run dev
   

5. Access the developer workspace in your browser at http://localhost:5173.

---

🧪 Testing & Validation

Automated integration tests are built into the backend using Jest and Supertest, checking authentication registration, credential validation, token enforcement, pagination/filters, and multi-user isolation.

To run the test suite:

cd nexttask-server
npm run test