How to vibe codeKlaviyo

Prerequisites

• Node.jsfree

  Required runtime for Next.js development and TypeScript execution.

• GitHubfree

  Source control and deployment pipeline connection.

• Resend Accountfree tier available

  Transactional email API for sending marketing and flow campaigns.

AI coding tools

• Claude Code

  Terminal coding agent capable of building multi-file backends, database schemas, and UI components from natural language prompts.

• Cursor

  AI-native code editor for reviewing diffs and making rapid iterative tweaks to the dashboard UI.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js 15 project with Tailwind CSS 4, configure Drizzle ORM connected to Neon Postgres, and implement better-auth for single-user authentication.

   Create a new Next.js project configured with TypeScript, Tailwind CSS 4, and Drizzle ORM targeting Neon Postgres. Set up database schemas for `profiles` (id, email, first_name, last_name, created_at, custom_properties jsonb), `events` (id, profile_id, metric_name, properties jsonb, timestamp), `segments` (id, name, query_rules jsonb), and `flows` (id, name, trigger_type, steps jsonb). Configure better-auth for secure admin dashboard login. Verify everything compiles successfully with a local development server.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Event Tracking Ingestion API

   Build a public REST API endpoint that ingests custom storefront events (e.g., 'Placed Order', 'Viewed Product', 'Checkout Started') and updates customer profile states.

   Build a secure Next.js API route at `/api/track` that accepts JSON payloads containing an event name, customer email, and custom properties. The endpoint must automatically upsert a record into the `profiles` table, append a new row to the `events` table with a JSONB properties payload, and return a 200 OK response. Include robust input validation using Zod and handle missing customer profiles by creating them on the fly. Write an integration test or verification script using fetch.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Dynamic Customer Segmentation Engine

   Implement a query builder and evaluation engine that translates visual rule configurations into SQL WHERE clauses to group customer profiles dynamically.

   Build a segmentation engine in TypeScript that translates JSON-based rule structures (e.g., property equals value, event count greater than X in the last Y days) into dynamic Drizzle SQL queries against Neon Postgres. Create a React dashboard page in Next.js where users can view segment definitions, inspect matching profiles in real time, and see total profile count metrics for each segment.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Visual Email Flow Automation Builder

   Create a visual workflow editor for setting up automated email triggers based on segment entry or custom events, powered by Inngest for reliable background delays.

   Implement an automated flow execution engine using Inngest and Next.js. Build a visual workflow builder UI where an admin can configure a trigger (e.g., 'Placed Order') followed by time delay steps (e.g., 'Wait 2 days') and action steps (e.g., 'Send Email'). Write the Inngest background functions that handle event listening, step suspension during wait periods, and queuing execution tasks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Email Dispatch Integration and Analytics

   Integrate Resend to handle actual email sending with template rendering and build a reporting dashboard for revenue attribution and open/click metrics.

   Integrate the Resend API into the Inngest action handlers so that automated flow steps can dispatch personalized HTML emails using Handlebars or React template strings containing customer profile attributes. Build a marketing analytics dashboard page showing total emails sent, open rates, click rates, and total attributed revenue generated by specific flows and campaigns.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Klaviyo