How to vibe codeTidyCal

Prerequisites

• Node.jsfree

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

• GitHubfree

  Code repository and deployment source control.

• 

  Google Cloud Console Accountfree

  Required to configure OAuth credentials and Calendar API webhooks for two-way sync.

AI coding tools

• Cursor

  AI code editor ideal for iterating on complex UI components, scheduling grid selectors, and form logic.

• Claude Code

  Agentic terminal tool best suited for scaffolding backend APIs, database schemas, and external OAuth sync workers.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up the core data models for users, event types, availability schedules, and bookings.

   Scramble a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Drizzle ORM to connect to Turso SQLite. Create the database schema tables: users (id, email, name, timezone, custom_slug), event_types (id, user_id, title, duration_mins, price, description, is_active), availability_rules (id, user_id, day_of_week, start_time, end_time), and bookings (id, event_type_id, client_name, client_email, start_time, end_time, status, payment_intent_id). Write migration files and verify connection setup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Dashboard

   Implement authentication using better-auth with email/password and Google OAuth, and build the main user dashboard to manage booking pages and event types.

   Integrate better-auth into the Next.js app supporting email/password and Google OAuth login, storing session data in the Turso database. Build a responsive user dashboard layout where authenticated users can view their unique booking URL (e.g., /app/username), create new event types with custom durations and pricing, and toggle their active status. Include form validation using Zod and React Hook Form.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Calendar Integration & Free/Busy Slot Calculation

   Connect external Google Calendar accounts via OAuth 2.0, fetch calendar events, and implement the booking matrix algorithm to compute available time slots.

   Build a Google Calendar OAuth integration flow allowing users to connect their calendar and store encrypted refresh tokens in the database. Implement a backend service route that queries the Google Calendar Freebusy API for a given date range. Write the scheduling matrix algorithm in TypeScript that takes a user's weekly availability rules, subtracts busy intervals from connected calendars, accounts for buffer times and minimum notice periods, and returns available time slots for any requested date.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Public Booking Page & Slot Selector

   Create the public-facing booking page where clients can view event details, pick a timezone, select an available time slot, and input their details.

   Create a dynamic public booking page route at /[username]/[eventSlug]. Build a responsive UI component that displays the host's profile, event description, and duration. Include an interactive date picker and a time slot grid that fetches available slots for the selected date based on the host's schedule and calendar conflicts. Allow clients to select their local timezone, pick a time slot, and enter their name and email.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Stripe Payments & Confirmation Workflows

   Integrate Stripe Checkout for paid booking types, handle webhook events to confirm bookings, and trigger automated confirmation emails via Resend.

   Integrate Stripe Checkout for paid event types. When a client selects a slot for a paid event, create a Stripe Checkout session with metadata containing the booking details and redirect them to Stripe. Implement a webhook endpoint (/api/webhooks/stripe) that handles checkout.session.completed events, saves the confirmed booking to the Turso database, and calls the Google Calendar API to insert the event into the host's calendar. Send confirmation emails to both host and client using Resend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for TidyCal