Live App
UI/UX
Vibe Coding
Fitness
Design + Dev
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.
04 HYROX
This project sits at the intersection of something I care about personally and something I wanted to push myself on professionally. I'd been wanting to take a project from zero to a live deployed product entirely on my own, and training for Hyrox with a partner in another city gave me the perfect problem to solve. The result is a focused training plan app — designed around our specific race date, our training split, and the way Hyrox simulations need to progressively build over weeks. It's a real app that two real people use every day, and that changes how you make decisions when you're designing it.
about
The Starting Point
This one started with a real problem. My friend and I are both targeting Hyrox this year but we live in different cities. We wanted a shared structure — same plan, same progression, same race on the horizon. Every app we looked at was either too generic or too complex, built around logging every rep and set. We already use Hevy for that. What we were missing was something simpler: a way to stay on the same page about where we are in the plan, how our Hyrox simulations should be progressing, and how far we are from race day.
So I built one.
This was a vibe coding project — I designed and built simultaneously, using Claude as my coding collaborator. The final app is a React PWA deployed on Netlify, with a native wrapper via Median for mobile home screen installation. All data lives in localStorage, keeping it lightweight and fully personal with no backend required.
The workflow was closer to directing a developer than writing code. I'd describe what I wanted — behaviourally, visually, structurally — and iterate from there. The constraint of working this way pushed me to be more precise about what I actually wanted before asking for it. Vague briefs produced vague results. Sharp ones produced sharp ones.
The codebase is a single HTML file with embedded React, Babel, and Google Fonts. Deliberately minimal. No build pipeline, no dependencies to manage, no deployment complexity. The whole thing runs from a folder you can drag onto Netlify.
Tech + Build
The localStorage approach works well for a personal tool but wouldn't scale to shared state between two users without a backend. The original vision was two people on the same plan — for now that means sharing the same setup manually, which is fine but not elegant. A lightweight sync layer (even just a shared JSON on something like Supabase) would solve it cleanly.
What I'd Do Differently
Key Features
Key Features
Simulation Volume Progression
This was the most considered piece of product logic in the app. Hyrox simulations involve eight stations, each followed by a run. At race volume, each run is 1km. Early in a training block, running full 1km intervals between every station is neither practical nor necessary.
The app solves this with a starting volume slider during setup. If your race is more than four weeks away, you set where you want to begin — anywhere from 20% to 100% of race volume. The app then linearly interpolates your run distance across every week of your plan, arriving at full 1km runs in the final weeks before taper.
The logic is intentionally simple. No complex periodisation formulas, no fatigue modelling. Just a clean ramp that gives you permission to start lighter and build with confidence.
The Problem
Training for Hyrox across two cities means you can't rely on check-ins to stay structurally aligned. We needed something that kept both of us on the same progressive plan — showing us what's on the schedule each day, how the simulation volumes are building week on week, and how close we are to being race-ready. Something focused enough that it actually gets used.
/ Built to fit into an existing ecosystem,
not replace it.
Visual Direction
The aesthetic was gut feel from the start. Hyrox as a sport has a strong identity — stark, industrial, high contrast. Neon yellow on black felt like the only honest choice. Oversized condensed type does the structural work rather than relying on cards and borders. The typography hierarchy is aggressive on purpose: the week number should hit you before you even read the label.
I iterated through several versions of the home screen before it felt like it genuinely belonged in that world rather than just referencing it.
Training Plan & Day Reorder
Most training apps assume you train on fixed days. Reality is messier. The plan setup includes a drag-to-reorder interface that lets you map your chosen training split onto your actual week. Hyrox sim days stay pinned to the right number of sessions, and strength days fill the remaining slots — but you control which days those are.
The reorder happens at setup but can be changed later through settings, so if your week shifts mid-block you're not locked in. The schedule then drives everything downstream: the home screen, the plan view, the heatmap, the streak counter.
Heatmap
The heatmap shows every day of your training block as a small grid cell — one column per week, seven rows deep. At a glance you can see the full shape of the block: how much is done, how much is left, and where the gaps are.
It serves two purposes simultaneously. As a progress visualiser it makes the full distance feel real. As an accountability tool, empty cells are hard to ignore — you don't need a notification to tell you you've been inconsistent. The grid does it.
A few decisions make it more considered than a standard tracker. Race day is marked directly in the grid rather than as a separate countdown, so you always see it in context of where you are in the block. Every day after race day is blank — the training block has a hard edge, and the visual reflects that.
The streak counter only counts consecutive completed training sessions. Rest days are invisible to it. Missing a designated rest day doesn't break your streak. Missing a training day does. A streak that penalises rest days is a streak that lies to you.
This is the only project in my portfolio that I use every day.
Building something for yourself, with a real deadline on the horizon,
has a way of sharpening every decision.
There is no room for features that don't earn their place.
UI/UX ————— Vibe Coding ————— Product Design ————— Design + Dev————— Interaction Design————— Live App ————— UX Research ————— Product Design —————