How to Clone Calendly

Create a full-stack Calendly-style scheduling app called BookBeam using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres later).

## What to build
A scheduling-link SaaS: members define event types and weekly availability; invitees book through a public page at /[username]/[eventSlug] without an account. Freemium: free = 1 event type, Pro ($12/mo, mock the upgrade) = unlimited.

## Key screens
- Landing page with pricing table and a live-looking demo booking widget
- Auth: email/password credentials, then an onboarding step to pick a username and timezone
- Dashboard: event type cards with copy-link buttons and active toggles
- Event type editor: title, slug, duration, description, location (video link / phone / in-person), buffers, minimum notice
- Availability editor: 7-day grid with multiple time ranges per day, plus a date-override list
- Public booking page: month calendar (available days highlighted) → time slots column in the invitee's auto-detected timezone → name/email form → confirmation with .ics download and cancel/reschedule links
- Bookings page: upcoming/past tabs with cancel and reschedule actions

## Schema (Prisma)
User (id, name, email, username unique, timezone, plan), EventType (id, userId, title, slug, durationMin, description, locationType, locationValue, bufferBefore, bufferAfter, minNoticeHours, isActive), AvailabilityRule (id, userId, dayOfWeek, startMinute, endMinute), DateOverride (id, userId, date, isUnavailable, startMinute, endMinute), Booking (id, eventTypeId, hostId, inviteeName, inviteeEmail, inviteeNote, startAt, endAt, inviteeTz, status, cancelToken unique)

## Logic that must work
- lib/slots.ts: pure function getAvailableSlots(eventType, rules, overrides, existingBookings, dateRange, inviteeTz) - returns UTC slot starts; unit-testable, used by both the booking page and the booking API
- All datetimes stored as UTC; convert for display with the invitee's IANA timezone (use date-fns-tz)
- The booking POST re-validates the slot server-side (rules + overlap check) before insert - never trust the client's slot list
- Overlap rule: a new booking conflicts if startAt < existing.endAt AND endAt > existing.startAt for the same host, including buffer padding
- Cancel/reschedule pages live at /booking/[cancelToken] - no login; reschedule shows the same slot picker and atomically swaps the times
- Generate a valid .ics file for the confirmation download
- Slot computation runs server-side per selected month; days with zero open slots render greyed-out in the calendar
- Booking creation logs confirmation emails (host + invitee) to a dev /outbox page so the flow is verifiable without an email provider

## Nice touches
- Copy-link buttons on event type cards with a 'Copied!' toast
- Warning banner on the dashboard if the user has an active event type but no availability rules, linking to the editor
- A /demo route that deep-links straight to jane's intro-call booking page for instant testing

## Style
Clean SaaS look: white canvas, #2563EB primary, slate text, rounded-xl cards, Inter font, skeleton loaders while slots compute. The booking page must be flawless on mobile - slot buttons full-width, confirm button sticky at the bottom.

Seed with 2 demo users (jane and marco), 3 event types each, weekday availability 9–17 with a lunch gap, 2 date overrides, and 10 bookings spread over the next two weeks so the slot logic is visibly working.

You are building a production-quality Calendly clone called BookBeam. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth)
- date-fns + date-fns-tz for all time math - store UTC, render in IANA timezones, never use raw Date arithmetic across DST boundaries
- Resend for transactional email; Stripe for Pro subscriptions and paid event types; ics package for calendar attachments

## Architecture requirements
- Route groups: (marketing), (app) for the authed dashboard, and a public /[username]/[eventSlug] booking route - the booking route must work logged-out and be server-rendered for fast first paint
- lib/scheduling/slots.ts is the single source of truth for slot generation: inputs are availability rules, date overrides, existing bookings, buffers, min-notice and timezone; output is UTC instants. 100% unit test coverage on this file, including DST-transition dates and overnight ranges
- All mutations via server actions validated with Zod; the create-booking action re-runs slot validation inside a transaction
- Double-booking defense in depth: app-level overlap check PLUS a Postgres exclusion constraint on (host_id, tstzrange(start_at, end_at)) so concurrent requests cannot both commit

## Data model
users, event_types, availability_rules (day_of_week, start/end minutes), date_overrides, bookings (with cancel_token, invitee_tz, status), subscriptions. Indexes: bookings(host_id, start_at), event_types(user_id, slug unique per user).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth, onboarding flow that claims a unique username and detects timezone
2. Event type CRUD with shadcn forms; availability editor (weekly grid component with add/remove time ranges per day)
3. Slot engine in lib/scheduling - write the unit tests FIRST: weekday rules, buffers, min notice, overrides, timezone rendering, DST edges
4. Public booking page: calendar month view querying available days, slot column, booking form, server action with transactional insert, confirmation page
5. Emails: confirmation with .ics attachment to both parties, cancellation and reschedule notices; cancel/reschedule pages keyed by cancel_token
6. Google Calendar sync: OAuth connect flow, read free/busy to subtract from slots (cache 60s), push confirmed bookings as events, handle token refresh
7. Stripe: Pro subscription via Checkout + customer portal; gate >1 event type behind Pro; optional per-event-type price for paid bookings (collect payment before confirming the slot)
8. Reminders: Vercel cron hitting an API route that sends 24h-before reminder emails idempotently (mark reminded_at)

