How to vibe codeZeeg

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js and backend orchestration services.

• GitHubfree

  Source control and deployment pipeline connector.

• 

  Vapi AccountUsage-based (~$0.05/min)

  Provides the low-latency voice agent infrastructure and telephony trunking.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding multi-file full-stack apps and debugging complex calendar sync state machines.

• Cursor

  Essential for iterative UI development on booking pages and form builders.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, and configure the Neon Postgres connection using Drizzle ORM.

   Create a new Next.js 16 project with Tailwind CSS 4 and TypeScript. Configure Drizzle ORM to connect to a Neon Postgres database. Define the database schema for users, calendar_connections, event_types, bookings, and crm_contacts. Include relational fields for user-to-event types and bookings-to-contacts. Set up better-auth for email/password and Google OAuth authentication. Ensure all migration files are structured correctly and include an initialization script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Calendar Integration & Free/Busy Slot Engine

   Implement OAuth flows for Google and Outlook calendars, along with an availability calculation engine that aggregates busy times.

   Build OAuth integration routes for Google Calendar and Microsoft Graph API to securely store encrypted refresh tokens in the database. Write a robust backend service that queries external calendar free/busy endpoints given a time range and timezone. Implement an availability calculation algorithm that subtracts busy intervals from an organizer's defined weekly availability rules, returning a list of bookable time slots for any given date.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Booking Page UI & Slot Reservation Flow

   Create public booking pages where clients can select a date, time, fill custom questions, and lock in a meeting slot.

   Develop a dynamic public booking page route at `[username]/[eventSlug]` using Next.js App Router. Build client components for a monthly calendar date picker and time slot grid that adapts to the visitor's local timezone. Implement a reservation transaction endpoint that validates slot availability against race conditions in Neon Postgres, creates a calendar event on the host's connected calendar, and records the booking entry in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Voice Agent Integration

   Integrate Vapi to handle inbound phone calls, execute tool calls for checking availability, and automatically book meetings.

   Integrate the Vapi SDK and webhook endpoints to manage AI voice assistant calls. Create a server-side tool definition endpoint that Vapi can invoke during a live voice call to check real-time calendar availability and execute a booking confirmation function. Store call transcripts, audio recordings, and mapped lead data into the crm_contacts table upon call completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05CRM Database, Lead Routing & Notifications

   Build the internal CRM dashboard to view leads, transcripts, and trigger automated confirmation emails via Resend.

   Build a protected CRM dashboard route listing all booked contacts, call transcripts, and meeting statuses. Implement lead routing rules based on custom questionnaire attributes. Configure Resend integration to automatically dispatch HTML confirmation emails with calendar attachments (.ics files) to both the host and the attendee immediately upon booking confirmation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Zeeg