Introduction

JERAI FITNESS is a modern, ClassPass-style gym booking platform built using Emergent. It demonstrates how a service-based booking application with multiple locations, membership tiers, and payment processing can be created from prompts without compromising on user experience, visual polish, or business functionality.

This tutorial walks through the final JERAI FITNESS experience: a sleek fitness booking app with location-based service browsing, category filters, detailed class pages, membership management, and a professional, energizing design system.

At its core, JERAI FITNESS showcases three key principles:

• Prompt-driven product development for service businesses From gym services to membership plans, every feature was built through natural conversation, proving that complex booking flows, Stripe integrations, and multi-tier pricing can emerge from clear prompts.

• Design-first thinking with clean, professional UI patterns The interface prioritizes clarity and trust. Poppins typography, thoughtful spacing, and a restrained color palette create an experience that feels premium without being intimidating—essential for converting visitors into members.

• Practical business logic that scales, not complicates Membership benefits automatically apply at checkout. Free classes for members, tiered discounts, and usage tracking all work seamlessly, showing how real-world business rules can be implemented without overwhelming the user or the codebase.

By the end of this tutorial, you’ll understand how to use Emergent to build a real real-estate discovery product, not a wireframe or demo.

Problem Statement and Proposed Solution

The Problem

Most gym and fitness booking platforms struggle with at least one of the following:

• Confusing class schedules scattered across locations Members waste time navigating between different pages or apps to find availability at their preferred gym.

• Pricing that lacks transparency Session costs, membership benefits, and discounts are often hidden until checkout, eroding trust before the booking is complete.

• Membership plans with unclear value Tiers are presented with marketing jargon instead of concrete benefits, leaving users unsure which plan actually fits their needs.

• Dated interfaces that feel more like admin tools than consumer apps Clunky calendars, walls of text, and inconsistent design make booking feel like a chore rather than motivation.

• Disconnected payment and scheduling flows Users are forced through multiple steps, external redirects, or separate systems just to book a single class.

Fitness seekers want simplicity, transparency, and momentum when booking their next session, not friction that kills their motivation before they even start.

The Solution

JERAI FITNESS shifts the focus from gym administration to session discovery, letting users explore classes and services without complex scheduling. All three locations are brought into a single, unified view, so members instantly know what’s available and where no tab switching is required.

Classes are showcased visually with clear categories, making it easy to find anything from high-energy HIIT to calming yoga. Membership benefits appear right at booking, clearly showing what’s free or discounted. Scheduling and payments work seamlessly, eligible members book instantly, others pay in one smooth step all within a clean, energizing interface that drives users from browsing to booking effortlessly.

Emergent Stack Used

• Frontend: React, Tailwind CSS, shadcn/ui, React Router

• Backend: FastAPI, MongoDB with Motor async driver

• Payments: Stripe via Emergent Integrations for bookings and memberships

• Authentication: JWT-based auth with bcrypt password hashing

• Fonts: Poppins via Google Fonts

Learning Outcomes

By completing this tutorial, you will be able to:

• Turn a service business concept into a fully functional booking platform

• Design a multi-location discovery experience with intuitive filtering

• Create rich service cards and detailed class pages that convert browsers to bookers

• Implement tiered membership plans with automatic benefit application at checkout

• Integrate Stripe for seamless payments across bookings and subscriptions

• Build a professional UI that feels energizing yet trustworthy

• Ship a real-world fitness app that handles scheduling, payments, and memberships end-to-end

Step 0: Prerequisites

Accounts & Access

Emergent account
Emergent LLM access (built in)

Step 1: Initial Prompt and Scope Definition

User Input

Build a gym booking MVP.

Create a single-brand fitness platform where customers browse services across 3 gym locations, book sessions, and manage memberships.
 
Include location-based service browsing with category filters, a 3-tier membership system ($29/$59/$99/mo) with automatic booking discounts, Stripe integration for payments and subscriptions, customer dashboard for bookings, and admin dashboard for service management

Expected Response

Emergent does not immediately jump into building.
Instead, it clarifies scope, UX direction, and feature priorities:

Before I start building the gym booking MVP, I'd like to clarify a few details:

1. What type of services will be offered? a. Professional services (consultants, tutors, coaches) b. Beauty & wellness (salons, spas, fitness) c. Home services (cleaning, repairs, maintenance) d. General/multi-category marketplace

2. For AI recommendations, which LLM provider would you prefer? a. OpenAI GPT-5.2 (recommended) b. Claude Sonnet 4.5 c. Gemini 3 Flash d. Use Emergent LLM key (universal key for all providers)?

