Skip to content
vuslatsarchiveAll Work
Case study 02 · 2025

Health by Hannah — Coach Web

The coach's side of a remote rehab and exercise programming business: clients, program builder, calendar, real-time chat and check-ins in one desktop app.

Role
  • Coach Web App
  • Fullstack & Product
Timeline
Sep — Dec 2025
Stack
  • Next.js
  • React
  • TypeScript
  • Material UI
  • Supabase
  • Tailwind CSS
Links
Coach web
Health by Hannah coach web — workout calendar showing every client's workouts for the month

The Product

Health by Hannah is a coaching business for remote rehab and exercise programming. Clients follow their programs in a mobile app; the coach needed one desktop place to run everything behind it — clients, weekly and monthly programs, the exercise library, messages and the notes clients leave after a workout.

My Role

From September to December 2025 I built the Coach Web app end to end: a Next.js and Material UI dashboard on Supabase (PostgreSQL, Auth, Realtime), working from the client's requirements and their feedback rounds. It reads and writes the same data as the client mobile app, so a program the coach saves on the web is what the client opens on their phone.

/ the flow

One Dashboard for the Whole Practice

A coach's week, screen by screen. Everything here is mine. Screens are shown with demo data — no real clients.

  1. See Every Client at Once

    The calendar shows all clients' workouts in weekly or monthly view, color-coded by status, with a client filter and time off days.

  2. Manage Clients

    Plans, statuses and dates per client, a 30-day compliance rate and a due date that flags who needs a new program.

  3. Build the Program

    A weekly or monthly builder: drag-and-drop exercise cards, sets, reps, weight, rest and RPE, a focus for each day and rest days.

  4. Track Progress

    Progress mode turns the same program into completion stats for any week, month or custom range.

  5. Exercise Library

    The coach's own library — name, image, video and instructions — that every program pulls from.

  6. Real-Time Chat

    Real-time chat between coach and client on Supabase Realtime, with unread counts and read receipts.

  7. Answer Check-Ins

    Notes clients leave on a workout or an exercise land here, and the coach responds right from the card.

Tap a screen to view it full size.

/ up close

A Closer Look

The details a coach touches every day, up close — starting with real-time chat.

Real-time chat: a conversation list with unread badges and last-message previews, and an open conversation with client bubbles, a green coach bubble with a read tick, and a reply being typed.
Real-Time ChatBuilt on Supabase Realtime: messages arrive instantly in both directions between the coach web and the client app, with unread badges, last-message previews and read receipts.
A client's workout note marked New, with the note text and an open Your Response box with Send Response and Cancel buttons.
Respond to Check-InsA client's workout or exercise note opens into a reply box, and the answer goes straight back to their phone.
Edit Client dialog with Personal Information (full name, email) and Plan & Status sections: plan set to Exercise Programming, status Active, start and end dates, and a quick note reading Wants more core work.
Edit ClientPlan type, status, plan dates and a quick note the coach sees at a glance.
Workout Details dialog for Tuesday, November 3, 2026: client Maya Collins, focus Hip Stability, and each exercise (Half-Kneeling Press, Glute Bridge, Push-Up) with editable sets, reps, weight and a coach note for the client.
Workout DetailsOpened straight from the calendar: tweak sets, reps and weight and leave a coach note without leaving the month view.
Edit Exercise dialog: exercise Hip Airplane with its instructions, 3 sets, 8-10 reps, optional duration, 24 kg weight with a unit picker, 60 seconds rest, RPE 7 Extremely Hard, an alternative exercise picker and exercise notes.
Edit ExerciseReps or duration, weight in kg or lbs, rest, RPE and an alternative exercise the client can swap in.
The Workout Calendar in dark mode: the monthly grid with color-coded workouts per client on a dark green-black background.
Dark ModeA light / dark theme toggle across the whole app — the same calendar, easier on late-night planning.

Shipping It

  • Client Management: create, edit and delete clients with server-side pagination and filtering, plan types, statuses, plan dates and quick notes.
  • Onboarding & Auth: invite-based onboarding with a create-password flow, coach sign-up, login and forgot / reset password — all on Supabase Auth.
  • Workout Programs: a weekly and monthly builder with drag and drop, day focus, rest days, alternative exercises and inserting past workouts into a new program.
  • Coach Calendar: every client's workouts in one view, a client filter and time off for the coach.
  • Progress & Compliance: completion stats by period and a 30-day compliance rate on the clients table.
  • Real-Time Chat: coach–client messaging on Supabase Realtime — live updates, unread counts and read receipts across web and mobile.
  • Check-In Notes: a notes inbox for workout and exercise check-ins, with replies from the card.
  • Iterating on Feedback: after the client's review round I removed the dashboard they didn't need and reworked the calendar around how they actually plan.
  • Security & Performance: login and client-table performance fixes, and a quick patch for the React Server Components vulnerability.

What I Built

Program Builder

Weekly and monthly programs per client with drag-and-drop exercise cards, sets, reps, weight, rest and RPE, day focus, rest days and alternative exercises.

Real-Time Coaching

Supabase Realtime chat with unread counts, plus a notes inbox where the coach answers workout and exercise check-ins from the mobile app.

Coach Calendar & Compliance

All clients' workouts in one calendar, color-coded by status, time off, and a 30-day compliance rate with a due date on every client.
/ outcome

What Changed

The coach runs clients, programs, the exercise library, messages and check-ins from one desktop app, on the same data the client mobile app uses.

/ learned

What I Learned

Building straight from a client's requirement document — and their feedback after each round — taught me to cut as readily as I add. Removing the dashboard made the product better. Owning the UI, auth and data layer together made me think about the whole flow: what the coach saves has to be exactly what the client sees on their phone.

Next ProjectSwivX — Posture Training