How to vibe codeSendcore

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application.

• GitHubfree

  Source control and deployment pipeline integration.

• 

  Resend Accountfree tier (3k emails/mo)

  Transactional and marketing email API delivery with domain verification.

• 

  Shopify Partner Accountfree

  Optional, for setting up a private test store to verify webhook sync.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex full-stack apps and debugging state machines across multiple files.

• Cursor

  Ideal AI-native editor for refining the drag-and-drop email builder UI and workflow canvas components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso SQLite via Drizzle ORM, set up better-auth, and define tables for contacts, segments, campaigns, workflows, and automation logs.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Turso database connection using Drizzle ORM. Implement better-auth for single-user authentication. Create database schemas for 'contacts' (id, email, phone, tags, rfm_score, created_at), 'campaigns' (id, subject, content, status, sent_at), 'workflows' (id, name, trigger_type, nodes_json), and 'workflow_runs' (id, workflow_id, contact_id, current_step, status, next_run_at). Ensure clean modular directory layout with strict TypeScript types.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02E-Commerce Webhook Ingestion & Contact CRM

   Build secure API endpoints to receive webhook payloads from Shopify and WooCommerce (customer creation, order placed, cart abandoned) and store them into the contacts and events tables.

   Build secure API webhook routes in Next.js at /api/webhooks/shopify and /api/webhooks/woocommerce. Implement HMAC signature verification for incoming payloads. Handle events for customer creation, cart updates, order placements, and fulfillment updates. Normalize incoming data into our 'contacts' and 'orders' tables, updating real-time tagging and calculating basic RFM metrics (Recency, Frequency, Monetary values) on each new order event.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Campaign Builder & Resend Integration

   Create a drag-and-drop or structured block email composer that generates responsive HTML templates and connects to Resend for dispatching campaigns to segmented contact lists.

   Build an email campaign dashboard and editor interface using React. Allow users to compose email subject lines, preheaders, and modular content blocks (text, image, dynamic product recommendations, discount codes). Integrate the Resend API to send batched campaign emails. Implement webhook endpoints for Resend bounce, delivery, and complaint tracking to automatically update contact engagement statuses.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Visual Workflow Automation State Machine

   Implement a visual automation canvas (using React Flow or custom UI) and a durable background job worker to handle multi-step sequences like abandoned cart recovery with timed delays.

   Build a visual workflow automation builder interface allowing users to connect triggers (e.g., Cart Abandoned) with actions (Email, SMS, Wait Delay, Conditional Branch). Integrate Inngest to handle durable background job execution for workflows. When a trigger fires, enqueue a step function that evaluates conditions (e.g., 'Wait 1 hour, check if order completed, if false send SMS via Twilio, else exit flow') with reliable retry logic and state persistence.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Copy Generator & Lead Capture Popups

   Add an AI assistant powered by the Vercel AI SDK and Anthropic API to generate high-converting email subject lines, alongside embeddable spin-and-win lead capture widgets.

   Implement an AI subject line generator using the Vercel AI SDK and Anthropic API where merchants input a campaign topic and receive 5 optimized subject variants with predicted open rates. Build embeddable lead-capture popup components (including a gamified 'Spin-and-Win' wheel) that collect visitor emails and phone numbers, automatically syncing them into the contacts database via a client-side intake script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics Dashboard & Live Activity Feed

   Construct the main overview dashboard displaying total attributed revenue, emails sent, average ROI, and a live activity feed of recent store orders and campaign conversions.

   Build the main analytics dashboard and Live View feed in Next.js. Aggregate data from orders attributed to Sendcore campaign tracking parameters to calculate total revenue, email ROI, and send volumes. Implement a live polling or SSE endpoint that renders a real-time activity ticker (e.g., 'LIVE: +12 New Orders') matching the core metrics overview from Sendcore's platform design.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Sendcore