Client Work — Next.js 16 + React 19
Hypro Light
2026
A free workout website built as the top-of-funnel acquisition layer for the Hypro app. Users can browse real trainer workouts, run interactive sessions, log sets, and track personal records — all without signing up. Developed in close collaboration with Maciej, the founder, starting from a Figma prototype he guided and gave continuous feedback on.
Hypro Light — free workout browser and interactive session tracker at workouts.hypro.app.
Technical Implementation
Frontend
- Next.js 16 with App Router
- React 19 with Server Components
- TypeScript in strict mode
- Tailwind CSS v4
- shadcn/ui + Radix UI primitives
- Framer Motion for animations
Data Layer
- GraphQL Yoga API route
- GraphQL Code Generator for typed hooks
- TanStack Query v5 for server state
- Static TypeScript data files
- localStorage for session & history
Tooling & Features
- PWA support via Serwist
- PostHog analytics
- Recharts for data visualisation
- Lucide React icons
- React Hook Form
- pnpm + Node 22
Key Features
Workout Browser
Browse and filter real workouts from Hypro trainers, with full exercise details including sets, reps, and muscle group targeting.
Interactive Session Wizard
Step through exercises one at a time in a guided wizard UI — designed to feel like an actual training session.
Set Logging
Log weight and reps per set with stepper inputs. Supports both Advanced (weight/reps) and Basic (checkbox) modes.
Personal Records & History
Tracks completed workouts and calculates personal records using the Epley 1RM formula. All stored locally — no account needed.
Muscle Heatmap Visualisation
SVG body map that highlights muscle groups targeted by each workout or exercise, helping users understand training balance.
Post-Workout Summary
Celebration screen after finishing a workout — shows stats, PRs hit, and a shareable card. The highest-value conversion moment.
Development Process
Starting from a Figma Prototype
The project began with a Figma prototype I built to establish the visual direction and user flow. Maciej reviewed each screen, gave detailed feedback on layout and UX decisions, and we iterated before writing a single line of code. This collaborative approach helped avoid costly rework later.
Prototype → Feedback → Build
Designed key screens in Figma: workout listing, detail page, active session wizard, and post-workout summary.
Maciej guided decisions around conversion touchpoints and product positioning.
Prototype sign-off gave us a clear shared vision before development started.
Architecture & Data Strategy
The app uses a clean server-only data pipeline: Next.js Server Components fetch from a GraphQL Yoga API route, which resolves against static TypeScript data files exported from the Hypro platform. This keeps the client bundle small while enabling full type safety end to end.
No Database, No Auth — by Design
All workout data is static — no database means zero latency and no running costs.
User session data (history, PRs, set logs) lives in localStorage — removing any sign-up friction.
GraphQL Code Generator produces typed TanStack Query hooks automatically from the schema.
Conversion-Focused UX
Every major UX decision was made with conversion in mind. The site gives away complete value for free, using psychology-driven soft CTAs at the moments users are most engaged — after finishing a workout, after building history, or when viewing locked analytics.
Key Conversion Touchpoints
Post-workout summary: highest engagement moment — CTA to sign up for full platform.
History page: after 2+ workouts, loss aversion kicks in (don't lose your progress).
Blurred analytics card: creates curiosity and scarcity without being aggressive.
Challenges & Solutions
Keeping Sessions Smooth Without a Backend
Challenge: Active workout sessions need to persist across page reloads and feel responsive, without any server storage.
Solution: Designed a localStorage data structure for session state, set logs, and history. Used TanStack Query with optimistic updates so the UI never waits for anything.
Type Safety Across the Full Stack
Challenge: With static data files, GraphQL resolvers, and client query hooks all needing to stay in sync, any drift causes runtime errors.
Solution: GraphQL Code Generator watches the schema and auto-generates typed hooks on every change, making the entire data layer compile-time safe.
Balancing Free Value with Conversion
Challenge: Too aggressive with CTAs and it feels spammy; too passive and users never convert.
Solution: Worked with Maciej to place soft CTAs only at peak engagement moments, using copy that emphasises what users gain rather than what they're missing.
Performance with Large Static Data
Challenge: The exercises data file alone is ~680KB — importing it naively would bloat the client bundle.
Solution: All data access is server-only (enforced with import 'server-only'), so static data never reaches the client. Only the serialised query results are sent.
Planned Enhancements
More Workout Programs
Expand the workout library with structured multi-week programs from additional Hypro trainers.
Advanced Analytics
Unlock detailed progress charts and volume tracking as a conversion incentive for signing up.
Social Share Cards
Polished shareable post-workout cards for Instagram and other platforms to drive organic growth.
Deeper Hypro Integration
Allow users to import their Hypro account data into the light site as a onboarding bridge.