How to vibe codeSimplyBook.me

Prerequisites

• Node.js LTSfree

  Required to run Next.js runtime environment and TypeScript compilation

• GitHubfree

  Source control and automated deployment trigger for hosting platforms

• 

  Google Cloud Console Accountfree

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

AI coding tools

• Claude Code

  Agentic terminal coding tool best suited for generating complex multi-file database schemas and backend routing logic

• Cursor

  AI-native editor for refining UI components, booking layouts, and dashboard views with real-time diff previews

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with TypeScript, Tailwind CSS, and Turso database connection using Drizzle ORM.

   Create a new Next.js App Router project configured with TypeScript and Tailwind CSS. Install Drizzle ORM and configure connection to Turso using libSQL. Define the core database schema in TypeScript for a multi-tenant booking platform: tables for 'businesses' (id, name, slug, timezone), 'staff' (id, business_id, name, email), 'services' (id, business_id, name, duration_minutes, price), 'working_hours' (id, staff_id, day_of_week, start_time, end_time), and 'appointments' (id, business_id, staff_id, service_id, client_name, client_email, start_time, end_time, status). Implement database migration scripts and verify connection using a test script. Ensure all foreign key relationships enforce strict cascading deletes and proper indexing on business slugs and appointment date ranges.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Business Onboarding

   Implement authentication with better-auth and create a business setup wizard.

   Integrate better-auth into the Next.js app supporting email/password registration. Create an onboarding flow where a new user creates a business record with a unique URL slug (e.g., /app/[slug]). Protect administrative dashboard routes so only authenticated business owners can access their tenant management interface. Build a responsive dashboard layout with sidebar navigation supporting analytics summaries, service creation, staff allocation, and scheduling settings. Ensure session states persist cleanly and handle unauthorized redirection gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Public Booking Portal & Slot Calculation Engine

   Build the public-facing client booking website and the time-slot availability calculator.

   Build a dynamic public booking page at route /[slug] that fetches business details, available services, and staff members. Implement a core scheduling algorithm function calculateAvailableSlots(staffId, serviceId, date) that checks the staff member's weekly working hours, subtracts existing booked appointments for that date, and accounts for service durations to return a list of available start times. Render an interactive calendar date picker and clean time-slot selection buttons. When a client submits their name, email, and selected slot, write a server action that validates slot availability against race conditions, inserts the appointment record, and returns a success confirmation view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Admin Dashboard & Schedule Management

   Create the administrative calendar view and management tools for appointments and staff.

   Build a comprehensive admin dashboard view showing a calendar matrix and list of upcoming appointments for the business. Allow administrators to filter appointments by staff member or date range, manually create walk-in bookings, and cancel or reschedule existing appointments with status updates (confirmed, cancelled, completed). Add settings pages to manage staff profiles, service durations and pricing, and weekly working hours overrides. Ensure all database mutations revalidate the relevant dashboard views instantly using Next.js revalidatePath.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Transactional Email Notifications

   Integrate Resend to dispatch automated confirmation emails upon booking creation.

   Install the Resend SDK and configure API keys in environment variables. Create an email utility function that sends a branded booking confirmation HTML email to clients and a notification email to staff members whenever an appointment is successfully created in the database. Ensure the email includes the service name, staff member, date, time, and cancellation link. Trigger this notification asynchronously inside the booking creation server action, handling any API delivery failures gracefully without failing the client booking response.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Google Calendar Two-Way Sync Integration

   Implement OAuth connection and webhook synchronization with Google Calendar to prevent scheduling conflicts.

   Implement a Google Calendar OAuth integration flow allowing business staff to connect their Google accounts. Store encrypted refresh tokens in the database. Create a sync service that automatically pushes newly created appointments to the staff member's connected Google Calendar using the Google Calendar API. Set up an API route webhook listener to handle incoming Google Calendar push notifications or polled changes, detecting external events or deletions and automatically blocking out corresponding time slots in the local appointment database to prevent double bookings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SimplyBook.me