FitTrackPro (React)

FitTrackPro is a modern fitness tracking web app built with React, designed as a premium fitness SaaS experience. It enables users to log workouts, track progress, and set personal fitness goals — all within a sleek, highly interactive interface.

🔗 GitHub Repository

---

🚀 Purpose

FitTrackPro aims to offer a seamless, motivating fitness management experience, blending intuitive UI/UX with strong visual identity. The app is perfect for fitness enthusiasts, personal trainers, or SaaS MVP developers seeking a bold fitness platform template.

💡 Note: All data is currently static and handled locally. However, the architecture is modular and can be extended with a custom backend or API integration as needed.

---

🧠 APIs and Data Handling

FitTrackPro is a client-side-only application. No external APIs or server-side data persistence is used — all data is stored and managed in the browser via localStorage.

Here's how each module handles data:

• Authentication src/contexts/AuthContext.tsx Stores user credentials and sessions locally using:

  • fittrackpro_users for all registered users
  • fittrackpro_user for the current active session (non-sensitive data)

• Workouts src/components/WorkoutLogger.tsx, ProgressTracker.tsx Logs exercises (sets, reps, weights) under keys like:

  • fittrackpro_workouts_{user_id}

• Goals src/components/GoalSetter.tsx Stores fitness goals in:

  • fittrackpro_goals_{user_id}

• Activity Feed src/components/ActivityFeed.tsx Tracks user activities (e.g., workout completions) in:

  • fittrackpro_activities_{user_id} (Capped at 20 recent entries)

• Settings & Preferences src/pages/SettingsPage.tsx Saves:

  • Notification settings: fittrackpro_notifications_{user_id}
  • Theme mode: fittrackpro_theme

• Static Data

  • Exercises and testimonials are stored in src/data/ as hardcoded JS arrays — no fetching needed.

---

🎨 Design & Aesthetic

FitTrackPro embodies a bold, energetic, and premium fitness aesthetic. Here's how the design elements come together:

🎨 Color Palette

Element	Hex	Usage
Vibrant Red	#DC2626	CTAs, active states, highlights
Charcoal Gray	#1F2937	Dark theme base, secondary text
Lime Green	#84CC16	Success indicators, accents
Supporting Grays	Various	UI depth, borders, backgrounds

🔤 Typography

• Montserrat (Headings, strong labels): @fontsource/montserrat
• Roboto (Body text): @fontsource/roboto

🧱 Layout & UI

• Card-based Layouts Utilizes Tailwind classes like p-6, rounded-xl, shadow-lg for all dashboard elements and content containers.

• Hero & CTA Gradients Applied via gradient-bg class using: linear-gradient(135deg, #DC2626 0%, #1F2937 100%)

• Framer Motion Interactions

  • Entrance animations (opacity, y)
  • Hover scaling (whileHover={{ scale: 1.02 }})
  • Carousel transitions for testimonials
  • Loading spinner animations

• Dark Mode Managed via ThemeContext. Uses Tailwind’s dark: variants for conditional styling (bg-gray-900, text-white, etc.).

• Iconography Uses Lucide React Icons for clean, consistent visuals across all components (e.g., dumbbells, charts, targets).

• Responsiveness Mobile-first design using Tailwind’s responsive classes (sm:, md:, lg:). Layout adjusts smoothly across devices.

---

📦 Tech Stack

• Frontend: React, TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Montserrat & Roboto via Fontsource
• State/Data: React Context API + localStorage

---

🛠️ Customization

While FitTrackPro currently runs entirely on the client, it’s easy to integrate with a custom backend. You can:

• Replace localStorage handlers with API calls
• Connect to Firebase, Supabase, or any REST/GraphQL service
• Add user authentication with OAuth or JWT
• Store workouts, goals, and settings in a cloud database

---

📝 License

This project is open source and available under the MIT License.