gamma-fitness

byJatin Yadav

Build 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.