How to vibe codeKit

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack application

• GitHubfree

  Source control and deployment integration

• Resend Accountfree

  Transactional email API for sending broadcasts and test emails

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding multi-file full-stack features and writing complex database schemas from your terminal.

• Cursor

  Ideal for iterative frontend component polishing on the dashboard and visual builder UI.

Build guide

1. 01Scaffold Project & Database Schema

   Initialize the Next.js application, set up Tailwind CSS with shadcn/ui, configure better-auth, and connect Neon Postgres via Drizzle ORM.

   Scaffold a new Next.js project using Tailwind CSS and TypeScript. Set up Drizzle ORM connected to a Neon Postgres database. Define database tables for users, subscribers (id, email, status, custom_fields, created_at), tags (id, name, user_id), subscriber_tags (junction table), and broadcasts (id, subject, content, status, scheduled_at). Integrate better-auth for secure user authentication with email/password login. Ensure all foreign key relations and indexes are optimized for quick subscriber lookups.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Subscriber Management & Tagging Dashboard

   Create the dashboard interface for managing subscribers, filtering by tags, and importing/exporting subscriber lists.

   Build a dashboard page in Next.js displaying a searchable, paginated table of subscribers. Implement capabilities to add new subscribers manually, assign/remove tags, and view individual subscriber activity timelines (subscriptions, opens, clicks). Create a CSV import endpoint that parses uploaded subscriber files, validates email formats, handles duplicates gracefully, and bulk-inserts records into the database with default tags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement Broadcast Creation & Resend API Dispatch

   Develop the email composition interface and integrate the Resend API for dispatching broadcasts to segmented subscriber lists.

   Build a broadcast composer page with a rich markdown or block editor, subject line input, and tag-based audience targeting selector. Implement a backend API route using the Resend API to handle outbound email delivery. Add background queue handling using Inngest to batch-send broadcasts to large subscriber lists without hitting serverless timeout limits, ensuring unsubscribe links are automatically appended to every outgoing email footer.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Create Landing Pages & Embedded Opt-in Forms

   Build public-facing landing page templates and embeddable opt-in form widgets that capture new subscribers directly into the database.

   Build a public landing page builder and renderer where creators can configure titles, descriptions, call-to-action buttons, and form input fields. Create a lightweight embeddable form script and API route that processes public form submissions, creates or updates the subscriber record in Neon, applies the designated tag, and triggers any connected welcome email sequences.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build Visual Automation Workflow Engine

   Construct a node-based visual automation builder allowing creators to map out automated email sequences and triggers based on user actions.

   Build a visual workflow automation builder using React Flow on the frontend. Create backend models to store automation steps (triggers like 'tag added', actions like 'send email' or 'delay for X days'). Implement a background worker using Inngest that evaluates active subscriber states against workflow graphs, executes delays, and dispatches automated emails via Resend when conditions are met.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Kit