How to vibe codeAppointlet

Prerequisites

• Node.jsFree

  Runtime environment for building and running the full-stack Next.js web application

• GitHubFree

  Version control and repository hosting for your codebase

• 

  Google Developer AccountFree

  Required to configure OAuth credentials and test Google Calendar API synchronization

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding full-stack applications and handling complex algorithmic logic like timezone math

• Cursor

  Ideal AI code editor for inspecting UI components and refining the booking checkout flow in real time

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Prisma ORM with Neon Postgres, and set up better-auth for user authentication.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Initialize Prisma with a Neon PostgreSQL connection string. Design a robust database schema with models for User, EventType (representing meeting types with duration, buffer times, and availability rules), AvailabilitySchedule, Booking, and CustomField. Configure better-auth for email/password and Google OAuth authentication. Ensure all relational foreign keys and indices are properly established for efficient slot querying.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Availability & Timezone Calculation Engine

   Build the core scheduling engine that computes available open slots by factoring in host working hours, existing calendar events, and timezone boundaries.

   Build a robust timezone-aware availability calculation utility in TypeScript using date-fns-tz or Luxon. Create a server action that takes a target date, meeting duration, and host availability rules, then computes all unbooked time slots for that day. Ensure it correctly handles daylight savings time transitions, minimum/maximum notice periods, and hardcoded buffer times before and after meetings. Write unit test cases covering edge cases across UTC and local offsets.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Booking Page & Intake Forms

   Develop a responsive public-facing booking page where clients can select a date, pick an available slot, and fill out customized intake forms.

   Develop a dynamic public booking page route at app/[username]/[eventTypeSlug]/page.tsx. The page should fetch the host's configuration, render a calendar date picker, display available time slots computed from Step 2, and present a checkout form capturing custom fields (text inputs, multiple choice). Implement client-side validation using Zod and React Hook Form. Ensure the UI is fully mobile-responsive.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Booking Concurrency & Database Locking

   Implement atomic transaction locking on the database to prevent race conditions when two clients attempt to book the exact same slot concurrently.

   Implement the booking confirmation server action with strict database concurrency safeguards. When a client submits a booking, use Prisma interactive transactions with SERIALIZABLE or repeatable read isolation levels to verify that the target slot has not been locked or booked by another transaction. If a race condition occurs, catch the conflict and return a clear user-facing error prompting them to select a new time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Calendar API Sync & Email Confirmations

   Integrate Google Calendar OAuth and Microsoft Graph API to push confirmed bookings directly to the host's primary calendar and send email notifications.

   Integrate Google Calendar API OAuth flow allowing hosts to connect their accounts. Upon successful booking creation from Step 4, trigger a server-side routine that calls the Google Calendar API to insert a new event into the host's calendar with meeting details and attendee info. Simultaneously, use Resend to dispatch formatted HTML confirmation emails to both the host and the client. Implement robust error handling and token refresh logic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Host Dashboard & Management UI

   Build a secure dashboard for hosts to view upcoming meetings, filter past bookings, export CSV data, and cancel or reschedule appointments.

   Create a host dashboard at app/dashboard/page.tsx displaying a list of all upcoming and past bookings with filtering and search capabilities. Implement actions for hosts to cancel or reschedule appointments, which should automatically release the slot and notify attendees via Resend. Add a button to export all booking records as a CSV file. Secure the route behind better-auth session checks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Appointlet