How to Build a Booking App with AI in 5 Minutes

What We're Building

A fully functional booking and appointment scheduling app — the kind a salon, consultant, or personal trainer would use. By the end of this tutorial you'll have:

• A calendar view showing available dates and time slots
• A booking form where clients select a service, pick a time slot, and confirm
• A booking confirmation screen with summary and status
• Persistent storage so bookings survive page refreshes (via Supabase)
• User authentication so clients log in before booking (via Clerk)
• A live deployed URL you can share with real customers

Total build time: about 5 minutes for the first working version, plus another 5-10 minutes for Supabase, auth, and polish.

Step 1: Write an Effective Prompt

The quality of your prompt determines the quality of your app. Be specific about features, layout, and behavior. Here's the exact prompt that works well:

Build a booking and appointment scheduling app for a salon. Include: (1) a weekly calendar view that shows available 30-minute time slots from 9 AM to 5 PM, Monday through Saturday. (2) A list of services (Haircut $30, Color $80, Styling $50, Beard Trim $20) with duration estimates. (3) A booking form where the user selects a service, picks a date and time slot, enters their name and phone number, and confirms. (4) A confirmation screen showing booking summary with date, time, service, and a unique booking reference number. (5) A "My Bookings" section that lists upcoming and past appointments. Use a clean, modern design with a warm color palette. Show booked slots as unavailable.

Paste this into GenMB's prompt field and hit Generate.

Why this prompt works: It specifies exact features (calendar, services with prices, confirmation), exact constraints (30-minute slots, 9-5, Mon-Sat), and exact UI expectations (warm palette, booked slots disabled). Vague prompts like "make a booking app" produce vague results.

Step 2: Choose the Right Framework

GenMB offers three framework options: Vanilla JS, React, and React + TypeScript. For a booking app, React + TypeScript is the best choice:

• State management matters. Booking apps juggle selected dates, time slots, service choices, and form data simultaneously. React's component state handles this cleanly.
• TypeScript catches errors. A booking object has specific fields (date, time, service, client info). TypeScript interfaces enforce that structure and prevent bugs like misspelled property names.
• Component reuse. The calendar grid, time slot picker, service card, and booking summary are natural components that you'll reuse and refine.

Select React + TypeScript from the framework dropdown before generating.

Step 3: Review and Test the Generated App

After GenMB generates your app (typically 15-30 seconds), you'll see a live preview. Test these interactions:

1. Click through dates on the calendar — each day should show its available time slots
2. Select a service and verify the price displays correctly
3. Pick a time slot and confirm it highlights as selected
4. Fill out the booking form and submit — you should see a confirmation screen
5. Check "My Bookings" to verify the appointment appears

If Code Healer runs automatically, let it finish — it's fixing any runtime errors in the generated code. This is one of GenMB's key advantages: you don't need to manually debug.

Step 4: Add Supabase for Persistent Bookings

The generated app stores bookings in memory, so they disappear on refresh. To make bookings persistent, add the Supabase plugin:

1. Open the Plugins panel in the sidebar
2. Search for Supabase and enable it
3. Enter your Supabase project URL and anon key (get these from your Supabase dashboard under Settings > API)
4. Regenerate or refine the app

GenMB injects the Supabase client and rewrites the booking logic to use a bookings table. You'll need to create this table in Supabase:

```sql

create table bookings (

id uuid default gen_random_uuid() primary key,

service text not null,

price integer not null,

date date not null,

time_slot text not null,

client_name text not null,

client_phone text not null,

reference_code text unique not null,

status text default 'confirmed',

created_at timestamptz default now()

);

`

After regeneration, bookings persist in your Supabase database. Booked slots automatically show as unavailable because the app queries existing bookings for each date.

Step 5: Add Clerk for User Authentication

You want clients to log in before booking so they can view their own appointment history. Add Clerk authentication:

1. Open the Plugins panel
2. Search for Clerk and enable it
3. Enter your Clerk publishable key (from the Clerk dashboard)
4. Use chat refinement (next step) to integrate auth into the booking flow

With Clerk enabled, GenMB wraps the app in a ClerkProvider and adds sign-in/sign-up components. The "My Bookings" section now filters by the logged-in user's ID.

Step 6: Deploy to a Live URL

Your app is ready. Deploy it:

1. Click the Deploy button in the top bar
2. Choose a subdomain (e.g., salon-bookings.genmb.com)
3. Click Deploy — GenMB provisions the URL in under 30 seconds

Your booking app is now live. Share the URL with clients, embed it on your website, or connect a custom domain from the deployment settings.

Step 7: Iterate with Chat Refinement

The first version is functional but you'll want to customize it. Use GenMB's chat panel to refine without regenerating from scratch. Here are practical refinements:

Add email confirmations:

After a booking is confirmed, show a message saying "Confirmation sent to your email" and add a field for email address in the booking form.

Add a staff/provider selector:

Add a dropdown to select a stylist (Sarah, Mike, Priya) before picking a time slot. Each stylist should have their own availability.

Improve the mobile layout:

Make the calendar view horizontally scrollable on mobile and stack the service cards vertically.

Add cancellation:

Add a "Cancel Booking" button on each upcoming appointment in My Bookings. Show a confirmation dialog before cancelling. Set the booking status to "cancelled" instead of deleting it.

Each refinement takes 10-20 seconds. GenMB preserves your existing code and plugins while applying the change.

What You've Built

In about 5 minutes of active work, you have a production-ready booking app with:

• Calendar-based scheduling with 30-minute time slots
• Service selection with pricing
• Persistent bookings in Supabase
• User authentication via Clerk
• Booking confirmation with reference numbers
• A live URL anyone can access

From here you can keep refining — add payment processing with the Stripe plugin, integrate Google Calendar sync via chat refinement, or build an admin dashboard to manage appointments. Each addition is a chat message away.