How to vibe codeOnceHub

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack application.

• GitHubfree

  Source code management and continuous deployment integration.

• 

  Google Cloud Console Accountfree

  Required to configure OAuth credentials and API access for bi-directional Google Calendar sync.

AI coding tools

• Claude Code

  Best-in-class terminal agent for orchestrating multi-file full-stack architecture, API integrations, and debugging complex calendar sync loops.

• Cursor

  Ideal for fine-tuning UI components, booking page builders, and chat interfaces with precise visual diff reviews.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase PostgreSQL database schemas for users, calendars, event types, bookings, and form responses, and set up better-auth.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and shadcn/ui components. Configure Supabase as the primary PostgreSQL database client using Drizzle ORM or Supabase JS client. Create a comprehensive database schema supporting: 1) 'users' table with profile fields, 2) 'connected_calendars' storing OAuth tokens, provider types, and sync states, 3) 'event_types' defining meeting durations, availability rules, and buffer times, 4) 'bookings' capturing guest details, host assignment, and status (confirmed, canceled, rescheduled), and 5) 'routing_forms' and 'form_responses' for qualification logic. Integrate better-auth for secure credential and session management. Ensure all tables have proper foreign key constraints, indexes on lookup fields, and UUID primary keys. Write migration scripts and seed data for testing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Calendar Integration & Bi-Directional Sync Engine

   Implement Google Calendar and Microsoft Graph OAuth flows, secure token storage, and an availability calculation engine that checks external calendars for conflicts.

   Build OAuth integration routes for Google Calendar and Microsoft 365. Securely store and encrypt OAuth access and refresh tokens in the database. Implement a robust background sync engine and API service that queries external calendar free/busy endpoints given a date range. Create an availability calculation algorithm that merges host working hours, buffer times (before/after meetings), existing bookings in the local database, and external calendar busy blocks to generate unreserved time slots in the guest's local timezone. Handle token expiration and automatic refresh errors gracefully with proper logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Booking Page Designer & Guest Scheduling Flow

   Build the WYSIWYG-style booking page designer and the public-facing guest scheduling wizard with timezone conversion and instant confirmation.

   Develop a booking page management dashboard allowing users to customize branding (logos, colors, welcome messages, slug URLs) and configure meeting parameters (duration, location types like Zoom or physical address). Build the public guest-facing scheduling wizard: a multi-step responsive view where guests select a timezone, pick an available calendar slot calculated from Step 2, fill out custom booking form fields, and confirm the appointment. Upon confirmation, execute a server action that writes the booking to the database, creates an event in the host's external calendar via API, and triggers confirmation emails via Resend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Routing Forms & Dynamic Team Distribution

   Create progressive screening and routing forms with conditional logic and implement round-robin and maximum availability host assignment algorithms.

   Implement a no-code routing form builder supporting progressive response capture, branching question logic, and custom field mapping. Build the team meeting distribution engine supporting round-robin (evenly distributing bookings across team members) and maximum-availability distribution (calculating joint availability across multiple hosts and prioritizing by workload). Create routing execution endpoints that evaluate incoming visitor answers and CRM properties in real time to automatically assign the correct host and redirect or present the matching booking page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Web Chatbot & Voice Agent Integration

   Integrate Vercel AI SDK for web chatbots trained on knowledge bases and connect Vapi and ElevenLabs for voice-automated phone scheduling agents.

   Build an AI web chatbot widget using the Vercel AI SDK and Anthropic API. Allow users to upload documents or supply URLs as knowledge sources stored in Supabase with vector embeddings. The chatbot must handle FAQ triage, guide conversations naturally, and offer an instant meeting handoff option when booking intent is detected. Additionally, integrate the Vapi API and ElevenLabs for voice agent support: provision dedicated phone numbers, configure system instructions tied to booking logic, and implement webhook handlers to process call summaries, transcriptions, and automated booking triggers from phone conversations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Notifications, Rescheduling, and Polish

   Implement automated email and SMS notifications, guest cancellation/rescheduling workflows, and comprehensive dashboard analytics.

   Build comprehensive notification handling using Resend for transactional emails and Twilio for SMS alerts regarding bookings, cancellations, and reminders. Implement guest-facing and host-facing cancellation and rescheduling flows directly from calendar invites or unique management links. Create an analytics dashboard tracking total meetings, conversion rates over a 6-week window, and distribution performance. Polish UI styling, add loading states, handle error boundaries, and ensure mobile responsiveness across all booking pages and dashboards.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for OnceHub