How to vibe codeWebinarJam

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack web application.

• GitHubfree

  Source control and automated deployment pipelines.

AI coding tools

• Claude Code

  Handles complex multi-file scaffolding, database schemas, and API integrations across the stack.

• Cursor

  Provides an AI-native editor interface for refining UI components, registration pages, and real-time chat hooks.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth for host accounts, and establish the Neon Postgres database schema for webinars, registrants, chat messages, and offers.

   Initialize a Next.js project using App Router, TypeScript, and Tailwind CSS. Set up better-auth with email/password authentication for webinar hosts. Connect the app to a Neon Postgres database using Drizzle ORM or Prisma. Create database tables for 'Webinars' (id, title, description, scheduledAt, hostId, status, duration), 'Registrants' (id, webinarId, email, name, registeredAt), 'ChatMessages' (id, webinarId, senderName, message, timestamp), 'Polls' (id, webinarId, question, options, active), and 'Offers' (id, webinarId, title, price, buttonText, checkoutUrl, active). Ensure all foreign keys and indexes are correctly configured for high-frequency chat reads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Registration Page Builder & Funnel

   Build a customizable webinar registration page generator and public landing view that captures leads into the database.

   Create a drag-and-drop or customizable registration page builder in Next.js where hosts can configure a webinar title, description, banner image, and speaker details. Generate a public registration route (/w/[webinarId]) featuring an email and name input form. When a user registers, save their record to the 'Registrants' table, trigger a confirmation email via Resend with a unique join link, and redirect them to a confirmation/thank-you page with calendar add links (ICS).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email & SMS Reminder Engine

   Implement background jobs or cron routines to dispatch reminder notifications at set intervals before the webinar starts.

   Implement an automated reminder scheduling system using Vercel Cron or Inngest. Create cron jobs that check for upcoming webinars starting in 24 hours, 1 hour, and 15 minutes. Query the 'Registrants' table for each active webinar and dispatch custom HTML reminder emails containing personalized secure join tokens via Resend. Include UI controls in the webinar dashboard for hosts to view email delivery logs and subscriber stats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Live Video Broadcasting Integration

   Embed a WebRTC video room provider (LiveKit) to handle multi-presenter streaming and viewer broadcast distribution.

   Integrate LiveKit Cloud SDK into the application to power the live webinar broadcasting room. Create two distinct room views: a 'Presenter Room' where up to 6 hosts can publish camera/microphone streams and share their screen, and an 'Attendee Room' configured for large-scale subscriber viewing with low-latency playback. Handle token generation securely via backend API routes so only authenticated hosts can broadcast while registered attendees join with viewer permissions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Real-Time Chat, Polls & Active Offers

   Build real-time interactive subsystems for audience chat, interactive polling, and timed active offer buy buttons.

   Build a real-time engagement sidebar for the webinar room using WebSockets or Server-Sent Events (SSE). Implement live audience chat with moderation controls (delete message, ban user), interactive live polling where hosts can launch questions and render live bar charts of responses, and a timed 'Active Offer' component. The offer component should allow hosts to trigger a buy button with a countdown timer directly inside the attendee video room, redirecting users to a mock Stripe checkout or external URL when clicked.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics Dashboard & Replay Rooms

   Construct host analytics dashboards to track attendance metrics, watch times, and conversion funnels, plus automated replay room generation.

   Build a host analytics dashboard (/dashboard/analytics/[webinarId]) that aggregates total registrations, live peak attendees, chat engagement rates, poll participation, and offer click-through rates. Implement an automated recording and replay pipeline where completed live streams save a video asset, generating a public replay room URL with persistent chat and active offer overlays for viewers watching after the live event concludes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for WebinarJam