How to vibe codeSetmore

Prerequisites

• Node.jsfree

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

• GitHubfree

  Repository hosting and version control for AI agent-driven iteration.

AI coding tools

• Claude Code

  Agentic CLI tool capable of planning, executing multi-file changes, and iterating on complex database and API logic.

• Cursor

  AI-native code editor for reviewing code diffs and refining UI components across the booking flow.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Turso for SQLite storage, and set up relational schemas for users, staff, services, and appointments.

   Scrape together a new Next.js project configured with TypeScript, Tailwind CSS, and Drizzle ORM targeting Turso. Build a normalized relational schema with the following tables: users (id, email, name, role), staff_profiles (id, user_id, bio, working_hours JSON), services (id, title, duration_minutes, price, staff_id), and appointments (id, service_id, staff_id, customer_name, customer_email, start_time, end_time, status, payment_status). Implement strict typing and database migration scripts. Ensure all datetime fields use UTC timestamps to avoid timezone desynchronization during booking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Multi-Tenant RBAC

   Implement authentication using better-auth and establish role-based access control separating admins, staff members, and clients.

   Integrate better-auth into the Next.js app supporting email/password and magic links. Implement middleware and server actions to enforce role-based access control: 'admin' users can manage all staff and services, 'staff' users can view and edit their own calendar schedules, and unauthenticated public users can only access public booking pages. Create clear login, registration, and onboarding flows with proper error handling and session state management.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Staff Calendar and Availability Engine

   Build the internal calendar dashboard and the core availability calculation engine that prevents double-booking under concurrency.

   Build a multi-staff calendar view dashboard in Next.js using a responsive grid layout. Implement a robust backend availability engine service that calculates open time slots for a given staff member and service on a specific date, factoring in staff working hours, scheduled breaks, time-off exceptions, and existing confirmed appointments. Use database transactions with serializable isolation or explicit row-level locking when booking an appointment to ensure concurrent user booking attempts for the exact same slot fail gracefully without double-booking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Public Booking Page and Customization

   Create a public-facing client booking portal with service menus, staff selection, slot picking, and branding customization.

   Develop a responsive public-facing booking portal accessible via unique slugs (e.g., /book/[business-slug]). The page must render the business logo, brand color accents, service menu categories, and staff profiles. Build a multi-step booking wizard where clients select a service, pick a staff member (or 'any available'), choose an open calendar slot from live availability, and enter their contact details. Ensure mobile responsiveness and clean UI design matching modern SaaS standards.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automated Notifications and Reminders

   Integrate Resend and Twilio to trigger instant booking confirmations, reschedule links, and automated reminders.

   Integrate Resend for transactional email notifications and Twilio for SMS reminders. Implement server-side background job hooks that trigger an immediate confirmation email with a secure reschedule/cancellation token link whenever an appointment is booked. Set up cron endpoints secured by secret tokens to scan for upcoming appointments and dispatch reminder notifications 24 hours and 2 hours prior to start time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Payment Processing Integration

   Integrate Stripe Checkout to require upfront payments or deposits during the client booking flow.

   Integrate Stripe Checkout into the booking wizard. Add settings allowing businesses to toggle whether a service requires full payment or a deposit upfront. When a booking requires payment, create a Stripe Checkout session server-side, redirect the client to Stripe, and handle the asynchronous webhook event (checkout.session.completed) to confirm the appointment status and record payment details in the database securely and idempotently.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Setmore