MyGym
Mobile-first Next.js exercise tracker for strength and cardio — story cards, demo cues, warm-up ramps, and Push/Pull/Legs planning.
Training operating flow
Plan → warm up → log → share — a gym phone UI that respects sets.
- Plan PPL calendar
- Warm-up Ramp helpers
- Demo Form cues
- Log Sets & RPE
- Share 9:16 stories
- Review Progress truth
The challenge
Most workout apps are either social noise or spreadsheets. Lifters need fast logging, clear progression, and shareable proof without a native-app tax on day one.
MyGym needed a phone-first web app that feels native in the gym — large taps, skeletons, offline-tolerant UX.
Without structured set history, any future coaching AI is guessing — training truth must be logged first.
What we built
We shipped a Next.js App Router fitness tracker with shareable 9:16 workout story cards, exercise demo clips with form cues, warm-up ramp helpers, and a calendar planner for Push/Pull/Legs.
Screen skeletons keep perceived performance high on mobile networks.
Deploy scripts and PM2 ecosystem config made the app operable on a real host.
Product architecture
Mobile tracker, demos, warm-ups, planner, and shareable proof.
Mobile tracker
Phone-first logging with large taps and skeletons.
Coaching aids
Warm-up ramps and exercise demo cues.
Planner
Push/Pull/Legs calendar patterns.
Share layer
9:16 story cards without a full social network.
Training graph diagram
How plans, sets, and demos become a coaching-ready training graph.
Athlete
Guidance
AI later
AI may suggest deloads or cues — the lifter always confirms the load.
Design principles
Native feel on the web; AI proposes, the lifter confirms loads.
Phone is the gym
Design for sweaty thumbs first.
Log truth first
Coaching AI is useless without structured sets.
Share without social bloat
Story cards beat building a network.
Human confirms load
AI proposes; the lifter decides.
How we approached it
Mobile viewport was the design canvas — desktop was secondary.
Sharing mattered: story cards turn workouts into social artifacts without building a full social network.
Warm-up and demo cues reduce injury risk and support responsibility in product copy.
Deploy scripts and PM2 ecosystem config made the app operable on a real host.
Logging UX prioritizes large taps and fast set entry over feature sprawl.
Where AI enters — and where it must not
AI coaching only works with structured set history — we log the training truth first.
Demo clips + cues create a multimodal corpus for future form assistants.
Planner patterns (PPL) give models a template to suggest weekly adjustments.
We keep humans in control of loads; AI proposes, the lifter confirms.
Technical notes from production
Details that only show up once the season is real.
- Mobile viewport is the primary canvas; desktop layouts are secondary.
- Story cards export at 9:16 so sharing does not require a social network product.
- PM2/deploy scripts treat the tracker as a hosted service, not a static experiment.
- Set/RPE history is structured so coaching models have truth to work from.
Delivery & systems
Next.js + TypeScript app with deploy_mygym.sh and ecosystem PM2 config.
Public assets optimized for narrow screens.
Story card exports sized for 9:16 social surfaces.
Stack
Click a layer — each one maps to a real season responsibility.
Mobile web app
Next.js
App Router fitness tracker optimized for phones.
Brand assets from the live product
Primary mark pulled from the Olympiad codebase — shown once, on the surface it was built for.
Outcomes
- Mobile-first workout tracker
- Shareable story card exports
- PPL calendar planning
- Warm-up and demo cue support
- Structured set history ready for coaching models
More work
View all
2025–2026
AI Olympiad
EdTech · AI Competition Platform
AI Olympiad
EdTech · AI Competition Platform
2024–2026
Archit Art Gallery
Commerce · Invoicing · Amazon AI Listings
Archit Art Gallery
Commerce · Invoicing · Amazon AI Listings
2023–2026
QUEST Book
EdTech · AI & STEAM Quiz
QUEST Book
EdTech · AI & STEAM Quiz