F1tCloud
Gym SaaS with member and trainer apps: Clean Architecture, white-label Flutter flavors, and same-day branded store builds for each gym that onboarded.
F1tCloud
TechTrioz · Production gym platform
Team Lead · Mobile UI Designer & Lead Flutter Engineer
TechTrioz · Production
Cross-Platform Flutter Engine
Member + trainer apps · Flutter flavors for per-gym branding · Clean Architecture
Separate clients for gym members and coaching staff
Per-gym logo, colors, and store listing from one codebase
Branded app configured same workday after onboarding request
Booking, attendance, retail, access control, and PT workflows
Executive Summary
F1tCloud is a gym SaaS product: everything a modern gym needs in one mobile system. I led the project as team lead, designing the mobile UI and owning engineering delivery, across two Flutter apps: one for gym members and one for trainers.
Members get group exercise and personal training booking, rewards, complimentary benefits, an internal retail store, fitness journey tracking, multi-branch discovery, guest exploration, and gym access flows. Trainers run sessions, take attendance, manage PT bookings, review members, and plug into central access control.
The product hook (and the hardest systems problem) was white-label branding via Flutter flavors. From a single member codebase, each registered gym could get its own logo, brand colors, and store-deployed app so members only ever saw their gym’s personalized system. Architecture was designed so per-gym feature flags and complementary offerings stayed customizable without forking the product.
The Challenge
The Challenge: One Codebase, Many Gym Brands in the Stores
Gyms wanted a full management stack and their own branded member experience on Google Play and the App Store, without waiting weeks or maintaining separate codebases per tenant.
White-Label Store Apps at Scale
Each gym needed its own logo, colors, and listing identity. Flutter flavors had to produce store-ready member builds quickly while sharing one engineered core.
Per-Gym Feature Customization
Different gyms asked for different complementary features and configurations. The architecture had to allow customization without exploding into forks.
Dual Audiences, One Platform
Members and trainers needed role-appropriate apps that still shared booking, attendance, and access-control truth with the gym system.
Complete Gym Surface Area
Enrollment, queue, guest exploration, GX/PT booking, retail, rewards, journey tracking, branches, and access control all had to land as one coherent product.
Project Scope
Engineering Objectives & Delivery Scope
- Lead UI design and Flutter engineering for member and trainer apps on Clean Architecture.
- Ship Flutter flavor pipelines so each gym gets a branded member app for Play Store / App Store.
- Support same-workday stand-up of branding and configuration after gym onboarding (store review aside).
- Deliver member surfaces: GX, PT, rewards, complimentary, retail, fit journey, branches, guest login, booking, and access.
- Deliver trainer surfaces: session creation, attendance, PT request handling, member visibility, and access control.
- Keep per-gym feature and complementary customization inside a shared architecture.
- Enable custom color themes and logo branding as first-class gym configuration.
Engineering Foundation
Architecture & Technical Design
Clean Architecture with clear domain boundaries, plus Flutter flavors for white-label member builds. Trainer and member clients share platform contracts for bookings, attendance, and access while exposing role-safe UX.
Flutter Flavors for Per-Gym Brands
Single member codebase generates gym-specific apps with logo, theme colors, and store identity, deployable to Google Play and Apple stores for that gym’s members only.
Clean Architecture Core
Presentation, domain, and data layers kept enrollment, booking, retail, and access modules replaceable and testable as gyms requested custom behavior.
Dual-App Role Split
Member app optimizes discovery and self-service; trainer app optimizes sessions, attendance, and member ops, both tied into the same gym backend.
Configurable Themes & Features
Onboarding sets gym identity and complementary feature sets so each tenant feels native without a code fork.
Shared Flutter core
Member + trainer
Flavor pipeline
Logo · theme · IDs
Gym A store app
Gym B store app
Gym N store app
App suite
Each role, then the screens they actually use
Follow one client at a time. The screens sit in journey order so you can read the work as a path, not a dump of captures.
App 01 · Members
Member App
Gym members & guests
The white-label member client: GUID login or guest exploration, home hub for GX and PT, membership benefits, retail, rewards, fit journey, branches, booking, and access, branded per gym via Flutter flavors.
F1tCloud on Google Play- GUID / password login plus guest exploration path
- Home hub: group exercise, personal training, membership benefits
- Complimentary benefits, rewards, internal retail store
- Fitness journey, multi-branch discovery, booking entry
- Gym-branded sidebar (logo, gym name, location) per flavor
- Access control entry for facility check-in
- Custom color themes and logo per registered gym
Follow the journey →
App 02 · Staff
Trainer App
Trainers & gym coaching staff
Trainers log into the core F1tCloud gym system to run group sessions, take attendance, accept PT requests, review bookings, access member information, and use integrated facility access control.
- Trainer authentication into the core gym system
- Home dashboard with ongoing sessions and take-attendance CTA
- Pending PT session requests with accept flows
- Upcoming GX / PT booking calendar and class lists
- Member information visibility for coaching ops
- Central access control integrated with the gym platform
- Session creation, promotion, and personal booking management
- Sales status dashboards for membership, PT, retail, and GX
Follow the journey →
Deep Dive
Key Technical Implementations
Detailed breakdown of core features addressing complex mobile engineering requirements.
Flutter Flavors: Personalized Gym Apps
The product hook: own logo, colors, and store listing in a day
From one member codebase, Flutter flavors produce gym-specific apps with that gym’s logo and brand colors, ready for Google Play and App Store so members only use their personalized system. After onboarding and a brand request, configuration stood up within a single workday, store review timelines aside.
- Single codebase → many branded store apps via flavors
- Per-gym logo, theme colors, and listing identity
- Same-day stand-up of branding/config after gym onboarding request
Member App: Full Gym Self-Service
GX, PT, retail, rewards, journey, branches, guest & access
Members book group exercises and personal training with credits and capacity, explore complimentary benefits and rewards, shop the internal retail store, track their fitness journey, discover branches, enter as guests, and use access flows, all inside the gym’s branded shell.
- Group exercise and personal training booking with credits
- Retail, rewards, complimentary, and fit-journey modules
- Guest exploration and multi-branch discovery
Trainer App: Sessions, Attendance & Access
Everything staff need to run the floor
Trainers create and run sessions, take attendance, accept PT bookings, review schedules, access member information, and use central access control: the operational half of the same gym platform.
- Ongoing session attendance and capacity
- PT request accept flows and upcoming GX lists
- Integrated access control with the gym system
Per-Gym Feature Customization
Architecture that absorbs “we need it our way”
Gyms asked for different complementary features and behaviors. Clean Architecture and modular features made those requests configurable inside the shared product instead of one-off forks, including enrollment, queue, and complementary offerings.
- Clean Architecture boundaries for swappable feature behavior
- Complementary / enrollment / queue customization in-scope
- Shared core with tenant-level configuration
UI Design + Engineering Leadership
Team lead across product look and delivery
I owned mobile UI design as well as lead engineering, so brand, interaction patterns, and the flavor/theme system stayed consistent from Figma intent through production builds.
- Designed the mobile UI language (lime accent, dark actions, card hubs)
- Led engineering delivery across member and trainer apps
- Aligned white-label branding with store-ready flavor builds
Hurdles & Solutions
Technical Challenges & Trade-Offs
Real production obstacles overcome during engineering and deployment.
Shipping many gym-branded store apps without many codebases
Flutter flavors + shared Clean Architecture core, with per-gym assets, theme colors, and configuration injected at build/onboarding time.
New gyms could request a personal branded member app and have configuration ready within a workday; store review remained the external gate.
Per-gym feature requests without product forks
Modular features and configurable complementary offerings so tenant differences stayed data/config, not divergent repos.
Sales and ops could promise customization while engineering kept one maintainable system.
Keeping member and trainer experiences coherent
Two focused apps sharing booking, attendance, and access contracts with the gym backend.
Members self-serve; trainers run the floor. The same operational truth sits underneath.
Outcomes
Impact & Production Outcomes
F1tCloud packaged a full gym management surface into member and trainer apps, then differentiated on white-label Flutter flavors so each gym could launch a personalized member experience under their own brand, colors, and store listing without abandoning a shared architecture.
Member and trainer clients live for gym operations
Per-gym branded member apps from one Flutter codebase
Branding and setup ready same workday after request
Team lead across mobile UI design and Flutter delivery
Technology Breakdown
Tools, Frameworks & Libraries
Categorized technical stack employed to achieve reliability, performance, and store compliance.