AI-powered fitness tracking with real-time computer vision
JAKD is a full-stack fitness application that uses MediaPipe pose estimation to automatically count reps and analyze form in real-time through your webcam. Built with React, TypeScript, and Supabase.
| Workout Tracking | Form Analysis | Analytics Dashboard |
|---|---|---|
| Real-time rep counting with skeleton overlay | Per-rep form scoring with actionable feedback | Workout history and muscle group breakdowns |
- Real-time pose detection -- MediaPipe Tasks Vision with 33-point skeleton tracking at 30fps
- Automatic rep counting -- custom detectors for push-ups, bicep curls (both arms & alternating), and squats
- Form analysis -- per-rep scoring with specific feedback on range of motion, tempo, and alignment
- Video recording -- record sessions with pose overlay for post-workout review
- Analytics -- D3.js/Recharts visualizations for workout history, muscle distribution, and progress trends
- Goal tracking -- set and track rep/workout goals with progress indicators
- Cloud sync -- Supabase backend with auth, real-time database, and file storage
- Responsive design -- mobile-first dark theme UI
Key design decisions:
- Repository pattern separates data access from UI logic, making Supabase queries testable and swappable
- Detector pattern -- each exercise has its own detector class extending
BaseDetector, making it straightforward to add new exercises - Zustand stores are split by domain (auth, workout, exercise, history, etc.) to avoid monolithic state
| Category | Technology |
|---|---|
| Frontend | React 18, TypeScript 5.6, Vite |
| Styling | Tailwind CSS, Framer Motion |
| State | Zustand, TanStack Query |
| Backend | Supabase (Auth, PostgreSQL, Storage) |
| Computer Vision | MediaPipe Tasks Vision |
| Visualization | D3.js, Recharts |
| CI/CD | GitHub Actions, Vercel |
- Node.js 18+
- A Supabase project
# Clone the repository
git clone https://github.com/danielzhao07/JAKD.git
cd JAKD
# Install dependencies
npm install
# Configure environment
cp .env.example .env.local
# Add your Supabase URL and anon key to .env.local
# Run database migrations (in Supabase SQL editor, in order)
# supabase/migrations/001_initial_schema.sql
# supabase/migrations/002_frontend_redesign_schema.sql
# supabase/migrations/003_exercises_rls_safe.sql
# Start development server
npm run dev| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Type-check and build for production |
npm run lint |
Run ESLint |
npm run test |
Run test suite |
npm run preview |
Preview production build locally |
| Variable | Description |
|---|---|
VITE_SUPABASE_URL |
Your Supabase project URL |
VITE_SUPABASE_ANON_KEY |
Your Supabase anonymous/public key |
| Exercise | Detection Method |
|---|---|
| Push-ups | Elbow angle tracking with full ROM detection |
| Bicep Curls (Both Arms) | Simultaneous arm angle tracking |
| Alternating Bicep Curls | Independent left/right arm tracking |
| Squats | Hip drop + knee angle analysis |
The app is deployed on Vercel with Supabase as the backend:
- Connect repository to Vercel
- Set environment variables in the Vercel dashboard
- Deploy -- Vercel handles builds automatically on push
This project is licensed under the MIT License.