Gym Platform
Memberships, classes, coaches, and the exact spot you'll stand in.
A member app for a multi-branch gym chain in the Gulf: buy and manage memberships, book group classes down to the seat, join a live waiting list, train with a coach and track every lift. It is shown here in Walnut's white-label theme, the same product ready to carry any gym's brand.
- Market
- Gulf · EN / AR
- Platforms
- iOS · Android · Odoo
- App
- 55 routes · v1.2.9
- Delivery
- White-label product
Role
Product, UX/UI, mobile engineering, Odoo integration
Stack
- React Native 0.78
- React Query 5
- Zustand
- RNEUI
- Reanimated 3
- i18next
- Odoo
- OneSignal
Chapters
/Full classes, empty spots
The problem
Two goals: self-service for everything a member used to queue for, and no wasted spots in popular classes.
At any busy gym, the popular classes fill first. A member who misses out has no reason to check back, and a spot freed by a late cancellation can easily go unused.
On top of classes, a multi-branch chain sells memberships, personal-training packages, freezes and upgrades. The brief: put the whole membership in the member's pocket, and make every class spot count.
/Calendar → class → spot → waiting list
Booking, down to the seat
Scroll through booking a class, including what happens when it's full.
01 · Calendar
See every class, every branch
A month view with slot dots per day, then class cards with time, coach, branch and spots left, or a clear “Fully booked”.
02 · Class details
Know before you reserve
Coach, time, duration, branch, capacity and remaining spots, with one pill-shaped action: Reserve Class.
03 · Choose your spot
Pick your bike, not just your class
A seat map drawn from the studio's real layout: reserved, selected and your spot, with pinch-to-zoom for big rooms.
04 · Waiting list
A spot opens. You have five minutes.
Members queue in order. When someone cancels, the next in line gets a push and a 5-minute Accept or Deny, then the offer moves on.
How a freed spot finds its next member
- 1
Join
Queue in order
Joining a full class returns a position (#1, #2, #3), shown on the member's calendar.
- 2
Release
Someone cancels
The backend detects the free spot and offers it to #1. The app never invents queue order.
- 3
Offer
Push + countdown
A push with its own alert sound deep-links to the class, with a countdown to the offer's expiry.
- 4
Respond
Accept or deny
Accept books the spot. Deny or silence passes it to #2 automatically.
- 5
Fill
Class runs full
The spot is taken by someone who actually wants it.
/No front-desk queue
The whole membership, self-served
Details members never notice (by design)
Every notification lands somewhere
A custom URL scheme and universal links map to memberships, PT packages and individual classes, and push notifications route straight to the right tab.
Arabic that looks designed, not translated
About 910 keys per language, full right-to-left, a dedicated Arabic typeface, and digits kept in one face so stats never jump between scripts.
Server state done properly
17 API service modules and 99 React Query hooks handle caching, retries and invalidation, so screens stay fresh without manual reloads.
Rules under test
Waiting-list logic, appointment responses, class eligibility and notification routing are covered by unit tests, the parts that cost members a class if they break.
/One product, any gym's brand
White-label by design
Colour, type, radii and spacing live in one themed design system (RNEUI), with a single primary token driving buttons, active states and highlights. Re-theming is a token change plus one pass over icons and illustrations, not a redesign. That's exactly how these screens were produced: the client's blue swapped for Walnut Ember, their logo for ours.
SF UI Display · Headings · 32 / 28 / 24 / 20
We will accompany you on your fitness journey
Cairo · Arabic · switches in right-to-left
سنرافقك في رحلتك نحو اللياقة البدنية
Card
20px
Chip
40px
Button
999
Tab bar
999
- Pill buttons 60 px tall, with a floating pill tab bar and the active tab in the primary colour.
- Re-branding = the primary token, the logo, and a recolour of the icon set.
Screens & routes
11 auth · 44 app
Data hooks
React Query
i18n keys per language
EN · AR
Minute offer window
Waiting list
Source · App source: navigators, API hooks, localization files and the waiting-list handoff spec
All eight screens
Screens are recreated from the app's source in Walnut's white-label theme. Names, branches and prices are representative.
Also in the app: personal-training packages and trainer booking, freezes, family and friends memberships, contract e-signing, ID upload, InBody results, referrals, partner benefits and active-device management.
Next / Mobile app · Foundation
70%