How to vibe codeBrevo

Prerequisites

• Node.jsfree

  Runtime environment for Next.js and backend execution.

• GitHubfree

  Repository hosting and deployment pipeline integration.

• Resend Accountfree tier

  Provides programmatic transactional email delivery for the clone.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding full-stack features, background queues, and database schemas directly from the terminal.

• Cursor

  Ideal for iterative UI work, component styling, and visual debugging of Kanban boards and workflow builders.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js 16 project with Tailwind CSS 4, shadcn/ui, better-auth, and Prisma or Drizzle connected to Neon Postgres.

   Scrape together a new Next.js project configured with TypeScript, Tailwind CSS 4, and App Router. Set up better-auth for secure single-user email/password login. Configure Drizzle ORM connected to a Neon PostgreSQL database. Define database schemas for tables: Users, Contacts (id, email, attributes JSON, unsubscribed boolean), Lists, ListContacts, Campaigns (id, subject, content, status, type), Deals (id, title, value, stage, contactId), and Automations (id, triggerType, actionsJSON, active boolean). Generate and run initial database migrations, and construct a clean dashboard shell layout using shadcn/ui primitives.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & Segment Filters

   Build contact list management, custom attributes storage, CSV import, and dynamic segmentation filtering.

   Build a robust Contact Management module in the Next.js app. Create a data table page supporting server-side pagination, search, and tag/list filtering. Implement a CSV import parser utility using PapaParse that maps uploaded headers to contact attributes stored as a JSON column in Postgres. Build segment filtering rules (e.g., filter contacts where attribute X equals Y or who belong to specific lists) and display matching counts instantly on the UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Campaign & Transactional API Engine

   Implement campaign composition and integrate the Resend API for sending bulk and transactional messages.

   Build an Email Campaign creation studio with a rich text/HTML editor preview. Integrate the Resend API SDK into a backend service route to execute campaign broadcasts and transactional email requests. Implement tracking mechanics by embedding unique pixel URLs and click redirect tracking routes to record open and click interaction events in an EventLog database table. Add robust error handling for API rate limits and failed deliveries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Sales CRM Kanban Pipeline

   Create a sales pipeline manager featuring custom deal stages, Kanban board views, and contact association.

   Develop a Sales CRM module featuring a multi-column Kanban board for deals (stages: Lead, Contacted, Proposal, Won, Lost). Use @dnd-kit or native drag-and-drop handlers to allow users to move deal cards between columns, instantly updating stage states via server actions. Allow users to create new deals, link them to existing contacts, assign expected monetary values, and view aggregate pipeline metrics at the top of the dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Visual Marketing Automation Workflow Engine

   Build a visual workflow node editor and integrate Inngest for executing multi-step automated customer journeys.

   Build a visual marketing automation builder using React Flow. Allow users to link trigger nodes (e.g., 'Contact Added to List') to action nodes (e.g., 'Wait 2 Days', 'Send Email', 'Update Deal Stage'). Serialize the workflow graph into JSON and store it in the database. Integrate Inngest to parse and execute these workflow graphs durably when events fire, managing step delays and asynchronous conditional branching without timing out serverless execution bounds.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Aura AI Assistant Integration

   Implement AI-driven email copy generation, subject line optimization, and data summaries using the Anthropic API.

   Integrate the Anthropic SDK to build an 'Aura AI' assistant panel within the campaign editor and CRM dashboard. Implement backend server endpoints that accept prompts or campaign goals and return AI-generated email copy variations, optimized subject lines, and plain-language analytics summaries of campaign performance metrics. Render these insights smoothly inside shadcn/ui dialogs and card components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Brevo