How to vibe codeDemio

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development and package management.

• GitHubfree

  Source control and deployment pipeline integration.

• 

  LiveKit Cloud AccountFree tier available

  Managed WebRTC infrastructure to handle multi-person stage video rooms without rolling a raw SFU.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex full-stack apps and debugging WebRTC hooks.

• Cursor

  AI-native code editor ideal for fine-tuning frontend UI components and React state flows.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth with Postgres via Neon, and set up relational data models for events, registrations, polls, and chat messages.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and standard directory layout. Set up Prisma or Drizzle ORM connecting to Neon Postgres. Create database models for Users, Events (title, description, scheduled_at, duration, room_type), Registrations (event_id, email, name, custom_fields), Polls, and ChatMessages. Implement better-auth for user authentication with email and password. Ensure type safety across all database queries and build a clean landing page layout.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Event Creation & Custom Registration Pages

   Build the host dashboard for scheduling webinars and generating public registration pages with custom fields and automated confirmation emails.

   Build a host dashboard in Next.js where users can create, edit, and list webinars. Create a public registration page route `/register/[eventId]` that displays the event details, custom registration form fields, and submits lead data to the backend. Upon successful registration, trigger an email via Resend containing a unique join link and calendar invite data. Include input validation using Zod and handle error states gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03WebRTC Stage Integration via LiveKit

   Implement the live webinar room interface where hosts and presenters publish their camera/audio streams and attendees view the live feed.

   Integrate LiveKit into the webinar room page (`/room/[eventId]`). Implement token generation on the backend using LiveKit server SDK, granting different permissions for Hosts (publish audio/video, manage chat, trigger polls) and Attendees (subscribe-only by default, with hand-raise capability to be promoted to stage). Build UI controls for muting audio, toggling video, and viewing participant lists.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-time Engagement: Chat, Q&A, and Polls

   Add real-time interactive engagement features including public chat, threaded Q&A upvoting, and live audience polls.

   Build a real-time engagement sidebar for the webinar room using WebSockets or LiveKit data channels/Supabase Realtime. Implement live public chat with emoji support and @mentions, a dedicated Q&A tab where questions can be submitted and upvoted by attendees, and a live polling widget where hosts can launch multiple-choice questions and display real-time percentage results to the audience.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Demio AI Chat Moderation

   Integrate an AI moderation assistant that answers incoming participant questions on pre-recorded or automated webinar replays.

   Implement an AI moderation feature for automated or on-demand webinars using the OpenAI API. When a participant sends a chat message while attending an on-demand session, route the prompt to an API endpoint containing event context and transcript snippets. Generate an automated response from the 'Demio AI' persona and inject it into the room chat stream with a custom AI badge.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics, Insights, and Export Center

   Create reporting dashboards tracking attendance rates, drop-off timelines, engagement actions, and lead export functionality.

   Build a post-webinar analytics dashboard displaying total registrants, actual attendees, attendance rate, and engagement score per participant based on poll participation and chat activity. Include a timeline chart showing audience drop-off over the course of the session duration. Add a CSV export button allowing hosts to download registrant data and activity logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Showcase Embeds & Polish

   Implement the Showcase feature to display upcoming events in a customizable widget embeddable on external websites.

   Build a Showcase feature allowing hosts to generate an embeddable widget or standalone landing page showcasing their upcoming public events. Implement customizable layout options, color styling, and UTM source tracking on registrations originating from Showcase embeds. Perform end-to-end testing across registration, live room entry, engagement features, and analytics reporting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Demio