TaskTracker

Full-stack task management with Angular 17 + Node.js

A clean, production-style task management application featuring JWT authentication, full CRUD operations, and a polished dark UI with gradient accents. Built to demonstrate end-to-end full stack proficiency.

---

Highlights

• JWT Auth — Register / login with bcrypt password hashing and token-based route guards
• Full CRUD — Create, read, update, and delete tasks with real-time UI updates
• Status Workflow — To Do → In Progress → Done with one-click status changes
• Priority Levels — Low / Medium / High with color-coded badges
• Smart Filtering — Filter tasks by status with instant count updates
• Dark UI — Custom dark theme with gradient accents, glow effects, and smooth transitions
• Responsive — Works across desktop and mobile viewports
• MVC Architecture — Clean separation of models, routes, and frontend components

Tech Stack

Layer	Technology
Frontend	Angular 17 (Standalone Components, Reactive Forms, RxJS)
Styling	SCSS with shared design tokens and variables
Backend	Node.js, Express.js
Database	MongoDB with Mongoose ODM
Auth	JWT + bcryptjs
Architecture	MVC, RESTful API

Quick Start

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)

Backend

cd server
cp .env.example .env
# Update MONGO_URI and JWT_SECRET in .env
npm install
node server.js

Frontend

npm install
ng serve

Open http://localhost:4200

API Reference

Method	Endpoint	Auth	Description
POST	/api/auth/register		Register a new user
POST	/api/auth/login		Authenticate and receive JWT
GET	/api/tasks	✓	Retrieve all tasks for the authenticated user
POST	/api/tasks	✓	Create a new task
PUT	/api/tasks/:id	✓	Update an existing task
DELETE	/api/tasks/:id	✓	Delete a task
GET	/api/health		Service health check

Project Structure

tasktracker/
├── src/                          # Angular frontend
│   ├── app/
│   │   ├── components/
│   │   │   ├── login/           # Authentication page
│   │   │   ├── register/        # User registration
│   │   │   └── task-list/       # Task dashboard & management
│   │   ├── guards/              # Auth route guard
│   │   └── services/            # Auth & Task HTTP services
│   ├── _variables.scss          # Shared design tokens
│   └── styles.scss              # Global styles
└── server/                      # Node.js backend
    ├── models/                  # Mongoose schemas (User, Task)
    ├── routes/                  # Express routes (auth, tasks)
    └── server.js                # App entry point

License

MIT