❌ Before FitTrack Pro ✅ With FitTrack Pro
───────────────────────── ──────────────────────────────
App 1 → Workout tracking ✔ Workouts + Exercises + Mood
App 2 → Calorie / Nutrition ✔ Meals + Macros + Food Search
App 3 → Water intake ✔ Quick-add + Progress Ring
App 4 → Sleep tracker ✔ Sleep Quality + REM Tracking
App 5 → Body measurements ✔ Progress Photos + Charts
App 6 → Goals ✔ Goals + Milestones + Reminders
───────────────────────── ──────────────────────────────
6 separate apps 1 unified platform, 3 panels
┌──────────────────────────────────────────────────────────────────────┐
│ 🏋️ FitTrack Pro │
├───────────────────┬──────────────────────┬───────────────────────────┤
│ 👤 USER PANEL │ 🏅 TRAINER PANEL │ 🛡️ ADMIN PANEL │
│ ─────────────── │ ────────────────── │ ───────────────────── │
│ 18 pages │ 5 pages │ 8 pages │
│ Own data only │ Clients + own data │ Full system access │
│ │ │ │
│ • Dashboard │ • Dashboard │ • Dashboard │
│ • Workouts │ • My Clients │ • User Management │
│ • Nutrition │ • Client Details │ • Trainer Management │
│ • Water Log │ • Workout Templates │ • Trainer Requests │
│ • Sleep Log │ • Profile/Settings │ • Assigned Trainers │
│ • Progress │ │ • Feedbacks │
│ • Goals │ │ • Create Trainer │
│ • Achievements │ │ • Profile/Settings │
│ • Browse Trainers│ │ │
│ • Profile │ │ │
└───────────────────┴──────────────────────┴───────────────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| 🎨 UI Framework | React 19 + Vite 6 | Component-based frontend |
| 🎭 Styling | Tailwind CSS v4 + Inter font | Utility-first with custom design tokens |
| ✨ Animations | Framer Motion + react-transition-group | Page transitions & micro-animations |
| 📊 Charts | Chart.js v4 + react-chartjs-2 | Line, Bar, Doughnut, Radar charts |
| 📝 Forms | React Hook Form + Yup | Validation + form state management |
| 🔗 Routing | React Router v7 | Client-side navigation |
| 📡 HTTP | Axios + interceptors | API requests + token refresh |
| 🖥️ Backend | Node.js + Express.js | REST API server |
| 🍃 Database | MongoDB Atlas + Mongoose | Cloud NoSQL database |
| 🔐 Auth | JWT + bcryptjs | Tokens in cookies + password hashing |
| ☁️ Images | Cloudinary + Multer | Cloud image storage |
| 🛡️ Security | Helmet + Rate Limit + HPP + Mongo Sanitize | API hardening |
| 📋 Logging | Morgan | HTTP request logging |
FitTrackPro/
│
├── 📁 client/ ← React + Vite Frontend
│ └── src/
│ ├── 📁 components/common/ ← Button, Card, Modal, Input, StatCard, Spinner...
│ ├── 📁 contexts/ ← AuthContext (global auth state)
│ ├── 📁 hooks/ ← useAsync, useDebounce
│ ├── 📁 layouts/ ← PublicLayout, DashboardLayout, AdminLayout, TrainerLayout
│ ├── 📁 pages/
│ │ ├── 📁 public/ ← Home, About, Contact, Login, Register, ForgotPassword
│ │ ├── 📁 user/ ← Dashboard, Workouts, Nutrition, Water, Sleep, Progress...
│ │ ├── 📁 trainer/ ← Dashboard, MyClients, ClientDetails, Templates
│ │ └── 📁 admin/ ← Dashboard, UserMgmt, TrainerMgmt, Requests, Feedbacks
│ ├── 📁 partials/ ← Sidebar, AdminSidebar, TrainerSidebar, Header
│ ├── 📁 services/ ← 13 API service modules
│ └── 📁 utils/ ← ThemeContext, Transition
│
├── 📁 server/ ← Node.js + Express Backend
│ ├── 📁 Controllers/ ← 13 business logic controllers
│ ├── 📁 Models/ ← 11 Mongoose schemas
│ ├── 📁 Routes/ ← 13 Express route files
│ ├── 📁 Middleware/ ← Auth, ErrorHandler, Multer, Validator
│ ├── 📁 Database/ ← db.js (Atlas), seedAdmin.js
│ ├── 📁 Utils/ ← Cloudinary config, JWT helper
│ └── 📄 server.js ← App entry point
│
└── 📁 docs/ ← PRD, SRD, TRD, Design System
👤 User Panel — 18 Pages 
| # | Page | Key Features | API |
|---|---|---|---|
| 1 | Splash Screen | Animated brand intro, auto-redirect | — |
| 2 | Home | Hero, features, testimonials, CTA | — |
| 3 | About | Mission, team info | — |
| 4 | Contact | Feedback form with background video | POST /api/feedbacks/submit |
| 5 | Register | Signup + profile picture → Cloudinary | POST /api/auth/register |
| 6 | Login | JWT auth, token in cookie | POST /api/auth/login |
| 7 | Forgot Password | Email → reset link via notification | POST /api/auth/forgot-password |
| 8 | Reset Password | Token-based password update | PUT /api/auth/reset-password/:token |
| 9 | Dashboard | Stats cards + weekly charts (workouts, calories, streak, water, sleep) | Multiple GETs |
| 10 | Workout List | Filter, paginate, favorite, clone, delete | GET /api/workouts |
| 11 | Log Workout | Create with exercises (sets/reps/weight/duration) | POST /api/workouts |
| 12 | Workout Details | View/edit, mark exercises complete, mood tracking | GET PUT /api/workouts/:id |
| 13 | Nutrition Log | Meals + macro charts + food search + weekly trends | Full CRUD |
| 14 | Water Log | Quick-add (250ml/500ml/1L) + progress ring + streak | Full CRUD |
| 15 | Progress Tracking | Body measurements + photos (Cloudinary) + BMI + radar chart | Full CRUD |
| 16 | Sleep Log | Sleep/wake times, quality, REM, recommendations | Full CRUD |
| 17 | Browse Trainers | View trainers + specializations + send request | POST /api/trainer-requests |
| 18 | Profile + Settings | Edit profile, change password, theme & notification prefs | PUT /api/auth/update-profile |
🏅 Trainer Panel — 5 Pages 
| # | Page | Key Features |
|---|---|---|
| 1 | Dashboard | Client activity stats, workout completion rates |
| 2 | My Clients | List + search + remove assigned clients |
| 3 | Client Details | Full profile view, assign workouts/goals, add notes, message client |
| 4 | Workout Templates | Create reusable templates, mark public, assign to clients |
| 5 | Profile + Settings | Edit profile, update specialization |
🛡️ Admin Panel — 8 Pages 
| # | Page | Key Features |
|---|---|---|
| 1 | Dashboard | System-wide stats — users, trainers, workouts, growth rate |
| 2 | User Management | Full CRUD + bulk actions + toggle active/inactive + assign trainer |
| 3 | Trainer Management | View trainers, client counts, promote/demote roles |
| 4 | Create Trainer | Register new trainer with specialization fields |
| 5 | Trainer Requests | Approve / reject user-submitted requests with notes |
| 6 | Assigned Trainers | View all trainer-client assignments platform-wide |
| 7 | Feedbacks | View all feedback submissions, mark as read |
| 8 | Profile + Settings | Edit admin profile and preferences |
| Module | Endpoint | Methods |
|---|---|---|
| 🔐 Auth | /api/auth |
POST, PUT |
| 🏋️ Workouts | /api/workouts |
Full CRUD |
| 🥗 Nutrition | /api/nutrition |
Full CRUD |
| 💧 Water | /api/water |
Full CRUD |
| 😴 Sleep | /api/sleep |
Full CRUD |
| 📈 Progress | /api/progress |
Full CRUD |
| 🎯 Goals | /api/goals |
Full CRUD |
| 🏆 Achievements | /api/achievements |
GET |
| 🔔 Notifications | /api/notifications |
GET, PUT, DELETE |
| 🏅 Trainers | /api/trainers |
GET, PUT |
| 📨 Trainer Requests | /api/trainer-requests |
GET, POST, PUT |
| 🛡️ Admin | /api/admin |
Full CRUD + Bulk |
| 💬 Feedback | /api/feedback |
GET, POST, PUT |
User ──────────────────────────────────────────────────────────────────
│
├── 🏋️ Workout → Exercise[] (embedded: sets, reps, weight, duration)
├── 🥗 Nutrition → FoodItem[] (embedded: macros, calories)
├── 📈 Progress → BodyMeasurements + PerformanceMetrics + Photos[]
├── 🎯 Goal → Milestones[] + Reminders[] (embedded)
├── 💧 Water (daily intake entries)
├── 😴 Sleep (bedtime, wake, quality, REM/deep/light)
├── 🏆 Achievement (points, badges, rank)
├── 🔔 Notification (TTL 30 days auto-expire)
├── 💬 Feedback
└── 📨 TrainerRequest ←──→ Trainer (User self-ref)
🍎 Food → standalone searchable food database
- Node.js
v18+ - MongoDB Atlas account
- Cloudinary account
# Clone the repo
git clone https://github.com/Konete326/FitTrackPro.git
cd FitTrackPro# ── Backend ──────────────────────────────────
cd server
npm install
npm run dev
# → Running on http://localhost:5000# ── Frontend (new terminal) ──────────────────
cd client
npm install
npm run dev
# → Running on http://localhost:5173server/.env
PORT = 5000
MONGO_URI = mongodb+srv://<user>:<pass>@cluster.mongodb.net/fittrackpro
JWT_SECRET = your_super_secret_key
JWT_EXPIRES_IN = 7d
CLOUDINARY_CLOUD_NAME = your_cloud_name
CLOUDINARY_API_KEY = your_api_key
CLOUDINARY_API_SECRET = your_api_secret
NODE_ENV = developmentclient/.env
VITE_API_URL = http://localhost:5000/api| System | Description |
|---|---|
| 🔔 Notifications | Badge counter · Read/Unread toggle · 30-day TTL auto-expiry · 8 types (workout reminders, streak, trainer messages, password reset...) |
| 🏆 Achievements | Points-based gamification · 7 categories · Auto-triggered by milestones · Rank calculation |
| 🌙 Dark / Light Mode | Persisted in localStorage · Smooth toggle · Frosted glass header · All components responsive |
| 💬 Feedback Loop | User submits → Admin reviews → Marks read → User notified |
| Student ID | Name | Contact | |
|---|---|---|---|
| 🧑💻 | Student1550980 | Muhammad Sameer | sameerdevexpert@gmail.com · 0321-3265524 |
| 🧑💻 | Student1552027 | Muhammad Sheryar | — |
| 🧑💻 | Student1436664 | Maaz Bin Asad | — |
| 🧑💻 | Student1566221 | Muhammad Basiq | — |
| 🧑💻 | Student1501325 | Abdul Hadi | — |