How to Build a Booking Platform with Lovable

1Create a Supabase schema for a booking platform.
2
3Tables:
4- providers: id (uuid pk, references auth.users), display_name (text), bio (text), slug (text unique, URL-safe), timezone (text, IANA format e.g. 'America/New_York'), slot_duration_minutes (int default 30), buffer_minutes (int default 0, added after each booking), avatar_url (text), created_at
5- availability_templates: id (uuid pk), provider_id (references providers), day_of_week (int, 0=Sunday through 6=Saturday), start_time (time, e.g. '09:00'), end_time (time, e.g. '17:00'), is_active (bool default true)
6- bookings: id (uuid pk), provider_id (references providers), client_name (text), client_email (text), starts_at (timestamptz), ends_at (timestamptz), notes (text), status (text check: pending|confirmed|cancelled, default 'confirmed'), confirmation_code (text unique, 8 chars uppercase), created_at
7- blocked_dates: id (uuid pk), provider_id (references providers), blocked_date (date), reason (text)
8
9RLS:
10- providers: SELECT public; INSERT/UPDATE where id = auth.uid()
11- availability_templates: SELECT public; INSERT/UPDATE/DELETE where provider_id = auth.uid()
12- bookings: SELECT where provider_id = auth.uid() OR client_email = current_setting('request.jwt.claims', true)::jsonb->>'email'; INSERT public (anyone can book)
13- blocked_dates: SELECT public; INSERT/UPDATE/DELETE where provider_id = auth.uid()
14
15Generate a function generate_confirmation_code() returning text that creates 8 random uppercase alphanumeric characters. Call it as the default for bookings.confirmation_code.

1// supabase/functions/get-available-slots/index.ts
2// Create a Supabase Edge Function that computes available booking slots.
3//
4// Request: GET ?provider_slug=jane-doe&date=2025-06-09&client_timezone=America/Chicago
5//
6// Logic:
7// 1. Fetch provider by slug (get provider.timezone, slot_duration_minutes, buffer_minutes)
8// 2. Check if date is in blocked_dates — if so, return { slots: [] }
9// 3. Get day_of_week from the date (0–6)
10// 4. Fetch availability_templates WHERE provider_id = provider.id AND day_of_week = dow AND is_active = true
11// 5. If no template, return { slots: [] }
12// 6. Generate all slot start times between template.start_time and template.end_time
13//    with slot_duration_minutes + buffer_minutes increments
14// 7. Convert each slot from provider timezone to UTC for the given date
15// 8. Fetch existing bookings for that date: WHERE provider_id = ? AND starts_at::date = date AND status != 'cancelled'
16// 9. Filter out any generated slot that overlaps an existing booking (including buffer)
17// 10. Convert remaining UTC slot times to client_timezone for display
18// 11. Return { slots: Array<{ utc: string, display: string, label: string }> }
19//     where label is like '2:00 PM' and display includes timezone abbreviation
20//
21// Use date-fns-tz (importable via esm.sh) for timezone conversion
22// Return CORS headers for browser access

1Build a public booking page at src/pages/BookingPage.tsx with route /book/:slug.
2
3Step 1 — Date selection:
4- Fetch provider info by slug (display_name, bio, avatar_url, timezone)
5- Render provider Card at the top: avatar, name, bio
6- Render shadcn/ui Calendar component below
7- Disable past dates and Sundays/Saturdays if provider has no weekend availability
8- On date select, call the get-available-slots Edge Function with the selected date and Intl.DateTimeFormat().resolvedOptions().timeZone as client_timezone
9- Show a loading skeleton while slots are fetching
10
11Step 2 — Time slot selection:
12- If slots array is empty, show 'No availability on this date' message
13- If slots are available, render them as a Select (label shows the display-formatted time in client timezone)
14- Add a small note below the Select: 'Times shown in [client timezone name]'
15- A 'Continue' Button becomes active once a slot is selected
16
17Step 3 — Confirmation Dialog:
18- Opens when 'Continue' is clicked
19- Form fields: client_name (required), client_email (required, email format), notes (Textarea, optional)
20- Submit button: 'Confirm Booking'
21- On submit: POST to Supabase bookings table with provider_id, client_name, client_email, starts_at (selected slot UTC), ends_at (starts_at + duration), notes
22- Show success state with confirmation_code in a highlighted Alert: 'Your booking is confirmed. Reference: ABC12345'
23- Do not redirect — keep the confirmation visible

1Build a provider settings page at src/pages/ProviderSettings.tsx (requires auth).
2
3Section 1 — Profile:
4- Form: display_name, bio, slug (validate URL-safe, unique check via Supabase), avatar upload (Supabase Storage), timezone Select (list of 20 common IANA timezones), slot_duration_minutes Select (15/30/45/60 min), buffer_minutes Select (0/5/10/15 min)
5- Show the booking page URL: yourdomain.com/book/{slug} with a copy button
6
7Section 2 — Weekly availability:
8- 7 rows, one per day of week (Sunday through Saturday)
9- Each row: day name, a Switch to enable/disable, start time Select (30-min intervals 6am–10pm), end time Select
10- On change, upsert into availability_templates via supabase.from('availability_templates').upsert()
11- Disabled days show the row grayed out and do not save a template row
12
13Section 3 — Blocked dates:
14- Calendar component for selecting dates to block
15- Selected blocked dates highlight in red on the calendar
16- Click a date to toggle it blocked/unblocked
17- Each blocked date stores a row in blocked_dates
18- Show a list of upcoming blocked dates below the calendar with remove buttons

1Build a provider bookings dashboard at src/pages/ProviderDashboard.tsx.
2
3Requirements:
4- Fetch all bookings for the authenticated provider from the bookings table
5- Separate into two Tabs: 'Upcoming' and 'Past'
6- Upcoming: bookings where starts_at > now() AND status != 'cancelled', sorted by starts_at ASC
7- Past: bookings where starts_at <= now() OR status = 'cancelled', sorted by starts_at DESC
8- Each booking shown as a Card:
9  - Client name and email (with mailto link)
10  - Date and time formatted in provider's timezone
11  - Duration (slot_duration_minutes from provider profile)
12  - Confirmation code as a Badge
13  - Notes if present (truncated to 2 lines with 'Show more' expand)
14  - Status Badge: confirmed=green, cancelled=red
15  - For upcoming confirmed bookings: 'Cancel' Button with AlertDialog confirmation
16- Cancel action: UPDATE bookings SET status = 'cancelled' WHERE id = ?
17- Show total booking count and upcoming count in Cards at the top of the page
18- Add a 'Copy booking link' Button in the page header