## Quality bar
- The booking page is the product: target LCP under 1.5s, zero layout shift when slots load, full keyboard navigation
- generateMetadata on booking pages: '[Event] with [Name] - BookBeam' plus OG image; noindex on dashboard routes
- Empty states everywhere: no event types yet, no availability set (with a fix-it CTA), no upcoming bookings
- Rate-limit the public booking action per IP; validate invitee email format server-side and dedupe rapid double-submits
- Accessibility: slot buttons announce date and time to screen readers; calendar is arrow-key navigable
- Seed script: 2 hosts, 3 event types each, realistic availability, 15 bookings including past ones, one host with Google sync mocked

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for a Calendly-style scheduling app called BookBeam. React + Tailwind, shadcn/ui components, lucide-react icons. Calm professional SaaS aesthetic: white background, #2563EB primary, slate-gray text, rounded-xl cards with 1px borders, Inter font.

## Screens to generate

### 1. Landing page
- Sticky header: BookBeam wordmark left, nav (Product, Pricing), Sign in + 'Get started free' button right
- Hero: headline 'Stop emailing about times', subhead, email-capture input + CTA, and a floating mock booking-page card tilted slightly with a visible time-slot grid
- Three-step row (Connect calendar → Set availability → Share your link) with icons
- Pricing: Free vs Pro ($12/mo) comparison cards, Pro highlighted with a ring

### 2. Dashboard - event types
- App shell: left sidebar (Event types, Bookings, Availability, Settings) with active state, top bar with personal link pill (bookbeam.app/jane) and copy button
- Grid of event-type cards: color dot, title, duration badge, location icon, on/off switch, copy-link and edit buttons; dashed 'New event type' card

### 3. Availability editor
- Weekly schedule list: each day row with a toggle, one or more time-range pairs (start/end selects), + button to add a range, trash to remove
- Side panel: buffer before/after steppers, minimum notice select, timezone combobox
- Date overrides section: list of override chips with an 'Add date' calendar popover

### 4. Public booking page (the money screen)
- Three-panel card on desktop: left = host avatar, name, event title, duration with clock icon, location with video icon; middle = month calendar, available days bold with a dot, selected day filled #2563EB; right = scrollable time-slot column, each slot a full-width outline button that splits into time + Confirm on selection
- Timezone selector beneath the calendar (globe icon + searchable dropdown)
- Booking form state: name, email, optional note textarea, Schedule button; confirmation state: green check, summary card, 'Add to calendar' and 'Reschedule' buttons
- Mobile: panels stack vertically; calendar → slots → form as steps with a back arrow; confirm bar sticky at bottom

### 5. Bookings list
- Tabs: Upcoming / Past / Cancelled; rows grouped by date with a left date rail, invitee avatar + name, event type color dot + title, time range, and a kebab menu (Cancel, Reschedule, Copy invitee email)
- Cancelled rows dimmed with a strikethrough time

### 6. Event type editor
- Two-column form: left = title, URL slug with prefix label, description, duration segmented control (15/30/45/60), location select with conditional input; right = live preview of the public booking card updating as you type

### 7. Upgrade modal
- Dialog with a Pro feature checklist (unlimited event types, reminders, remove branding), $12/mo price, #2563EB CTA button and a 'Maybe later' ghost button

Make every screen fully responsive. Use realistic placeholder data - names like 'Intro call', 'Portfolio review', times in both EST and CET, and a believable week of bookings.

Build a scheduling-link app (Calendly model) called BookBeam.

## Entities
- EventType: title, slug, durationMinutes (15/30/45/60), description, locationType (video/phone/in-person), locationValue, color, isActive (boolean), bufferBeforeMin, bufferAfterMin, minNoticeHours, owner (user reference)
- AvailabilityRule: owner (user), dayOfWeek (0–6), startTime, endTime
- DateOverride: owner (user), date, isUnavailable (boolean), startTime, endTime
- Booking: eventType reference, host (user), inviteeName, inviteeEmail, inviteeNote, startAt (datetime, UTC), endAt (datetime, UTC), inviteeTimezone, status (confirmed/cancelled), cancelToken

## Roles & permissions
- Members manage only their own event types, availability rules and bookings
- The public booking page is readable by anyone, including logged-out invitees; invitees create bookings without an account
- Only the host (or someone holding the booking's cancelToken link) can cancel or reschedule a booking
- Admin role: dashboard of total members, bookings per week, and most-booked event types

## Pages
1. Public landing: product pitch, pricing (Free = 1 event type, Pro = unlimited), sign-up CTA
2. Dashboard: my event types as cards with copy-link buttons and active toggles, plus a 'bookings this week' stat
3. Event type editor: all EventType fields with a live preview of the public page
4. Availability: weekly schedule editor (per-day toggle + time ranges) and a date-overrides list
5. Public booking page at /u/[username]/[slug]: host info, month calendar showing available days, time slots for the selected day rendered in the invitee's timezone, then a name/email form
6. Confirmation page: booking summary with add-to-calendar and cancel/reschedule links
7. Bookings: upcoming and past tabs with cancel/reschedule actions
8. Settings: name, username, timezone, plan with a mock upgrade flow

## Rules
- Available slots = availability rules for that weekday, minus date overrides, minus confirmed bookings (padded by buffers), minus anything sooner than minNoticeHours from now
- Reject any booking whose time range overlaps an existing confirmed booking for the same host - re-check at save time, not just in the UI
- Store times in UTC; show the invitee their local timezone (auto-detected, changeable) and show the host their own
- Cancelling frees the slot immediately; rescheduling cancels the old booking and creates a new one with the same cancelToken
- Free-plan members can have only 1 active event type; activating a second prompts an upgrade
- Send a confirmation email to host and invitee on booking, and notices on cancel/reschedule

## Look & feel
Professional and calm: white background, royal blue (#2563EB) primary buttons, slate-gray text, rounded-xl cards, Inter-style sans-serif. The booking page must feel effortless on mobile - big tappable slot buttons and a sticky confirm bar.

Seed with 2 sample members who have 3 event types each, weekday availability with a lunch break, and 10 upcoming bookings so the calendar visibly blocks taken slots.