SplitLift

A personalized weekly lifting planner for athletes. Pick your sport, enter five stats, and SplitLift builds a split tailored to your body and goals.

Comment

SplitLift

Inspiration

One of my friends didn't have a split he followed. He wanted to start lifting but couldn't just copy someone else's plan — he didn't have access to a full gym, and most splits online assume you do. And as a beginner with no gym knowledge, he wouldn't know how to tailor a plan to himself even if he tried.

So I built SplitLift to fix that. It's super customizable, and it helps you build a split tailored to you and the sport you play.

What it does

You answer a few questions — your sport, days available, body stats, equipment, goals — and SplitLift builds a weekly lifting plan around the answers.

  • Personalized splits based on your sport and schedule
  • Sport-specific cardio — basketball gets sprints, runners get tempo work, powerlifters get minimal cardio
  • Body coverage map — tap any muscle to see how much volume your week actually hits it for
  • Sport Match Score — a 0-100 grade for how well your split fits your sport, updates live as you change your schedule
  • Find My Weak Spots — auto-detects under-trained muscles and lets you add exercises straight to your schedule
  • Weight tracking — log weigh-ins and see the chart
  • Friend comparison — side-by-side body heatmaps to see where your training differs Runs entirely on your phone. No account, no servers.

How we built it

React + Vite, mobile-first. State lives in localStorage with versioned migrations.

The body model uses react-body-highlighter (SVG). Coverage colors are computed from your weekly schedule. Tapping a muscle zooms in and opens a drawer with exercises and intensity data.

Recharts for the weight graph (lazy-loaded).

Built a token-based design system from scratch — one shared <Card> component used across every tab, three variants, gradient mapped to data category. Same component everywhere is what made the app feel unified.

Satoshi for typography. Lucide for icons.

Each of 14 supported sports has its own profile — muscle priorities, energy system, recovery needs, cardio recommendations — that drive both the generated split and the Sport Match Score.

Wrote a Playwright smoke test that clicks through every tab, takes screenshots, and verifies content. Caught real bugs before I did.

Challenges we ran into

The 3D model. Spent hours trying to use a real 3D anatomy model — compressed it from 161 MB to 12 MB, set up React Three Fiber, then found out the mesh names got stripped during export so per-muscle clicking wasn't going to work cleanly. Cut my losses and switched to 2D SVG. Better choice anyway.

Visual consistency. Early versions had every screen styled differently because each new feature added gradients in slightly different ways. Eventually had to scrap most of the CSS, build a real design system, and rebuild every screen using the same primitives.

Data flow. Once the app had seven tabs that all read from shared state, it got hard to be sure changes propagated correctly. Wrote tests that actually mutate state and check downstream tabs instead of relying on visual checks.

Exercise GIFs. Tried three different sources, none looked right. Ended up shipping gradient tiles with Lucide icons, which look intentional rather than broken.

Accomplishments that we're proud of

  • Live coverage math — the body heatmap reflects your real schedule, not a static demo
  • Sport Match Score is a real metric, not a gimmick — it changes when you change your split
  • 14 sports, each with its own training profile
  • Mobile-first throughout — tested at 380px viewport the whole way
  • Self-testing infrastructure that runs on every commit

  • Zero backend, full persistence

    What we learned

  • A design system saves time. The first six versions of this app were slow because every new feature was styled in isolation. After building one shared <Card>, every subsequent change took half the time.

  • Test what propagates, not just what renders. A tab can look perfect and still show stale data.

  • Cut your losses early. The 3D model was a sunk cost the moment I knew SVG would work better.

  • Constraints help. "No backend" forced everything to work locally, which is a better demo than anything cloud-synced.

    What's next for SplitLift

  • Real backend + accounts (Supabase, real friend connections, shareable links)

  • Workout completion tracking — log sets and reps, get progressive overload suggestions

  • Custom split variants — save modified versions of any day

  • Better exercise library — animated demos, equipment substitutions

  • AI coach — ask questions about your training in plain English

  • More sports + position-specific tweaks (a point guard trains differently than a center)

  • Wearable integration — pull HRV and sleep from Apple Health, Garmin, Whoop to auto-adjust volume on low-recovery days

Built With

Share this project:

Updates