Project
GymTrack
UX/UI Designer & Front-end Developer
Mobiel-first fitnessapp voor krachtsporters. Supabase voor accounts en data, maar de focus ligt op snel loggen in de gym: schema's volgen, progressie zien, niet nadenken over de app.
Login-scherm mobiele interface
Over dit project
GymTrack is een mobiele fitnessapp waarmee krachtsporters trainingen kunnen plannen, bijhouden en analyseren. Ik richtte het product op gebruikers die in de gym snel sets willen loggen zonder veel te hoeven zoeken of typen.
Ik ontwierp en bouwde de interface als responsive React-app met Supabase voor accounts en data. AI-ondersteuning helpt bij het maken van schema's, maar de kern blijft de workout-ervaring zelf.
Wat ik bouwde
- Workout logging en schema's in één snelle flow
- Dashboard met grafieken, PR-detectie en trainingshistorie
- 3D-spier-heatmap om belasting visueel te maken
01 / Het project
Ik bouwde GymTrack als mobiel-first webapp met een schema-architect, workout coach, progressie-analyse, dashboard en trainingshistorie. De 3D-spier-heatmap maakt zichtbaar welke spiergroepen belast worden, en grafieken tonen progressie over tijd.
02 / Aanpak
- 01
Probleem scherp krijgen
Eerst bepaald welke stappen tijdens het trainen het meest tijd kosten: navigeren, invoeren en terugvinden van eerdere prestaties.
- 02
Flows schetsen
De belangrijkste schermen uitgewerkt: inloggen, schema bekijken, workout loggen en resultaten terugzien.
- 03
Bouwen
Interface opgebouwd in React met herbruikbare componenten, gekoppeld aan Supabase voor auth en data.
- 04
Testen op mobiel
Flows op telefoonformaat getest en knoppen, navigatie en invoervelden aangepast waar het te veel stappen vroeg.
03 / Ontwerp
Probleem
Tijdens een training wil je niet veel scrollen of lange formulieren invullen. Elke extra stap voelt storend als je tussen sets zit.
Keuze
Ik koos voor een mobiel-first layout met een vaste bottom navigation, zodat de belangrijkste acties altijd bereikbaar blijven.
Keuze
Ik gebruikte een 3D-spier-heatmap om spierbelasting visueel te maken. Zo hoef je niet alles uit een lijst te halen om te snappen wat je traint.
04 / Development
Ik bouwde de app met React en TypeScript. Supabase regelt authenticatie en opslag van trainingen. Recharts gebruik ik voor progressiegrafieken, Three.js voor de spier-heatmap.
State en data zijn gekoppeld aan concrete schermen: wat je logt tijdens een workout komt direct terug in historie, PR-detectie en trendanalyse.
Stack
Client-side interactie, state en UI. Waar nodig gekoppeld aan backend, CMS of opslag.
05 / Resultaat
GymTrack is een werkende app met login, schema's, workout logging, dashboard en historie. De interface is gebouwd voor gebruik op mobiel, met visuele feedback via heatmap en grafieken in plaats van alleen tabellen.
06 / Geleerd
Ik merkte dat ik te snel features toevoegde zonder eerst de workout-flow strak te zetten. Door eerst de kernflow te verbeteren, werd de rest van de app logischer.
Visualisaties zoals de heatmap zijn alleen nuttig als ze snel te begrijpen zijn. Ik heb moeten schrappen en vereenvoudigen tot het echt hielp.