How to Build a Scheduling App with Lovable

1Create a Supabase schema for a scheduling app.
2
3Tables:
4- hosts: id (uuid pk, references auth.users), name (text), bio (text), slug (text unique), timezone (text, IANA e.g. 'America/Chicago'), avatar_url (text), created_at
5- meeting_types: id (uuid pk), host_id (references hosts), name (text), duration_minutes (int default 30), description (text), is_active (bool default true), created_at
6- availability_slots: id (uuid pk), host_id (references hosts), day_of_week (int, 0=Sun to 6=Sat), start_time (time), end_time (time), is_active (bool default true)
7- appointments: id (uuid pk), host_id (references hosts), meeting_type_id (references meeting_types), guest_name (text not null), guest_email (text not null), starts_at (timestamptz not null), ends_at (timestamptz not null), guest_notes (text), status (text default 'confirmed' check: confirmed|cancelled), created_at
8
9Critical constraint:
10ALTER TABLE appointments ADD CONSTRAINT no_double_booking UNIQUE (host_id, starts_at) DEFERRABLE INITIALLY IMMEDIATE;
11
12Note: filter WHERE status != 'cancelled' via a partial unique index instead:
13CREATE UNIQUE INDEX appointments_no_double_booking ON appointments (host_id, starts_at) WHERE status = 'confirmed';
14
15RLS:
16- hosts: SELECT public; INSERT/UPDATE where id = auth.uid()
17- meeting_types: SELECT public; INSERT/UPDATE/DELETE where host_id = auth.uid()
18- availability_slots: SELECT public; INSERT/UPDATE/DELETE where host_id = auth.uid()
19- appointments: SELECT where host_id = auth.uid(); INSERT public (any guest can book)
20
21Create an index: CREATE INDEX idx_appointments_host_date ON appointments (host_id, starts_at);

1Build a host setup flow at src/pages/HostSetup.tsx (requires auth).
2
3Step 1 — Profile:
4- Form fields: name, bio (Textarea), slug (Input, validate URL-safe with regex /^[a-z0-9-]+$/), timezone (Select with 15 common IANA options), avatar upload to Supabase Storage
5- Upsert into hosts table on save
6- Show preview URL: /schedule/{slug}
7
8Step 2 — Meeting type:
9- Form fields: name (e.g. '30-minute intro call'), duration_minutes (Select: 15/30/45/60), description (Textarea)
10- Insert into meeting_types table
11- Show success and 'Share your link' button
12
13Step 3 — Availability:
14- Render 7 rows (Sunday through Saturday)
15- Each row: day name, Switch (enabled/disabled), start time Select (30-min intervals), end time Select
16- When Switch is disabled, hide the time selectors
17- On save, delete existing availability_slots for this host and re-insert current configuration
18- Show 'Your schedule is live' confirmation
19
20Also build a combined settings page at src/pages/HostSettings.tsx that shows all three sections on one page for returning hosts updating their setup.

1Build a public scheduling page at src/pages/SchedulePage.tsx with route /schedule/:slug.
2
3On load:
4- Fetch host by slug (name, bio, avatar_url, timezone)
5- Fetch meeting types for this host (show Select if multiple, auto-select if one)
6- Fetch availability_slots for this host
7- Detect guest timezone: const guestTz = Intl.DateTimeFormat().resolvedOptions().timeZone
8
9Date selection:
10- Render shadcn/ui Calendar
11- Disable past dates
12- Disable dates where no availability_slot exists for that day_of_week
13- On date select: compute available time slots
14
15Slot computation (client-side for this simpler version):
161. Find availability_slots row matching selected date's day_of_week
172. Generate slot start times from start_time to end_time with duration_minutes increments
183. Fetch appointments WHERE host_id = ? AND starts_at::date = selectedDate AND status = 'confirmed'
194. Remove slots that overlap any existing appointment
205. Convert remaining UTC slot times to guestTz for display
21
22Time slot display:
23- Show slots as clickable Cards or a vertical list of Buttons
24- Each shows the time in guest timezone (e.g. '2:30 PM')
25- Below the list show: 'Times shown in [guestTz]'
26
27Booking form (shown after slot selected):
28- guest_name (Input, required)
29- guest_email (Input, email, required)
30- guest_notes (Textarea, optional, 'Anything I should know?')
31- Submit inserts into appointments. On unique constraint error (409/23505), show 'That slot was just booked. Please choose another.'
32
33Confirmation state:
34- Show appointment details
35- 'Add to calendar' link (.ics download)
36- Reference number (first 8 chars of appointment UUID, uppercase)

1Build a host appointments dashboard at src/pages/HostDashboard.tsx (requires auth).
2
3Requirements:
4- Fetch all appointments for auth.uid() ordered by starts_at
5- Split into Tabs: 'Upcoming' (starts_at > now(), status = confirmed) and 'Past'
6- Each appointment as a Card:
7  - Guest name (bold) and email (with mailto: link)
8  - Start time formatted in host's timezone: 'Tuesday, June 10 at 2:30 PM EDT'
9  - Meeting type name
10  - Duration as a Badge
11  - Guest notes (if present, shown in a lighter text block)
12  - Reference ID (first 8 chars of id, monospace)
13  - For upcoming: 'Cancel' Button with AlertDialog confirmation
14
15Cancellation:
16- UPDATE appointments SET status = 'cancelled' WHERE id = ?
17- Optimistic update: remove card from Upcoming list immediately
18
19Header area:
20- 'Copy booking link' Button that copies yourdomain.com/schedule/{slug} to clipboard
21- Stats row: total bookings this month, upcoming this week (simple count queries)