Hyrox is a hybrid fitness race taking the world by storm. This app was built to keep two athletes — training in different cities — on the same structured path to their first finish line.
05 HYROX
The Starting Point
My friend and I are both training for Hyrox. We live in different cities. Every app we looked at was either too generic or too complex — built around logging every rep, not staying structurally aligned.
So I built one.
The Problem
Training across two cities means you can't rely on check-ins. We needed one shared structure — same plan, same progression, same race on the horizon. Focused enough that it actually gets used.
Visual Direction
Hyrox as a sport is stark, industrial, high contrast. Neon yellow on black felt like the only honest choice. Oversized condensed type does the structural work.
The week number should hit you before you read the label.
/ Built to fit into an existing ecosystem, not replace it.
Key Features
Simulation volume progression Set your starting volume, the app linearly ramps your run distance to full 1km intervals by race week. A clean build that gives you permission to start lighter.
Training plan + day reorder Drag to map your split onto your actual week. Hyrox sim days stay pinned, strength days fill the rest. Adjustable mid-block when life shifts.
Heatmap Every day of your training block as a grid cell. Race day is marked in the grid, not as a separate countdown. Empty cells are hard to ignore — you don't need a notification to tell you you've been inconsistent.
Moments of Iteration
Moment 1
The quotes feature that got cut Added a motivational lyric tied to each week. Once it was in, it just sat there. Didn't help me train, didn't add information. Cutting it was a reminder — personality in a product has to serve the experience, not decorate it.
Moment 2
The stats page merge Originally three tabs — Home, Plan, Stats. I never went to Stats. Merged everything into one scrollable Home. Less switching, more focus.
React PWA deployed on Netlify, native wrapper via Median. Single HTML file — no build pipeline, no dependencies. All data in localStorage. Vibe coded with Claude as collaborator.
The constraint of working this way made me more precise. Vague briefs produced vague results. Sharp ones produced sharp ones.
Tech + Build
What I'd Do Differently
+ Learning
This is the only project in my portfolio I use every day. Building for a real deadline with a real person on the other end sharpens every decision. There's no room for features that don't earn their place.
localStorage works for a personal tool but breaks the original vision — two people, one shared plan. A lightweight sync layer via Supabase would solve it cleanly.
-
a
a
y
n
a
n