How to vibe codeGetWaitlist

Prerequisites

• Node.jsfree

  Runtime environment for building and running the Next.js full-stack application

• GitHubfree

  Source control and repository hosting for your deployment pipeline

AI coding tools

• Claude Code

  Autonomous terminal agent ideal for scaffolding full-stack CRUD apps, writing API routes, and debugging frontend widgets

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS and Drizzle ORM connected to a Turso SQLite database. Define tables for organizations, waitlists, signups (with referral IDs, queue position, CAPTCHA verification status, and metadata JSON), and custom questions.

   Create a new Next.js app with Tailwind CSS and configure Drizzle ORM with Turso. Write the complete database schema for a waitlist SaaS: organizations table, waitlists table (with settings like hide counts, permitted domains, spam rules), signups table (id, waitlist_id, email, position, referred_by_id, captcha_valid, metadata json), and custom_questions table. Ensure foreign keys and indexes on email and referral tokens are correctly established.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Waitlist Management Dashboard

   Build the authenticated dashboard UI using Next.js App Router where users can create multiple waitlists, toggle settings (domain restrictions, CAPTCHA enforcement), and view a data table of signups with CSV export.

   Build the dashboard pages in Next.js App Router for managing waitlists. Create a list view, a creation modal, and a detailed waitlist view with tabs for Settings, Signups table (with filtering by CAPTCHA status and metadata), and Analytics. Use better-auth for protecting dashboard routes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Viral Referral Engine and Signup Flow

   Implement the public-facing hosted waitlist page and signup form logic that handles incoming `?ref_id=` tracking parameters, assigns sequential queue positions, and generates unique share links for new signups.

   Implement the public waitlist signup API endpoint and hosted landing page view. When a user submits an email and custom question answers, check email rules (block free/personal domains if configured), record the signup, handle referral attribution if a `ref_id` cookie or query param exists, calculate their queue position, and return their unique referral link and current position.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable JavaScript Widget

   Develop a lightweight, embeddable client-side script (`getwaitlist.min.js`) that safely injects an iframe or shadow-DOM widget into third-party websites, allowing external collection of signups.

   Create a vanilla JavaScript embed script (`getwaitlist.min.js`) that targets a container div on external websites, renders a responsive waitlist form, handles form submission via fetch to our backend API, and displays success state with the user's referral link and queue position. Ensure proper CORS headers and CSS scoping so it doesn't break host site styles.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Email Automation and Broadcasting

   Integrate Resend and Inngest to send automated welcome, verification, and referral trigger emails, as well as bulk email broadcast blasts to segmented waitlist members.

   Integrate Resend and Inngest into the Next.js backend. Set up automated transactional email triggers for new signups (welcoming them with their position and referral link) and successful referrals. Build an 'Email Blast' dashboard feature that allows sending batched background broadcast emails with template variable replacement and basic audience segmentation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Leaderboard and CAPTCHA Integration

   Add Google reCAPTCHA verification to the signup form flow and build a public leaderboard view displaying top referrers.

   Add Google reCAPTCHA v2/v3 verification to the public signup form and validate tokens server-side before saving signups. Also build a Leaderboard feature and API endpoint that aggregates signups by referral count, allowing users to embed or view the top referrers on their waitlist.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for GetWaitlist