Cal.com

Prerequisites

• Node.jsfree

  Runtime environment for Next.js application stack

• GitHubfree

  Code repository hosting and version control

• 

  Google Developer Consolefree

  Required to set up OAuth credentials for Google Calendar integration

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex full-stack multi-file applications and handling test-driven loops.

• Cursor

  Ideal for fine-tuning frontend scheduling UI components and inspecting diffs interactively.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Prisma with Supabase PostgreSQL, and define core models for Users, EventTypes, Bookings, and Availability.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Integrate Prisma ORM connected to a Supabase PostgreSQL instance. Build out the relational database schema in prisma/schema.prisma with models: User (id, email, username, timezone), EventType (id, userId, title, slug, lengthInMinutes, description, price), Availability (id, userId, dayOfWeek, startTime, endTime), and Booking (id, eventTypeId, userId, attendeeName, attendeeEmail, startTime, endTime, status, uid). Ensure proper foreign key constraints, indexes on slug and userId, and run the initial migration.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Dashboard

   Implement authentication using Supabase Auth and construct a dashboard interface for users to manage their profiles, custom links, and basic settings.

   Implement authentication in Next.js using Supabase Auth with email and password sign-up. Create protected dashboard routes under /settings and /dashboard. Build a clean UI using Tailwind CSS and Shadcn UI components where a user can view their unique booking URL (e.g., app.domain.com/username), edit their default timezone, and manage basic account parameters stored in the database User table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Event Type Management & Availability Rules

   Build the event type builder allowing users to configure meeting lengths, descriptions, buffer times, and recurring weekly availability.

   Build an event type management interface in the dashboard. Allow users to create, update, and delete event types (title, duration in minutes, slug, price, buffer times before and after events). Implement an availability matrix component where users can define working hours per day of the week (e.g., Monday 09:00 to 17:00). Store these rules in the database and handle validation so overlapping ranges cannot be saved.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Public Booking Page & Timezone-Aware Slot Engine

   Develop the public booking route that renders available time slots dynamically by calculating user availability, existing bookings, and visitor timezone offsets.

   Create a dynamic public booking route at /[username]/[eventSlug]. Build a responsive calendar and time slot selection view. Implement a robust backend slot-generation algorithm that takes a user's weekly availability rules, checks existing conflicting bookings in the database, accounts for buffer times, detects the visitor's local timezone via Intl.DateTimeFormat, and renders available bookable slots in 15- or 30-minute intervals. Ensure daylight saving time shifts are correctly calculated using date-fns-tz.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Booking Creation & Email Notification Pipeline

   Handle booking submissions, enforce transaction locking against double-booking races, and trigger automated confirmation emails via Resend.

   Implement the booking confirmation handler when a visitor selects a slot and submits their name and email. In a database transaction, re-verify slot availability to prevent race conditions and double bookings. Create a new Booking record with status 'ACCEPTED'. Integrate the Resend API to send automated email confirmations to both the host and the attendee containing meeting details, cancellation links, and ICS calendar invites.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Google Calendar Integration

   Integrate Google Calendar OAuth flow to read external calendar busy times and insert confirmed bookings into the user's primary calendar.

   Implement Google Calendar OAuth connection in settings. Store OAuth refresh and access tokens securely in a CalendarCredentials database model. Build a background sync utility that queries the Google Calendar FreeBusy API for a given date range when rendering booking slots, merging external calendar busy periods with internal app bookings. Automatically create a calendar event via the Google Calendar API when a new booking is successfully confirmed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cal.com