How to vibe codeBook Like A Boss

Prerequisites

• Node.jsfree

  Runtime environment for Next.js development and package management

• GitHubfree

  Source control and deployment pipeline integration

• 

  Google Developer Accountfree

  Required to configure OAuth credentials for Google Calendar integration

AI coding tools

• Claude Code

  Agentic terminal coding tool capable of scaffolding multi-file database schemas, API routes, and calendar synchronization logic iteratively.

• Cursor

  Ideal for fine-tuning responsive landing page components and booking form UI layouts with real-time diff reviews.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Turso with Drizzle ORM to handle users, booking pages, services, appointments, and calendar tokens.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Set up Drizzle ORM connected to Turso SQLite. Define the database schema with tables for users, booking_pages (slug, title, description, brand color, banner image, custom footer), services (title, duration, price, buffer time), availability_rules (day of week, start time, end time), appointments (client name, client email, start time, end time, status, payment status), and calendar_connections (provider, access_token, refresh_token, token_expires_at). Include proper foreign key constraints, indexes on slug and appointment dates, and create an initial migration script. Verify the setup with a local test script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Dashboard

   Implement authentication using better-auth and build an administrative dashboard where users can manage their profile and configure basic settings.

   Integrate better-auth into the Next.js app supporting email/password and Google OAuth login. Build an authenticated dashboard layout with a sidebar navigation ('Pages', 'Services', 'Appointments', 'Settings'). Create a settings page where users can update their custom URL slug, profile avatar, biography, banner image, and brand primary color. Ensure all database queries are scoped to the authenticated user session ID. Add proper input validation using Zod for all form submissions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Booking Page Builder & Renderer

   Build the public-facing booking page renderer that displays services, bios, FAQs, testimonials, and rich media based on the user's slug.

   Create a dynamic public route at app/[slug]/page.tsx that fetches the user profile and services from Turso. Build modular section components for the booking page: a header with avatar and bio, a service selection list with pricing badges, an FAQ accordion component, a testimonials grid, and a rich media video/photo showcase. Ensure the page is fully responsive, matches the user's custom brand color via inline CSS variables, and includes OpenGraph meta tags for sharing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Two-Way Calendar Sync Engine

   Implement OAuth connections for Google Calendar and Microsoft Outlook, enabling token management and fetching busy intervals to prevent double bookings.

   Implement OAuth callback routes for Google Calendar and Microsoft Graph APIs. Store encrypted access and refresh tokens in the calendar_connections table. Write a background service utility using Luxon that fetches free/busy calendar events across all connected accounts for a given date range. Handle automatic token refresh when access tokens expire. Create a robust conflict-checking function that merges internal appointments and external calendar busy blocks into a single availability array.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Availability & Timezone Scheduling Slot Engine

   Build the scheduling slot calculation engine that respects buffer times, cutoff dates, and client timezones.

   Build a robust slot-generation API endpoint (GET /api/availability?slug=X&serviceId=Y&date=Z) that accepts a target date and client timezone. The engine must: 1. Read host availability rules for that day of the week. 2. Apply buffer times before and after appointments. 3. Intersect available windows with fetched Google/Microsoft busy intervals. 4. Filter out past times and respect maximum advance booking cutoff limits. 5. Convert all slot intervals cleanly into the client's requested timezone without daylight saving shift errors. Return an array of available start time strings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Booking Checkout & Payment Integration

   Integrate Stripe checkout to handle upfront payments for paid services, coupon codes, and automated appointment confirmation.

   Implement a checkout flow when a client selects a paid service slot. Collect intake form responses (custom questions defined by the host), then create a Stripe Checkout session passing metadata for the appointment ID and user ID. Set up a Stripe webhook handler route (/api/webhooks/stripe) that verifies signatures, updates the appointment payment_status to 'paid', triggers an event on the external calendar to block the time slot, and sends confirmation emails via Resend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Automated Notifications & Reminders

   Set up automated email and SMS reminders using Resend and Twilio to minimize client no-shows.

   Implement background cron jobs or scheduled webhook triggers using Cloudflare Cron Triggers to check for upcoming appointments occurring in 24 hours and 1 hour. For each upcoming appointment, dispatch an automated notification email via Resend containing calendar invite links, and an SMS reminder via Twilio if the client provided a phone number. Include secure tokenized links in the emails allowing clients to independently cancel or reschedule their booking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Book Like A Boss