How to vibe codeLivestorm

Prerequisites

• Node.jsfree

  JavaScript/TypeScript runtime for full-stack web development.

• GitHubfree

  Version control and CI/CD deployment pipelines.

AI coding tools

• Claude Code

  Handles multi-file full-stack scaffolding, complex API integrations, and iterative debugging.

• Cursor

  Ideal for fine-tuning UI layouts, component hierarchies, and real-time frontend states.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with TypeScript and Tailwind CSS, configure Neon PostgreSQL, and set up the core data models for events, registrations, chat messages, and attendees.

   Scaffold a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM configured to connect to a Neon PostgreSQL database. Create database migrations and schema definitions for tables: `events` (id, title, description, scheduled_at, duration, host_id), `registrations` (id, event_id, email, name, attended, registered_at), `chat_messages` (id, event_id, sender_name, message, created_at), and `polls` (id, event_id, question, options, active). Implement a basic layout with responsive navigation and establish a clean directory structure.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Event Management Dashboard

   Implement authentication using better-auth and build the host dashboard for creating, editing, and listing upcoming and past webinars.

   Integrate `better-auth` into the Next.js application for secure email/password and social authentication. Build a host dashboard route `/dashboard` that allows authenticated users to create new webinar events with custom titles, descriptions, and scheduled timestamps. Implement event management views to list upcoming events, generate unique public registration landing pages for each event, and view basic metadata and registration counts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Registration Flow & Automated Email Cadences

   Build public registration pages with custom form fields and set up background jobs using Resend for automated confirmation and reminder emails.

   Create a public registration page at `/events/[id]` featuring a registration form that captures attendee name and email, writing records to the `registrations` table. Integrate the Resend API to automatically trigger a confirmation email upon successful registration. Implement a background job or cron endpoint using Vercel Cron to send automated reminder emails 1 hour before the scheduled webinar start time, tracking delivery status and handling bounce logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Live Video Room & WebRTC Integration

   Integrate LiveKit video conferencing SDK to build the live webinar room supporting multi-speaker video streams, screen sharing, and participant management.

   Build the live webinar room interface at `/events/[id]/room`. Integrate the LiveKit client SDK to handle WebRTC token generation on the backend and establish real-time video and audio feeds for speakers and attendees. Implement speaker toggle controls, device selection selectors (camera/microphone), screen sharing functionality, and a participant list view displaying active viewers and speakers with role-based permissions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Interactive Engagement: Chat, Q&A, and Polls

   Add real-time interactive engagement features including live chat, upvoted Q&A questions, and live polls using WebSockets or polling.

   Implement real-time engagement features inside the webinar room interface. Build a live chat component using WebSockets for instant message broadcasting and emoji reactions. Add a Q&A tab where attendees can submit questions and upvote peer questions, allowing moderators to pin or mark questions as answered. Build a live polling widget enabling hosts to launch custom poll questions and display real-time vote distribution graphs to participants.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Transcription & Post-Event Analytics

   Incorporate OpenAI Whisper for automated post-event transcription and build the analytics reporting screen showing attendance rates and engagement metrics.

   Implement a post-event workflow that processes recorded session audio using the OpenAI Whisper API to generate structured transcripts and summaries. Store the transcript data linked to the event record. Build an analytics reporting page at `/events/[id]/analytics` that computes and displays key performance metrics including registration totals, actual attendance rate, chat activity counts, and poll response summaries with export options.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Livestorm