v0 prompt to build a booking / scheduling app
Scheduling apps break on timezones and double-booking, so this prompt makes both explicit: UTC storage with browser-detected display, and a transactional slot check that gives the losing guest a clean retry. v0 produces the public booking page, host availability dashboard, and confirmation flow as one project you can test in the preview.
Last updated
Build a booking app where a visitor picks a time slot from a host's availability. Screens: a public booking page at /book/[username] with a month calendar on the left and that day's open slots on the right, a confirmation step collecting name and email, and a host dashboard at /dashboard for setting weekly availability and reviewing upcoming bookings. Data model in {{database}}: availability_rules (host_id, weekday, start_minute, end_minute) and bookings (id, host_id, starts_at as timestamptz, duration_minutes, guest_name, guest_email, status), with open slots computed on the server from rules minus existing bookings, never stored. Timezones are the core difficulty: store everything in UTC, detect the visitor's timezone from the browser, render slots in it with the timezone name visible above the list, and allow overriding it through a searchable Select. Behaviors: days with no open slots render dimmed and unclickable in the calendar, picking a slot holds it visually while the form completes, and the booking server action re-checks the slot inside a transaction so two simultaneous guests cannot double-book, the loser seeing a slot just taken message with refreshed slots rather than a silent failure. Past slots on the current day are filtered on the server. Confirmation screen: date and time in the guest timezone, an add to calendar link, and a cancel link tokenized by a random id in the URL. Empty state: a host with zero availability rules shows setup instructions on their public page. Acceptance: booking a slot in the v0 preview removes it from the picker immediately, and switching timezones relabels slots without changing which ones are available.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a booking app where a visitor picks a time slot from a host's availability. Screens: a public booking page at /book/[username] with a month calendar on the left and that day's open slots on the right, a confirmation step collecting name and email, and a host dashboard at /dashboard for setting weekly availability and reviewing upcoming bookings. Data model in PostgreSQL: availability_rules (host_id, weekday, start_minute, end_minute) and bookings (id, host_id, starts_at as timestamptz, duration_minutes, guest_name, guest_email, status), with open slots computed on the server from rules minus existing bookings, never stored. Timezones are the core difficulty: store everything in UTC, detect the visitor's timezone from the browser, render slots in it with the timezone name visible above the list, and allow overriding it through a searchable Select. Behaviors: days with no open slots render dimmed and unclickable in the calendar, picking a slot holds it visually while the form completes, and the booking server action re-checks the slot inside a transaction so two simultaneous guests cannot double-book, the loser seeing a slot just taken message with refreshed slots rather than a silent failure. Past slots on the current day are filtered on the server. Confirmation screen: date and time in the guest timezone, an add to calendar link, and a cancel link tokenized by a random id in the URL. Empty state: a host with zero availability rules shows setup instructions on their public page. Acceptance: booking a slot in the v0 preview removes it from the picker immediately, and switching timezones relabels slots without changing which ones are available.
Same task in other tools
Questions about this prompt
How does this prevent two guests booking the same slot?
The booking server action re-verifies the slot inside a database transaction before inserting, so the second guest fails cleanly and sees refreshed slots with an explanation. You can verify it in the v0 preview by racing the same slot from two browser tabs.
How do I change slot length or add buffers between meetings?
Both belong in the server-side slot computation, not the picker. Ask v0 to add duration and buffer_minutes to availability_rules and regenerate the slot function. The calendar and slot list UI stay the same because they only render what the server returns.
Some visitors see slots at wrong times. What is the usual bug?
A client component constructing a local Date from a UTC string somewhere in the picker. Keep all slot math on the server in UTC and send display strings already formatted for the guest timezone, then ask v0 to remove any direct Date construction left in the client.