How to vibe codeYouCanBookMe

Prerequisites

• Node.jsfree

  Required runtime for running the full-stack Next.js application framework.

• GitHubfree

  Source code management and continuous deployment pipeline integration.

AI coding tools

• Cursor

  Ideal for iterative frontend development of booking pages, form editors, and calendar views with fine-grained diff review.

• Claude Code

  Powerful terminal coding agent for scaffolding complex database schemas, API routes, and calendar synchronization logic.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and implement user authentication using better-auth.

   Create a new Next.js 16 project with TypeScript and Tailwind CSS 4. Set up better-auth with email/password authentication backed by a Turso SQLite database using the libSQL client. Define database schemas in a `db/schema.ts` file for users, booking_pages (id, userId, slug, title, description, duration, bufferTime, timezone, price), appointment_types, and bookings (id, pageId, bookerName, bookerEmail, startTime, endTime, status, stripePaymentId). Ensure all foreign keys are properly indexed and establish clean environment configuration templates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Booking Page Builder and Management Dashboard

   Build an administrative dashboard allowing users to create, configure, and customize their public booking pages, meeting durations, and custom intake form questions.

   Build a responsive admin dashboard in Next.js under `/dashboard`. Include a list of user booking pages and a multi-tab editor interface to configure page details: slug, title, description, meeting duration in minutes, buffer times before/after, price, and custom intake form questions stored as JSON. Implement server actions to create, update, and delete booking pages with proper input validation using Zod.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Calendar Provider Integration and Slot Calculation Engine

   Implement OAuth connections for Google Calendar and Microsoft Outlook, securely store access tokens, and build the availability calculation engine that merges working hours with busy calendar events.

   Implement OAuth callback routes for Google Calendar and Microsoft Graph APIs. Store encrypted OAuth tokens in a `calendar_connections` table linked to the user. Build an availability calculation engine service that takes a date range, fetches existing events from connected external calendars via API, respects user-configured working hours and buffer times, subtracts busy intervals, accounts for timezone shifts, and returns a list of available bookable time slots for a given booking page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Public Booking Flow and Timezone Rendering

   Create the public-facing booking page where clients can select a timezone, pick an available time slot from the calculated slots, and complete intake form questions.

   Build a public booking page view at `/[username]/[slug]`. Include a dynamic timezone selector that automatically detects the booker's local timezone. Fetch and render available time slots grouped by day in a clean, interactive calendar grid. When a slot is clicked, display an intake form capturing the booker's name, email, and custom questions configured for that page. Validate slot availability on submission to prevent double-booking race conditions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Stripe Payments and Calendar Event Creation

   Integrate Stripe checkout for paid appointment types and implement backend logic to push confirmed bookings directly into the host's external calendar.

   Extend the booking flow to handle paid appointment types using Stripe Checkout. When a page has a non-zero price, initiate a Stripe Checkout session upon form submission. Implement a Stripe webhook handler (`/api/webhooks/stripe`) that listens for `checkout.session.completed`. Upon successful payment confirmation, automatically create a corresponding calendar event on the host's connected Google/Microsoft calendar via their respective APIs, store the booking record in Turso, and transition the booking status to confirmed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Automated Notifications and Reschedule Flows

   Set up automated confirmation emails using Resend and provide secure rescheduling/cancellation tokens for booked appointments.

   Configure Resend email service to send automated confirmation emails to both the booker and the host immediately after a booking is confirmed. Include secure reschedule and cancel action links with encrypted tokens in the email body. Build frontend pages for `/booking/reschedule/[token]` and `/booking/cancel/[token]` allowing booker-initiated changes that update both the local database and the external calendar event accordingly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for YouCanBookMe