3. For payments (Stripe integration), should I: a. Use the test key already available in the environment b. You'll provide your own Stripe API keys)

4. Any specific design preferences? a. Dark theme b. Light theme c. Professional/corporate look d. Modern/vibrant look e. Leave it to design agent)

Please provide your choices so I can tailor the implementation perfectly

Best Practice

Discovery apps become complex quickly.
Clarifying scope early prevents overbuilding and keeps the experience focused.

Step 2: Multi-Location Service Discovery

Users can browse fitness services across 3 gym locations and refine results using filters such as:

• Location (Downtown, Westside, North Campus)

• Service category (Personal Training, Group Classes, Nutrition, Assessments, Boxing & MMA, Swimming)

• Price range (slider from $10 to $200)

• Session duration (displayed on each service card)

• Service ratings (star ratings visible on cards)

• Keyword search (search by class name, trainer, or location)

Quick location navigation pills let users jump directly to any gym location with smooth scrolling.

Advanced price filters are collapsible so the main interface stays clean and focused on service discovery.

Step 3: Membership System With Dual-Payment Integration

• 3-Tier Membership System - Basic ($29), Premium ($59), Elite ($99) monthly plans with auto-applied booking discounts (5%, 10%, 15%)

• Dual Payment Integration - Stripe-powered one-time bookings and recurring subscriptions in a unified payment flow.

Step 4: Smart Booking Flow

Each booking flow is designed for seamless conversion.

The multi-step process includes:

• Service details with duration and base price

• Date and time selection

• Real-time price calculation

• Membership discount auto-applied (5%, 10%, or 15% off)

• Final price preview before payment

• Stripe checkout integration

• Instant booking confirmation

Progress indicators keep users informed at each step, and smooth transitions make the experience feel effortless.

Step 5: Design System

The design emphasizes:

• Poppins font family for consistent, professional typography

• Generous spacing and whitespace for breathability

• Clear visual hierarchy with bold headings and subtle body text

• Consistency across screens using shadcn/ui component library

• Glass morphism effects on navigation for modern depth

• Card-based layouts for service and membership displays

• Rounded pills and badges for categories and locations

Deployment

Once complete, deployment is handled directly through Emergent.

Click Deploy, wait for Emergent to finalize hosting, and share the production URL instantly.

If you run into issues, refer to the Emergent Deployment Guide for troubleshooting.

Wrapping up

You now have a fully functional gym booking platform that transforms service discovery across multiple locations with intelligent location navigation, a 3-tier membership system that automatically rewards loyal members with progressive discounts (5%, 10%, 15%), and a dual payment engine that seamlessly handles both one-time bookings and recurring subscriptions through Stripe, all wrapped in a professional, modern design system that makes fitness services feel premium and accessible.

Try out our finished version over at https://fitness-scheduler-17.emergent.host/

Recap

You built JERAI FITNESS, a gym booking platform with:

• Multi-location service discovery across 3 gym branches

• Smart location navigation with instant jump-to-section pills

• Rich service cards with images, ratings, duration, and pricing

• 3-tier membership system with auto-applied discounts (5%, 10%, 15%)

• Seamless booking flow with real-time pricing and Stripe integration

• Dual payment system for one-time bookings and recurring subscriptions

• Customer and admin dashboards for bookings and analytics

• Category-based filtering across 6 fitness service types

• Professional, modern design with Poppins typography and glass morphism effects

Key Learnings

The key learning from this project is that booking-focused platforms are most effective when they eliminate friction at every step, allowing users to discover, select, and book services without hesitation.

Combining location-based navigation with category filtering creates an intuitive discovery experience that helps users find exactly what they need quickly. Automatic membership discount application adds the most value when it works invisibly in the background, showing users instant savings without requiring manual input or code entry.

Dual payment integration (one-time bookings + recurring subscriptions) in a unified Stripe flow proves that handling multiple payment models doesn't have to complicate the user experience when properly abstracted. Consistent design through a component library (shadcn/ui) builds trust and makes the platform feel professional and cohesive.

Focusing on a single-brand platform rather than a multi-provider marketplace simplified complexity significantly, allowing for tighter integration, better user experience, and faster development, proving that intentionally reducing scope often leads to a more polished, production-ready product that users actually want to use.

Possible Future Extensions

• Membership usage analytics and workout history tracking

• Class capacity indicators and waitlist management

• Trainer profiles with ratings and direct messaging

• Push notifications for upcoming sessions and reminders

• Mobile app version for iOS and Android

Final Demo

Check out the finished Gym booking platform below:

If you liked the app, share feedback with the team on X or Discord to unlock more behind-the-scenes builds and experiments.

Happy building!