How to Build a Fitness Tracking with Lovable

1Create a fitness tracking schema in Supabase.
2
3Tables:
4- exercises: id, name (text unique), muscle_group ('chest' | 'back' | 'legs' | 'shoulders' | 'arms' | 'core' | 'cardio'), is_custom (bool default false), created_by (references auth.users, nullable for global exercises)
5- workouts: id, user_id (references auth.users), name, notes, started_at (timestamptz), finished_at (timestamptz), created_at
6- workout_exercises: id, workout_id (references workouts), exercise_id (references exercises), order_index (int), notes (text)
7- workout_sets: id, workout_exercise_id (references workout_exercises), set_number (int), weight_kg (decimal), reps (int), is_warmup (bool default false), rpe (int, 1-10, nullable), created_at
8- body_metrics: id, user_id (references auth.users), date (date), weight_kg (decimal), body_fat_pct (decimal, nullable), notes (text), created_at
9- workout_templates: id, user_id (references auth.users), name, template_data (jsonb), created_at
10
11Create a Postgres function get_personal_records(p_user_id uuid) that returns a table of (exercise_id uuid, exercise_name text, max_weight_kg decimal, achieved_at timestamptz). Query workout_sets joined through workout_exercises → workouts filtered by user_id, group by exercise, return MAX(weight_kg) and the timestamp of that max.
12
13RLS: all tables scope to auth.uid() = user_id. exercises are globally readable (SELECT for all authenticated users), INSERT only for the creating user.

1Build a workout logging form at src/pages/LogWorkout.tsx.
2
3Form structure using react-hook-form with zod validation:
4- Workout name Input (text, required)
5- Start time (auto-filled, editable DateTimePicker)
6- Dynamic exercises array (useFieldArray):
7  - Each exercise row has:
8    - Exercise Combobox (searchable Select from exercises table, filtered by muscle group tabs)
9    - Notes Input (optional)
10    - Dynamic sets array nested inside each exercise (useFieldArray):
11      - Set number (auto-incremented, read-only)
12      - Weight Input (number, kg, required)
13      - Reps Input (number, required)
14      - RPE Select (optional, 6-10)
15      - Warmup Checkbox
16      - Delete set Button (X icon)
17    - 'Add Set' Button appending a new set row with defaults from the previous set
18  - 'Remove Exercise' Button
19- 'Add Exercise' Button appending a new exercise row
20- 'Save Workout' Button at the bottom
21
22On submit:
231. INSERT into workouts, get the workout id
242. For each exercise, INSERT into workout_exercises with order_index
253. For each exercise's sets, INSERT all workout_sets rows in a single batch call
264. After saving, call get_personal_records and check if any new set exceeded the previous PR — if so, show a confetti animation and Toast with the PR details
275. Navigate to /workouts/{id} after successful save

1Build a progress page at src/pages/Progress.tsx.
2
3Requirements:
4- Exercise selector: a Combobox at the top that lists all exercises the current user has logged, grouped by muscle group
5- When an exercise is selected, fetch all workout_sets for that exercise joined through workout_exercises → workouts WHERE user_id = auth.uid(), ordered by workouts.started_at
6- Render two Recharts charts side by side (stacked on mobile):
7  - Chart 1: LineChart of max weight per session (X = date, Y = weight_kg). Show a gold star data point on the session where the all-time PR was achieved.
8  - Chart 2: LineChart of total volume per session (X = date, Y = SUM(weight_kg * reps) for all sets in that session)
9- Below charts: a DataTable of all logged sets for that exercise. Columns: Date, Workout Name, Sets x Reps @ Weight (formatted as '3 x 8 @ 80kg'), Volume, PR badge if it was a PR session.
10- Add a date range filter (last 30 days / 90 days / all time) that filters both charts and table
11- Show the current PR as a stat Card above the charts: 'All-time PR: 100kg on Jan 15'

1Build a body metrics page at src/pages/BodyMetrics.tsx.
2
3Requirements:
4- 'Log Today's Metrics' Card at the top with a simple form:
5  - Date (DatePicker, default today)
6  - Weight Input (decimal, kg or lbs with unit toggle stored in user preferences)
7  - Body Fat % Input (decimal, optional)
8  - Notes Textarea (optional)
9  - Save Button that does supabase.from('body_metrics').upsert() using (user_id, date) conflict target
10- Below the form, a Recharts ComposedChart:
11  - Primary line: weight over time (last 90 days)
12  - Secondary line (if data exists): body_fat_pct as a dashed line on a secondary Y-axis
13  - Show a 7-day rolling average line in a lighter color
14  - Tooltip showing both values on hover
15- Stats row: Starting Weight, Current Weight, Change (formatted with up/down arrow), Lowest Weight
16- History DataTable: columns Date, Weight, Body Fat %, Notes. Allow row click to edit.

1Add two features:
2
31. Workout templates:
4   - On the LogWorkout page, add a 'Load Template' Button at the top that opens a Sheet
5   - The Sheet shows a list of saved templates (Cards with template name and exercise count)
6   - Clicking a template populates the form with all exercises and default sets from template_data jsonb
7   - After logging a workout, add a 'Save as Template' option in a menu. It stores the exercise structure (without weights/reps) as jsonb in workout_templates
8
92. Training calendar heatmap at src/pages/Calendar.tsx:
10   - Show the last 52 weeks as a grid of day squares (like GitHub contribution graph)
11   - Each day square is colored by workout count: 0=gray, 1=light green, 2=medium green, 3+=dark green
12   - Hovering a day shows a Tooltip with the workout name(s) that day
13   - Fetch all workouts for the user, group by date(started_at), count per day
14   - Below the heatmap: streak stats — current streak (consecutive days with workouts), longest streak, total workouts this year