How to vibe codeSaleshandy

Prerequisites

• Node.jsfree

  Runtime environment for the TypeScript backend and Next.js frontend

• GitHubfree

  Repository hosting and CI/CD deployment pipelines

AI coding tools

• Claude Code

  Best-in-class agentic coding CLI for scaffolding complex multi-service architectures and background worker queues

• Cursor

  Ideal editor for reviewing React component diffs and fine-tuning the sequence builder UI

Build guide

1. 01Database Schema & Authentication Setup

   Initialize the Next.js project with better-auth and define the core database schema in Neon for users, connected email accounts, leads, sequences, and CRM deals.

   Scaffold a new Next.js project using TypeScript, Tailwind CSS, and App Router. Integrate better-auth with a Neon PostgreSQL connection. Create database migration files for the following tables: users, connected_mailboxes (storing IMAP/SMTP credentials securely), prospects (fields for email, name, company, custom variables), sequences (steps with delays and channel types), sequence_enrollments, and crm_deals (stages: interested, meeting, proposal, won). Ensure all foreign keys have proper indexes and cascade rules.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Email Account Integration & IMAP/SMTP Connection

   Build the settings interface to connect external SMTP/IMAP mailboxes and verify credentials with a live test connection.

   Implement an email account connection module in Next.js. Create API routes that accept SMTP and IMAP host, port, username, and password credentials, encrypt them using AES-256 before storing in the database, and run a test handshake connection using nodemailer and imap-simple to verify authentication. Build a clean frontend settings dashboard showing active/inactive status for each connected mailbox.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multichannel Sequence Builder & AI Copilot

   Develop the visual sequence creation workflow where users map out multi-step campaigns across email, calls, and tasks, enhanced by an AI text generator.

   Build a multi-step sequence builder UI where users can add steps (Email, Call, LinkedIn, Task) with custom time delays. Integrate the Vercel AI SDK and an Anthropic API route (`streamText`) to provide an 'AI Sequence Copilot' button that generates high-converting cold email copy based on prompt inputs and target industry. Save sequence definitions and step configurations cleanly to PostgreSQL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Asynchronous Email Sending Engine with BullMQ

   Set up a robust background worker architecture using BullMQ and Upstash Redis to process and dispatch scheduled sequence steps at safe rate limits.

   Implement a background job processing system using BullMQ and Upstash Redis. Create a persistent worker service running on Node.js that checks scheduled sequence enrollments, respects daily sending caps per connected mailbox (e.g., max 50 emails/day per inbox), rotates through available mailboxes, and dispatches emails via nodemailer. Handle delivery failures, track bounce states, and update enrollment progress in PostgreSQL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Unified Inbox & IMAP Sync

   Construct a centralized inbox that aggregates replies across all connected email accounts by polling via IMAP or webhooks.

   Build a unified inbox UI in Next.js that aggregates incoming email replies across all connected mailboxes. Implement a background sync worker that periodically checks IMAP folders for new unread messages matching active prospect threads, parses thread history, and displays them in a unified conversational thread view. Add quick reply functionality that sends responses from the correct original sending account.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Built-in CRM Deal Pipeline

   Add a Kanban-style CRM pipeline view allowing users to drag prospects across deal stages from initial interest to closed-won.

   Build a Kanban board CRM view using Tailwind CSS and drag-and-drop state management. Define pipeline columns for 'Interested', 'Meeting', 'Proposal', and 'Won'. Allow users to drag prospect deal cards between stages, update deal values, log notes directly inside a prospect slide-over drawer, and automatically sync stage changes back to the PostgreSQL database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Saleshandy