How to Build Scheduling app with V0

1// Paste this prompt into V0's AI chat:
2// Build a scheduling app. Create a Supabase schema with:
3// 1. availability: id (uuid PK), user_id (uuid FK), day_of_week (integer CHECK 0-6), start_time (time), end_time (time), timezone (text), created_at (timestamptz)
4// 2. event_types: id (uuid PK), user_id (uuid FK), name (text), slug (text UNIQUE), duration_minutes (integer), buffer_minutes (integer DEFAULT 0), color (text), description (text), is_active (boolean DEFAULT true), created_at (timestamptz)
5// 3. bookings: id (uuid PK), event_type_id (uuid FK), host_id (uuid FK), guest_name (text), guest_email (text), guest_phone (text), start_time (timestamptz), end_time (timestamptz), status (text CHECK confirmed/cancelled/completed/no_show), google_event_id (text), notes (text), created_at (timestamptz)
6// 4. calendar_connections: id (uuid PK), user_id (uuid FK), provider (text CHECK google/outlook), access_token (text), refresh_token (text), token_expires_at (timestamptz), created_at (timestamptz)
7// RLS: users manage own availability and event types. Bookings: host can read all, guests can insert (public booking page needs no auth for INSERT).
8// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a public booking page at app/[username]/[slug]/page.tsx.
3// This page requires NO authentication — guests book directly.
4// Requirements:
5// - Left side: event type Card showing name, duration, description, host name
6// - Right side: shadcn/ui Calendar for date selection
7// - Below calendar: available time slots as a grid of Buttons
8//   - Slots come from GET /api/bookings/available-slots?event_type_id=X&date=YYYY-MM-DD&timezone=X
9// - On slot click: slide to confirmation form with guest_name Input, guest_email Input, guest_phone Input, notes Textarea
10// - "Confirm Booking" Button calls Server Action createBooking()
11// - After booking: success Card with date, time, and "Add to Calendar" link
12// - 'use client' for Calendar and slot selection
13//
14// Available slots API at app/api/bookings/available-slots/route.ts:
15// - Fetches host's availability for the selected day_of_week
16// - Generates all possible slots at duration_minutes intervals
17// - Fetches existing bookings for the date (include buffer_minutes before/after)
18// - Subtracts conflicts
19// - Converts remaining slots to guest's timezone using date-fns-tz
20// - Returns array of { start: string, end: string } in guest timezone
21//
22// Use shadcn/ui Calendar, Card, Button, Input, Textarea, Badge

1// Paste this prompt into V0's AI chat:
2// Build availability and event type management pages.
3//
4// Availability page at app/dashboard/availability/page.tsx:
5// - 7 rows for each day of week (Sunday-Saturday)
6// - Each row: day name, Switch to enable/disable, start_time Select, end_time Select (15-min increments)
7// - Timezone Select at top (with common timezones: US/Eastern, US/Pacific, Europe/London, etc.)
8// - Server Action updateAvailability() saves all 7 days at once (delete + re-insert pattern)
9// - Visual weekly calendar preview showing enabled hours
10// - Use shadcn/ui Switch, Select, Card, Button
11//
12// Event types page at app/dashboard/event-types/page.tsx:
13// - Grid of event type Cards showing name, duration Badge, buffer info, color dot
14// - Switch on each Card to toggle is_active
15// - "Create Event Type" Button opens Dialog:
16//   - name Input, slug Input (auto-generated from name), duration_minutes Select (15/30/45/60/90/120)
17//   - buffer_minutes Select (0/5/10/15/30), color picker, description Textarea
18// - Each Card has booking link: copy to clipboard Button showing /[username]/[slug]
19// - Server Actions: createEventType(), updateEventType(), deleteEventType()
20// - Use shadcn/ui Card, Badge, Switch, Dialog, Input, Select, Textarea, Button, Toast

1// Paste this prompt into V0's AI chat:
2// Build Google Calendar integration and a booking dashboard.
3//
4// Google Calendar OAuth at app/api/calendar/google/callback/route.ts:
5// - Handles the OAuth callback: exchanges code for tokens
6// - Stores access_token, refresh_token, token_expires_at in calendar_connections
7// - Redirects back to dashboard with success Toast
8//
9// Calendar sync at app/api/calendar/sync/route.ts:
10// - Called after booking creation
11// - Fetches host's Google Calendar tokens from calendar_connections
12// - Refreshes token if expired
13// - Creates a Google Calendar event with booking details (guest name, email, time)
14// - Stores the google_event_id in the bookings row
15//
16// Dashboard at app/dashboard/page.tsx:
17// - Weekly calendar view showing all confirmed bookings as colored blocks
18// - Upcoming bookings list: Table with guest_name, event_type Badge, date, time, status Badge
19// - Booking actions: Cancel (Dialog with confirmation), Mark Complete, Mark No-Show
20// - "Connect Google Calendar" Button if no calendar_connections exist
21//   - Links to Google OAuth URL with scope calendar.events
22// - Server Actions: cancelBooking(), updateBookingStatus()
23// - Use shadcn/ui Card, Table, Badge, Button, Dialog, Calendar, Toast
24//
25// Env vars in V0's Vars tab: GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET (server-only, no NEXT_PUBLIC_)
26// NEXT_PUBLIC_APP_URL (needed for OAuth redirect URI and booking page links)