The New Gym — Client App

A PWA for gym members to manage memberships, book PT sessions, track workouts, and handle payments — all without downloading an app.

---

Overview

When I joined The New Gym project, we were starting from zero — no codebase, no locked-down design, just a product brief and a deadline. That's the kind of challenge I actually enjoy.

I owned the entire frontend end-to-end: architecture, component system, UX flows, and the feedback loop with the product team. If it touches the screen, I built it.

The result is a Progressive Web App that runs in the browser, feels native, and handles everything from membership signup to live workout sessions — across gym clubs nationwide in Vietnam.

---

Membership

Members can browse clubs by city, compare plans, pick a duration, and complete the whole signup flow in a few taps. After signing up, they get a Priority Pass — a personal QR code for check-in at the gym. No app install, no paper card.

Managing existing contracts is just as smooth: view contract history, freeze a membership, upgrade a plan — all handled in-app with proper confirmation flows.

---

Payments

This was the most technically demanding part of the project. Vietnam's payment landscape is fragmented — different providers, different flows, different edge cases. We had to make them all feel like one unified experience.

Here's what's under the hood:

• PayOS — QR / Internet Banking, supports 40+ Vietnamese banks
• VNPay Token — save card once, pay in one tap next time
• Recurring Payment — auto-renewal for subscriptions via VNPay
• Fundiin — buy-now-pay-later (BNPL) for larger packages
• Cash — at-counter option for members who prefer it

Getting the confirmation screens, failure states, and retry flows right took a lot of iterations. But when all payment paths feel consistent, users don't have to think about which method they're using — they just pay.

---

Workout Experience

The workout section is where members spend most of their time. They can browse by body part, follow a guided beginner program, or pick any routine from the library.

Once inside a session, the app walks them through every exercise — rep counts, rest timers, set breakdowns, and instructions with video stills. It's minimal by design. When you're mid-workout, you don't want UI noise.

---

InBody — Body Composition Tracking

Members get regular InBody scans at the gym, but the paper printout usually ends up forgotten in a bag. We fixed that.

The flow: snap a photo of the result sheet → AI OCR extracts all the numbers automatically → data gets saved to a personal timeline. Members can track weight, skeletal muscle mass, body fat %, and segmental analysis over months — with charts showing the trend.

No manual input. No transcription errors. It just works.

---

Personal Trainer

Members can browse PT profiles, view their specialties, and book 1-on-1 sessions directly in the app. The contract signing is fully digital, payment is handled in-app, and after each session members can leave a rating. Clean, end-to-end flow.

---

The Details That Add Up

These aren't headline features, but they're the things that make an app feel complete:

• Group Classes — view schedule, sign up for slots
• Referral System — share a link, get rewarded when a friend joins
• Push Notifications via Firebase FCM — contract reminders, payment confirmations
• Identity Verification — CCCD/CMND upload flow
• Saved Payment Cards — add, remove, set default
• Multi-language — Vietnamese / English toggle
• Support Tickets — report issues, track status
• Google Analytics — full event tracking across all user flows

---

Tech Stack

---

Performance & Scale

50,000+ active users. Near-instant load. Zero native app install required.

From the start, performance wasn't an afterthought — it was a core requirement. Gym members open this app at the front desk, mid-workout, or on a slow connection. Every second of load time matters.

Here's what we optimized for:

• PWA architecture — installable, offline-capable, no App Store friction. Members get a native-like experience directly from the browser.
• Lazy loading & code splitting — only the code for the current screen is loaded. Heavy flows (payments, workout sessions) are split into separate chunks.
• Optimistic UI — interactions feel instant. The UI updates immediately; network sync happens in the background.
• Firebase FCM — push notifications delivered in milliseconds, not seconds.
• Lean bundle — aggressive tree-shaking, no bloated dependencies. The initial bundle stays small regardless of how many features ship.

The result speaks for itself: the app now serves 50,000+ active users across gym clubs nationwide in Vietnam — and the performance holds up whether you're in a fast city gym or a slower connection in another province.

Scaling a PWA to this user count without a native app is something I'm genuinely proud of. It proves that a well-built web app can go head-to-head with native — and sometimes win.

---

Reflection

Building this app taught me that complexity hides in the integrations. Any single feature — payments, contracts, workouts — isn't that hard alone. But when they all have to work together, share state, handle failures gracefully, and feel consistent to the user, that's where the real engineering happens.

I'm also proud of the UX work here. I was in every product conversation, pushing back when flows got confusing, advocating for the member's perspective. The best code I wrote on this project was sometimes just removing a step from a form.

---

Built with React 18 + TypeScript. Shipped as a PWA.