FitTrack - Advanced Fitness Tracking App

FitTrack is a comprehensive fitness tracking application built with React and Supabase. It allows users to track workouts, monitor progress, set goals, track nutrition, and use various fitness tools.

Features

• User Authentication: Sign up, login, password reset
• Dashboard: Overview of fitness activities and progress
• Workout Tracking: Log and manage workouts
• Progress Monitoring: Visualize progress with charts
• Goal Setting: Set and track fitness goals
• Nutrition Tracking: Log food intake and track macronutrients
• Water Intake Tracking: Monitor daily water consumption
• Fitness Tools: BMI calculator, calorie calculator, workout timer, one-rep max calculator
• Exercise Library: Browse exercises with instructions
• Workout Plans: Create and follow workout plans
• Social Features: Share workouts, follow other users
• Dark Mode: Toggle between light and dark themes

Tech Stack

• Frontend: React, React Router, Framer Motion
• State Management: Context API
• Backend & Database: Supabase
• Authentication: Supabase Auth
• Styling: CSS
• Charts: Chart.js
• Icons: React Icons

Setup Instructions

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Supabase account

Setting up Supabase

1. Create a new Supabase project at https://app.supabase.com
2. After creating the project, go to the SQL Editor
3. Copy the contents of supabase/schema.sql and run it in the SQL Editor to create all the necessary tables and functions
4. Go to Authentication > Settings and configure auth providers as needed
5. Get your Supabase URL and anon key from the API settings

Setting up the Project

1. Clone the repository

   git clone https://github.com/yourusername/fittrack.git
   cd fittrack
   

2. Install dependencies

   npm install
   

3. Create a .env file in the root directory with your Supabase credentials

   VITE_SUPABASE_URL=your-supabase-url
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
   

4. Update the Supabase configuration in src/config/supabaseClient.js to use environment variables

   const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
   const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

5. Start the development server

   npm run dev
   

6. Open http://localhost:5173 in your browser

Deployment

1. Build the project

   npm run build
   

2. Deploy the contents of the dist folder to your hosting provider of choice (Vercel, Netlify, etc.)

Environment Variables

• VITE_SUPABASE_URL: Your Supabase project URL
• VITE_SUPABASE_ANON_KEY: Your Supabase anonymous key