LeftyWorkout — Training App Frontend

The Problem

Existing workout apps handle the basics fine — pick exercises, log sets, done. But they fall apart with structured programming: periodized plans with cycles and phases, Olympic lifting complexes where a single set is a sequence like high pull + hang clean + squat (each with different reps, shared weight), or any analytics beyond total volume.

What I Built

The entire frontend: a workout logging UI where workouts contain rounds, rounds contain items, and items can be single exercises or clusters/combos — all editable, reorderable via drag-and-drop, with auto-population of shared fields across sets. Plus the full foundation: centralized API client, React Query data layer, token-driven design system on Tailwind + Radix, layout primitives, error boundaries, and route-based code splitting.

The Result

MVP in active development. The complex nested UI largely works — representing deeply structured workout data in a way that's fast to use, not just technically correct. Built to scale as the product grows without accumulating frontend debt.

Architecture

Workout Data Model
  Plans → Cycles → Weeks → Workouts → Rounds → Items
                                                  ↓
                                      Single Exercise  or  Cluster/Combo
                                      (sets × reps)       (sequence of exercises,
                                                            different reps, shared weight)

Frontend Architecture
  React Router (route-based code splitting)
        ↓
  Page Components (Builder, Logger, Tracking, Admin)
        ↓
  React Query (server state) + React Hook Form (form state)
        ↓
  apiClient wrapper → Rails API
        ↓
  Design System (Tailwind + Radix + CSS variable tokens)

Tech Stack