gamma-fitness
Jatin YadavBuild a fully functional, visually stunning Fitness Tracker web app as a single React (.jsx) file using Tailwind CSS. The app should feel like a premium fitness product — dark theme, athletic aesthetic, energetic accent colors (electric green or neon orange), bold typography (use a strong display font like 'Bebas Neue' or 'Oswald' for headings, clean sans-serif for body). === CORE FEATURES === 1. WORKOUT LOG - Add daily exercises with: Exercise Name, Sets, Reps, Weight (kg/lbs), Duration (minutes) - Support exercise categories: Strength, Cardio, Sport, Flexibility - Mark rests between sets - Delete or edit any entry 2. SPORTS & ACTIVITY TRACKER - Log sports played: Football, Basketball, Cricket, Tennis, Swimming, etc. - Log running/cycling with: Distance (km/miles), Duration, Avg Speed, Route notes - Track calories burned (auto-estimate based on activity + duration) 3. DAILY GOALS & STREAKS - Set daily workout goals (e.g., 3 exercises, 30 mins cardio) - Show streak counter (days in a row worked out) - Visual progress ring/bar toward daily goal 4. DASHBOARD / HOME - Today's summary: Total exercises, Total duration, Calories burned - Weekly activity calendar (7-day heatmap or grid showing active days) - Quick-add floating button 5. EXERCISE HISTORY - Log stored in React state (simulated persistence) - Filter by date or category - List view of past workouts with expandable details === SUGGESTED ADDITIONAL FEATURES TO INCLUDE === 6. BODY METRICS TRACKER - Log weight, height, BMI auto-calculation - Track body measurements (chest, waist, arms, etc.) 7. WORKOUT TEMPLATES - Save a workout as a template (e.g., "Leg Day", "Push Day") - One-click load template to quickly fill in the day's workout 8. REST TIMER - Built-in countdown timer for rest between sets (30s / 60s / 90s / custom) - Audio beep or visual alert when rest ends 9. PERSONAL RECORDS (PRs) - Auto-detect when a new max weight/reps is hit for an exercise - Show PR badge next to the entry 10. MOTIVATIONAL ELEMENTS - Random fitness quote on the dashboard - Achievement badges (e.g., "First Workout", "7-Day Streak", "100kg Bench") - Progress celebration animation when goal is met === DESIGN REQUIREMENTS === - Dark mode only, athletic and bold aesthetic - Use bold display fonts (import from Google Fonts) - Neon green (#00FF87) or electric orange (#FF6B35) as accent - Smooth tab/page navigation (no page reloads) - Animated transitions between sections - Mobile-first, responsive layout - All data stored in useState/useReducer (no localStorage or external APIs) - Use lucide-react icons throughout - Floating Action Button (+) to quickly log a workout - Empty state illustrations/messages when no data exists === STRUCTURE === Pages/Tabs: 1. 🏠 Dashboard 2. ➕ Log Workout 3. 📊 History 4. 🎯 Goals 5. 👤 Profile / Body Metrics Make the UI feel like a real fitness app — not a form. Every interaction should feel satisfying and motivating. Include micro-animations on button clicks, smooth number counters, and a polished card-based layout throughout.
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement User Auth API
As a user, I want to use the backend API for registration and login so that my credentials are validated securely and I receive a JWT token for subsequent requests. Implement FastAPI endpoints: POST /auth/register, POST /auth/login, POST /auth/logout. JWT generation with role claims (user/admin). Password hashing with bcrypt.
Implement Theme & Global Styles
As a frontend developer, I want to implement the global theme, color tokens, typography (Oswald, Bebas Neue, Roboto via Google Fonts), and base CSS/Tailwind config so that all pages inherit the dark athletic aesthetic with neon-green (#00FF87) and electric-orange (#FF6B35) accents exactly as defined in the mock-design pages. Remove any scaffold pages not needed by the user flows (e.g. welcome page, ai-assistant page, default settings page). Set up global animated background (radial gradient, gridlines, orange glow) at the root level. This task must be completed independently before any page implementation begins.
Implement Workout Log API
As a user, I want to use the backend API to log, retrieve, update, and delete my workout entries so that my fitness data is persisted. Implement FastAPI endpoints: POST /workouts, GET /workouts, GET /workouts/{id}, PUT /workouts/{id}, DELETE /workouts/{id}. Support exercise fields: name, sets, reps, weight, duration, category (Strength/Cardio/Sport/Flexibility). Support sports activity logging and running/cycling tracking.
Implement Body Metrics API
As a user, I want to use the backend API to log and retrieve my body metrics (weight, height, BMI, chest, waist, arms, etc.) so I can track my physical progress. Implement FastAPI endpoints: POST /metrics, GET /metrics, GET /metrics/history. Auto-calculate BMI from weight and height.
Build Login Page
As a user, I want to use the Login page to sign in with my email and password so I can access my dashboard. Implement based on the existing JSX design (v2). On successful login, redirect individual users to Dashboard and admin users to Admin Dashboard. Connects from Landing page.
Build Signup Page
As a user, I want to use the Signup page to create a new account so I can start tracking my fitness. Implement based on the existing JSX design (v2). Form includes name, email, password, and confirm password fields. On success, redirects to Login. Connects from Landing page Register CTA.
Build Landing Page
As a user, I want to view the Landing page so I can learn about the gamma-fitness app, navigate to Login, or Register. Implement the Landing page based on the existing JSX design (v2) — includes NavBar, Hero, SocialProof, FeaturesOverview, HowItWorks, SignatureEnergyPulse, WorkoutCategories, AchievementsTeaser, Testimonials, CallToAction, and Footer sections. Links to Login and Signup pages.
Implement Goals & Streaks API
As a user, I want to use the backend API to set and retrieve my daily workout goals and streak data so I can track my consistency. Implement FastAPI endpoints: POST /goals, GET /goals, PUT /goals/{id}, GET /goals/streak. Track consecutive active days for streak counter and goal completion status.
Build Dashboard Page
As a user, I want to view my Dashboard page after login so I can see today's activity summary, weekly calendar heatmap, energy pulse ring, motivational quote, and quick-action buttons. Implement based on the existing JSX design (v2) — includes TopBar, Sidebar, WelcomeBanner, EnergyPulseRing, StatsCards, WeeklyCalendar, QuickActions, RecentWorkouts, MotivationalQuote sections. Links to Log Workout, History, Goals, and Profile pages.
Build Admin Dashboard Page
As an admin, I want to use the Admin Dashboard page to view an overview of all platform users, KPI stats, activity feed, and top performers so I can monitor system-wide fitness activity. Implement based on the existing JSX design (v2) — includes AdminTopBar, AdminSidebar, AdminOverviewBanner, AdminStatsCards, AdminUsersTable, AdminActivityFeed, AdminCategoryBreakdown, AdminTopPerformers, and AdminFooter sections. Navigates from Login (admin role).
Implement Admin Users API
As an admin, I want to use the backend API to retrieve all registered users and view their workout logs and body metrics so I can monitor platform activity. Implement FastAPI endpoints: GET /admin/users, GET /admin/users/{id}, GET /admin/users/{id}/workouts, GET /admin/users/{id}/metrics. All endpoints protected by admin JWT role claim.
Implement Workout Templates API
As a user, I want to use the backend API to save and load workout templates so I can quickly reuse my common workout routines. Implement FastAPI endpoints: POST /templates, GET /templates, GET /templates/{id}, DELETE /templates/{id}. A template stores a named set of exercises.
Implement Achievements API
As a user, I want to use the backend API to retrieve my earned achievement badges so I can see my progress milestones. Implement FastAPI endpoints: GET /achievements. Auto-award badges based on milestones: First Workout, 7-Day Streak, 100kg Bench, 50 Workouts Logged, etc. Badge state is computed server-side from user activity data.
Build Users Page
As an admin, I want to use the Users page to browse and search all registered users so I can monitor their activity. Implement based on the existing JSX design (v2). Includes user list/table with search and filter, user status badges, and links to individual User Detail pages. Navigates from Admin Dashboard sidebar.
Build Goals Page
As a user, I want to use the Goals page to set my daily workout goals and view my streak counter so I can stay motivated. Implement based on the existing JSX design (v2) — includes TopBar, Sidebar, GoalsPageHeader, ActiveGoalPulse (energy pulse ring), GoalProgressCards, StreakTracker, GoalHistory, and SetGoalModal sections. Navigates from Dashboard.
Implement Auth & Routing Logic
As a user, I want the frontend routing to correctly guard pages by role (user vs admin) using JWT so that I am redirected to the right page after login and cannot access pages I am not authorized for. Set up React Router with protected routes for user pages (Dashboard, Log Workout, History, Goals, Profile) and admin pages (Admin Dashboard, Users, User Detail). Handle JWT token storage in React state and auth context.
Build History Page
As a user, I want to use the History page to filter and view my past workout logs by date or category so I can track my progress over time. Implement based on the existing JSX design (v2) — includes TopBar, Sidebar, HistoryPageHeader, FilterControls, ActivitySummaryStrip, WorkoutHistoryList, and PaginationBar sections. Navigates from Dashboard.
Build Profile Page
As a user, I want to use the Profile page to log and view my body metrics (weight, height, BMI, measurements), view achievements/badges, see my recent workout history, and manage my goals streak widget. Implement based on the existing JSX design (v2) — includes TopBar, Sidebar, ProfileHero, BodyMetricsPanel, FitnessStatsRow, GoalsStreakWidget, AchievementsBadges, and RecentWorkoutHistory sections. Navigates from Dashboard.
Build Log Workout Page
As a user, I want to use the Log Workout page to add daily exercises with details like Exercise Name, Sets, Reps, Weight, Duration, and Category so I can track my fitness activity. Implement based on the existing JSX design (v2). Includes exercise form, category selector (Strength/Cardio/Sport/Flexibility), rest timer widget, and workout template quick-load. Also supports logging sports activities (Football, Basketball, etc.) and running/cycling with distance and speed. Navigates from Dashboard quick-add button.
Build User Detail Page
As an admin, I want to use the User Detail page to view a specific user's workout logs and body metrics so I can monitor their individual progress. Implement based on the existing JSX design (v2). Includes user profile header, workout logs tab, and body metrics tab. Navigates from the Users page.
Integrate Frontend with Backend APIs
As a user, I want all frontend pages to fetch and submit real data through the backend REST API so that my fitness data is persisted. Connect Dashboard, Log Workout, History, Goals, Profile, and Admin pages to their respective FastAPI endpoints using Axios or Fetch. Replace all React state mocks with real API calls. Handle loading states, error states, and token refresh.
No comments yet. Be the first!