Project Overview
Task Manager App
A full-stack task management application with authentication, Kanban board, analytics dashboard, and drag-and-drop functionality.
Frontend Stack
- HTML5 & CSS3
- Vanilla JavaScript (ES6+)
- Bootstrap 5 Framework
- Chart.js Analytics
- SortableJS Drag & Drop
Backend Stack
- Node.js Runtime
- Express.js Server
- MySQL Database
- JWT Authentication
- bcrypt Password Hashing
Core Features
- User Registration & Login
- Kanban Board (3 columns)
- Drag-and-Drop Tasks
- Priority Levels (High/Medium/Low)
- Due Date Tracking
- Dashboard Analytics
API Endpoints
- POST /api/auth/register
- POST /api/auth/login
- GET /api/tasks
- POST /api/tasks
- PUT /api/tasks/:id
- DELETE /api/tasks/:id
Screen 01
Login Page
JWT-based authentication with email and password. Redirects to Dashboard on success.
localhost:5500/frontend/login.html
🔒
Welcome Back
Sign in to your account
Don't have an account? Register
JWT Token Storage
Validated on server-side
bcrypt hashed comparison
Redirect to dashboard.html
Screen 02
Dashboard
Analytics overview with task statistics, pie chart, progress bar, and quick actions.
localhost:5500/frontend/dashboard.html
Task Manager
Welcome to your Dashboard
Track your progress and manage tasks efficiently
4
Total Tasks
2
Pending
1
In Progress
1
Completed
Task Overview
Pending
In Progress
Completed
Quick Actions
Task Board
View and manage tasks
Refresh
Update statistics
Screen 03
Kanban Board
Drag-and-drop task management with priority badges, due dates, and inline actions.
localhost:5500/frontend/board.html
Task Board
Your Tasks
Drag and drop to organize
⏳ Pending
2
Design Homepage
Create responsive landing page design
📅 20 Mar
Setup Database
Configure MySQL tables
📅 19 Mar
🔄 In Progress
1
Build REST API
Implement CRUD endpoints
✅ Completed
1
User Auth
JWT login & register
User Flow
Application Navigation
How users navigate through the application from login to task management.
Login
Email + Password
→
Dashboard
Analytics Overview
→
Task Board
Kanban View
Add Task
Modal Form
↔
Edit Task
Inline Update
↔
Drag & Drop
Status Change
Design System
Design Specifications
Colors, typography, and component guidelines for the Task Manager App.
Color Palette
Primary
#667eea
Pending
#f5576c
Progress
#4facfe
Completed
#43e97b
High
#f56565
Medium
#ecc94b
Low
#48bb78
Navbar
#1a202c
Typography
Font Family
- Primary: Inter, sans-serif
- Fallback: -apple-system, BlinkMacSystemFont
Font Weights
- Regular: 400
- Medium: 500
- Semi-bold: 600
- Bold: 700
- Extra-bold: 800
Components
Card Styles
- Border Radius: 12px
- Shadow: 0 4px 6px rgba(0,0,0,0.07)
- Hover Shadow: 0 12px 24px rgba(0,0,0,0.15)
- Left Border Accent: 4px
- Padding: 20px
Button Styles
- Border Radius: 8px
- Padding: 8px 16px (nav), 10px 20px (CTA)
- Hover: translateY(-1px)
- Gradient: 135deg angle
- Font Weight: 600