About the client
The Wellcam.fit platform needed to handle everything a real trainer-client relationship requires: profile discovery, lesson catalogues, calendar-based booking, recurring session scheduling, wallet management, and live session access — all within a single responsive application that works equally well on desktop, mobile, and tablet.
Challenge
- Two parallel product experiences: Clients and trainers interact with the same platform in fundamentally different ways. A trainer needs scheduling tools, lesson management, and income tracking. A client needs discovery, booking, a wallet, and a wishlist. Both experiences had to be designed, built, and QA'd simultaneously without one blocking the other.
- Complex booking logic: Beyond simple appointment booking, the platform required support for group lessons with variable frequency, recurring sessions auto-generated up to 12 months ahead based on trainer availability, package pricing with discount incentives, and a wallet-based payment flow with fund freeze and release at the point of lesson completion.
- API integration with a pre-existing backend: The backend was built on the Bagisto e-commerce framework — a Laravel-based system not originally designed for fitness scheduling. Mapping fitness-specific concepts (lesson slots, trainer availability, recurring bookings) onto a commerce API required interpretation, custom logic, and close coordination between frontend and backend teams throughout the project.
- Adaptive design across three surfaces: Every view — from the trainer dashboard to the booking flow to the lesson catalogue — had to function cleanly on desktop, mobile, and tablet, with a design that hadn't been fully resolved for all three surfaces when development began.
Have some question?
Let’s meet and talk.
Solution
WWG structured the project in four phases — environment setup and API review, core module development, QA, and deployment — with two-week Scrum sprints keeping delivery predictable and client visibility high throughout.
Dual-Role Platform ArchitectureThe application was built around two distinct authenticated experiences sharing a common codebase. Trainer accounts access lesson creation and management, a weekly agenda view, client inquiry handling, and earnings tracking through a wallet interface. Client accounts access trainer discovery, a course catalogue with filtering and wishlist functionality, a booking flow, and a personal session history. Role-based routing and permissions enforce separation at both the interface and API level.
The booking system was one of the most technically involved modules on the project. Clients can book individual lessons or recurring group sessions, selecting frequency and duration. The backend generates recurring lesson instances automatically up to 12 months ahead, checking trainer availability at each slot before creation. Payment is handled via a wallet freeze mechanism — funds are reserved at booking and released to the trainer upon session completion, with Stripe handling top-ups and Zustand managing cart and wallet state on the frontend.
Post-Demo UX Improvements
Following an internal product demo, WWG identified and proposed a series of UX enhancements that were incorporated before final delivery. These included showing exact booking dates in the calendar rather than abstract day-of-week selections, displaying trainer available time slots directly in the booking UI, surfacing current wallet balance inside the cart, adding a lesson history section to the wallet view, and extending the agenda with week-by-week navigation. Each improvement addressed a real usability gap identified during real-usage review.
Booking confirmations and session reminders are delivered via AWS Pinpoint (SMS) and email, using templates managed in the backend. Notification logic checks for sandbox restrictions and usage limits, with error logging in place to surface delivery failures during QA.
Technology Stack
Next.js / React
Frontend framework with server-side rendering for performance and SEO across all catalogue and trainer profile pages.
TypeScript
End-to-end type safety across components, API calls, and state management, reducing integration errors across the dual-role codebase.
Tailwind CSS
Utility-first styling enabling rapid, consistent UI development across all three adaptive surfaces — desktop, tablet, and mobile.
Zustand
Lightweight state management with persistence for cart, wallet, and session state — preventing data loss on page reload.
Bagisto API
Laravel-based e-commerce backend adapted to handle fitness-specific entities: lesson slots, trainer schedules, recurring bookings, and subscription packages.
Content management for course descriptions, category taxonomy, and platform copy — decoupled from the core booking logic.
Stripe
Payment processing for wallet top-ups and subscription purchases, with fund freeze and release tied to lesson completion events.
AWS S3 + Pinpoint
S3 for media storage (trainer photos, course assets); Pinpoint for SMS booking confirmations and session reminders.
Vercel
Frontend deployment platform providing CI/CD, edge caching, and environment management across staging and production.
Key Technical Challenges
The Bagisto backend was built as a general-purpose e-commerce framework. Concepts like trainer availability windows, recurring lesson generation, slot-level conflict detection, and wallet freeze-release cycles don't exist natively in a shopping cart model. Bridging this gap required close collaboration between the frontend team and backend, extensive API mapping work, and custom logic on both ends — including building a recurring lesson generator that creates instances up to 12 months ahead while respecting existing bookings.
Rather than charging at the point of booking completion, Wellcam.fit uses a fund freeze model: when a client books a session, the cost is reserved from their wallet balance and held until the lesson takes place. Only then are funds released to the trainer. This required implementing a multi-state transaction lifecycle — freeze, hold, release, and transfer — with Stripe handling top-ups and the backend enforcing balance sufficiency checks before any booking is confirmed.
Design specifications were not fully resolved for all three platform surfaces when development began. The team worked with what was available, flagged gaps systematically through a structured Q&A process with the client, and made pragmatic decisions — defaulting to the simpler of two ambiguous design interpretations and flagging decisions for client review — to keep delivery on schedule without accumulating rework debt.
Results
-
Full Marketplace Delivered in 10 Weeks
From environment setup through deployment on Vercel — a fully functional two-sided fitness platform covering trainer management, client booking, wallet payments, recurring scheduling, and cross-browser QA. -
Booking Complexity Handled End-to-End
Individual sessions, group lessons, and recurring bookings with automatic 12-month generation — all tied into a single, consistent checkout and wallet flow with package discount incentives built in. -
UX Improvements Shipped Before Launch
Nine UX enhancements identified through internal review and post-demo feedback were scoped, designed, and delivered — including date-explicit booking, available time slot display, and trainer agenda navigation. -
Adaptive Across All Devices
Full cross-browser and cross-device compatibility verified through structured QA — the platform performs consistently on desktop, tablet, and mobile across all major browsers.
