How to vibe codeCalday

Prerequisites

• Node.jsfree

  Required runtime for running the full-stack Next.js application locally.

• GitHubfree

  Source control and seamless repository integration for cloud deployments.

• Stripe Accountfree

  Test mode API keys required for implementing upfront deposit collection and webhooks.

• 

  Google Cloud Console Accountfree

  Required to configure OAuth credentials and webhooks for Google Calendar synchronization.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding the complete full-stack app, database schema, and API integrations from terminal prompts.

• Cursor

  Ideal for inspecting code diffs and making rapid, iterative UI adjustments to the booking page and dashboard components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js App Router project with Tailwind CSS, shadcn/ui components, and configure the Neon Postgres database schema using Prisma or Drizzle ORM.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router structure. Install Lucide React icons and configure shadcn/ui. Set up Drizzle ORM connected to a Neon Postgres database. Define the database schema with tables for users, services (title, duration, price, description, bufferTime), appointments (serviceId, customerName, customerEmail, customerPhone, startTime, endTime, status, paymentStatus), and customers (name, email, phone, notes, totalBookings). Ensure proper foreign keys and indexes on start and end times for conflict checking. Write migration scripts and verify local database connectivity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Operator Dashboard

   Implement authentication using better-auth and build the operator dashboard shell for managing services, working hours, and viewing appointments.

   Integrate better-auth into the Next.js app supporting email/password registration and login for service operators. Create a protected dashboard layout with sidebar navigation. Build the services management page where operators can create, edit, and delete service offerings with pricing and duration. Build a working hours configuration interface allowing operators to set weekly availability slots and buffer times between jobs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Booking Page & Slot Calculation

   Build the public-facing booking page where clients can select a service, view available time slots based on operator working hours, and submit details.

   Build a public dynamic route page at /[username] that loads the operator's public profile and active services. Implement a multi-step booking flow: step 1 selects a service, step 2 displays an interactive calendar date picker and available time slots. Write robust backend slot calculation logic that respects operator working hours, existing appointments, and configured buffer times, filtering out booked intervals. Step 3 collects client name, email, phone, and custom intake questions, creating a tentative appointment in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Stripe Payment Integration

   Integrate Stripe Checkout for upfront deposit and full service payment collection during the booking process.

   Incorporate Stripe SDK to handle appointment payments. When a client books a paid service, generate a Stripe Checkout session configured for the service price. Create a webhook endpoint (/api/webhooks/stripe) that listens for checkout.session.completed events, updates the corresponding appointment's paymentStatus to 'paid', and changes the appointment status from 'pending' to 'confirmed'. Handle payment failures gracefully with proper error messages on the booking return pages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Calendar Two-Way Synchronization

   Implement OAuth integration with Google Calendar and Microsoft Outlook to sync appointments and block external calendar events.

   Build a calendar integration settings page allowing operators to connect their Google Calendar via OAuth2. Implement token encryption, secure token storage in the database, and automatic token refresh logic. Write background synchronization routines that push confirmed Calday appointments to the operator's Google Calendar and poll or receive webhook notifications for external calendar events to dynamically block overlapping slots on the booking page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Automated Reminders & CRM Records

   Set up background jobs for automated 24-hour and 1-hour appointment reminders via Resend and Twilio, and build the customer CRM database view.

   Integrate Inngest background job runner to schedule reminder workflows for confirmed appointments. Create functions that trigger reminder emails via Resend and SMS messages via Twilio exactly 24 hours and 1 hour before appointment start times. Build a Customer Management dashboard page that aggregates client profiles automatically from bookings, displaying past appointment history, total revenue, and operator notes that can be edited after visits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Calday