Cal.com

Prerequisites

• Node.jsfree

  Required for running Next.js and TypeScript runtime environment.

• GitHubfree

  Source code repository and deployment bridge for hosting platforms.

• 

  Google Cloud Console Accountfree

  Required to set up OAuth credentials for Google Calendar API integration.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file Next.js apps, setting up database schemas, and iterating on API integrations.

• Cursor

  Ideal for fine-tuning frontend Tailwind CSS components and debugging React state interactions.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, Shadcn UI, Prisma ORM, and configure Supabase PostgreSQL database tables.

   Create a new Next.js 14+ application using TypeScript, Tailwind CSS, and App Router. Initialize Prisma with a PostgreSQL provider (Supabase). Create models for User, EventType, Booking, and CalendarCredential. User model needs id, email, name, username, and timezone. EventType model needs id, title, slug, duration, description, and userId. Booking model needs id, eventTypeId, attendeeName, attendeeEmail, startTime, endTime, and status. CalendarCredential needs id, userId, provider ('google' | 'outlook'), accessToken, refreshToken, and expiresAt. Set up a clean directory structure with services/ and components/ folders.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Profiles

   Implement authentication using NextAuth.js and allow users to configure their username, working hours, and timezones.

   Configure NextAuth.js in the Next.js App Router supporting Google OAuth and Email magic links. Add a onboarding wizard where new users pick their unique booking username (e.g., /username) and select their default working hours (e.g., Monday-Friday 9 AM to 5 PM) and default timezone using Intl.DateTimeFormat(). Store user settings in the PostgreSQL database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Event Types Management

   Build the dashboard interface for creating, editing, and listing schedulable event types (e.g. 15min call, 30min review).

   Build a dashboard page at /dashboard/event-types where users can create, edit, and delete event types. Each event type should have a title, URL slug, duration in minutes (e.g. 15, 30, 45, 60), description, and active status. Build a public booking page at /[username]/[eventSlug] that fetches the user and event details, rendering a clean scheduling UI with date and time slot selection in the booker's local timezone.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Google Calendar OAuth & Bi-directional Sync

   Integrate Google Calendar OAuth to pull existing busy slots and automatically push new confirmed bookings back to the host's calendar.

   Implement Google Calendar OAuth flow in settings so users can connect their Google accounts. Store encrypted access tokens and refresh tokens in the CalendarCredential table. Build an availability calculation service that calls the Google Calendar Freebusy API for a given date range, combines it with the user's defined working hours and buffer times, and returns available bookable slots. When a booking is confirmed, programmatically insert an event into the host's Google Calendar using the Google Calendar API.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Booking Engine & Email Notifications

   Finalize the booking transaction workflow, database transaction safety, and transactional confirmation emails via Resend.

   Implement the booking confirmation server action on the public booking page. When an attendee selects a slot and submits their name and email, verify slot availability to prevent double-booking using a database transaction. Create a new Booking record, insert the event into the connected Google Calendar, and send gorgeous HTML confirmation emails to both host and attendee using Resend. Build a /dashboard/bookings page allowing hosts to view upcoming bookings, cancel them, and automatically remove them from Google Calendar.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cal.com