How to vibe codeHoneyBook

Prerequisites

• Node.jsfree

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

• GitHubfree

  Source code repository and version control for AI agent integration.

• Stripe Accountfree

  Required for testing online payment processing and webhook handling.

AI coding tools

• Claude Code

  Unmatched agentic capability for scaffolding complex relational database schemas, multi-file components, and background workflow engines.

• Cursor

  Essential for iteratively refining complex UI components like the Smart Files document builder and calendar grids.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, shadcn/ui, and better-auth. Set up Supabase PostgreSQL tables for users, clients, projects, pipelines, invoices, contracts, and workflow triggers.

   Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Integrate better-auth with email/password authentication configured against a Supabase PostgreSQL instance. Create a robust database schema using Prisma or Drizzle containing tables for users, clients (name, email, phone, status), projects (linked to client, pipeline stage, value), invoices (line items, total, status), contracts (content, signature status, signed_at), and workflow_automations (trigger type, action type, delay). Set up proper foreign key constraints, indexes, and initial TypeScript types for all models.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Lead Capture & CRM Pipeline

   Build embeddable public lead capture forms that auto-create client and project records, displaying them on a Kanban pipeline view.

   Build a public lead-capture form generator in Next.js where business owners can configure custom form fields and get an embeddable HTML snippet or public URL. When a prospective client fills out this public form, validate the payload, automatically create a new client record, instantiate a new project in the 'Inquiry' stage of their CRM pipeline, and trigger an initial notification. Create an interactive Kanban pipeline dashboard UI allowing drag-and-drop movement of projects across stages: Inquiry, Follow-up, Booked, Completed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Smart Files: Proposals, Contracts, and Invoices

   Develop the unified document builder combining line-item invoices, rich-text legal contracts with signature capture, and proposal selection modules.

   Implement a 'Smart Files' document builder interface allowing users to compose composite client documents. The document must combine three modular blocks: an interactive Proposal selection table (choosing service packages), an itemized Invoice calculator with tax and totals, and a legal Contract view featuring a digital canvas signature pad. Build the backend logic to lock document state once signed, generate a secure client-facing signing view via a unique token, and record audit trails (IP address, timestamp) upon signature completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Online Payments Integration

   Integrate Stripe to process invoice payments directly from Smart Files and reconcile payment statuses.

   Integrate Stripe Checkout and Payment Intents into the Next.js backend to allow clients to pay invoices directly from their Smart Files view. Implement a secure Stripe webhook endpoint that listens for payment_intent.succeeded events, automatically updates the corresponding invoice status to 'Paid', advances the project stage in the CRM pipeline, and logs the transaction history. Handle edge cases such as partial payments and failed transaction error messages gracefully in the client UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Calendar Scheduler & Conflict Checking

   Build a scheduling tool with availability rules, meeting types, and automated calendar link generation.

   Build an appointment scheduling module similar to HoneyBook's booking tool. Allow users to define meeting types (duration, buffer times, available weekly hours). Create a public booking page where clients can pick available time slots based on existing project meetings. Implement backend conflict-checking logic to prevent double-booking across active projects, and automatically create a calendar event and project task upon successful booking confirmation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Workflow Automation Engine

   Implement a background job runner using Inngest to handle trigger-based conditional automations and email reminders.

   Integrate Inngest into the Next.js app to power a trigger-based workflow automation engine. Build workflow triggers for events such as 'Project moved to Booked' or 'Contract viewed but unsigned after 24 hours'. When a trigger fires, queue a durable background function that evaluates conditions and executes actions—such as sending automated reminder emails via Resend or generating internal task assignments. Include a dashboard view to inspect active workflow executions and logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07HoneyBook AI Assistant

   Incorporate Anthropic API integrations to generate draft emails, project recaps, and meeting summaries.

   Integrate the Anthropic API to power AI features within the CRM. Build server actions that accept project context, communication history, and user prompts to generate professional client email drafts. Implement a project recap generator that scans project invoices, notes, and task lists to produce a clean executive summary for client check-ins. Provide clean chat and generation panels in the UI with loading states and error handling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for HoneyBook