FitFlow.ai

Smart AI-powered fitness companion with real‑time pose detection, gamified progress, personalized plans, and a community leaderboard. Built for speed, accessibility, and fun. ✨

🧭 Table of Contents

• Highlights
• Architecture
• Tech Stack
• Features
• Getting Started
  • Prerequisites
  • Environment Variables
  • Install & Run
• Available Pages
• API Overview
• Folder Structure
• Troubleshooting
• Contributing

---

🌟 Highlights

• 💡 Personalized Workouts: Tailored exercise routines and desk‑friendly movements
• 🎥 Real‑time Pose Coaching: MediaPipe + TensorFlow.js guidance via your webcam
• 🧠 AI Insights: Hydration nudges, habit tracking, and daily goals
• 🧑‍🤝‍🧑 Community & Leaderboard: Stay motivated with friendly competition
• 🗂️ Kanban Productivity: Plan health tasks with a drag‑and‑drop board
• 🔐 Auth & Profiles: JWT auth, user profiles, achievements and badges

Judges: jump to "Getting Started" to run the project quickly.

---

🏗️ Architecture

---

🧰 Tech Stack

• ⚛️ React 18, React Router
• ⚡ Vite, ESLint, Tailwind CSS
• 🧠 TensorFlow.js, MediaPipe Pose
• 🔥 Firebase (client SDK)
• 🟩 Node.js, Express
• 🍃 MongoDB, Mongoose

---

✅ Features

• 👤 Sign up, sign in, and profiles
• 🏋️ Exercise flows: pushup, pullup, lunges, squats, shoulder press, bicep curls, front raises, high knees, morning routine
• 💻 Desk exercises: hand, curls, knee raises
• 🧃 Hydration break alerts
• 🗺️ Personalized plan suggestions
• 🧱 Kanban task board (drag‑and‑drop)
• 🏆 Leaderboard and badges
• 🎪 Events and community space

---

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• MongoDB Atlas (or local MongoDB)
• A modern browser with webcam access (for pose features)

Environment Variables

Create server/.env with:

MONGO_URI=mongodb+srv://<username>:<password>@<cluster>/<db>?retryWrites=true&w=majority
PORT=8080
JWT_SECRET=change_this_secret

Firebase config for the client is read from client/src/components/firebaseConfig.jsx. Ensure your keys are set there if required.

Install & Run

Open two terminals or use a multiplexer. Commands are Windows‑friendly.

1. Backend (Express + MongoDB)

cd server
npm install
npm start
# Server listens on http://localhost:8080 by default

2. Frontend (Vite + React)

cd client
npm install
npm run dev
# App runs on http://localhost:5173 by default

---

🗺️ Available Pages

• / Landing page
• /login, /signup Auth
• /dashboard Overview widgets + quick links
• /exercise Exercise hub
• /exercise/pushup (and similar for others)
• /personalized PersonalizedExercise
• /kanban KanbanFlow
• /leaderboard Leaderboard
• /community Community
• /diet DietPlan
• /event Event
• /profile Profile

---

🔌 API Overview

Base URL: http://localhost:8080/api

• POST /auth Authentication routes (login/register)
• GET/POST/PUT/DELETE /tasks Task CRUD for the Kanban board
• GET /users/:id User profile and stats

See server/routes/ and server/controllers/ for details.

---

🗂️ Folder Structure

FitFlow.ai-master/
├─ client/
│  ├─ public/                # Static assets (gifs, images)
│  ├─ src/
│  │  ├─ components/         # UI and auth components
│  │  ├─ pages/               # Feature pages (Exercise, Kanban, etc.)
│  │  ├─ lp/                  # Landing page sub-app
│  │  └─ data/                # Data helpers
│  └─ package.json
└─ server/
   ├─ config/db.js           # Mongo connection (uses MONGO_URI)
   ├─ controllers/           # Route handlers
   ├─ models/                # Mongoose schemas
   ├─ routes/                # Express routers
   ├─ server.js              # App entrypoint
   └─ package.json

---

🛠️ Troubleshooting

• 🧩 Pose not detected: ensure camera permission is granted and page is served over http://localhost.
• 🔑 Auth errors: verify Firebase config and server JWT_SECRET.
• 🌿 DB not connecting: double‑check MONGO_URI and network IP allowlist on MongoDB Atlas.
• 🧵 CORS issues: server enables CORS; ensure frontend uses the correct base URL.

---

🤝 Contributing

Contributions are welcome! Feel free to open issues or PRs. Please keep code readable and consistent, and add clear descriptions to changes.

---

Built with ❤️, caffeine ☕, and lots of reps 🏋️ by the PixelForce team.