How to vibe codeHeartbeat

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack development environment.

• GitHubfree

  Version control repository hosting and CI/CD deployment trigger for Vercel.

• Stripe Accountfree

  Required for configuring test-mode checkout sessions and payment webhook listeners.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding multi-file database schemas, API routes, and full-stack React components autonomously.

• Cursor

  AI-native code editor ideal for reviewing diffs and making iterative UI tweaks to chat and course layout components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, Drizzle ORM, and Turso, establishing tables for users, workspaces, channels, messages, courses, lessons, and access groups.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install Drizzle ORM and configure connection to Turso using an HTTP client. Define a comprehensive SQLite database schema with tables for users (id, name, email, role, avatar), workspaces (id, name, slug, customDomain), channels (id, workspaceId, name, type, isPrivate), messages (id, channelId, userId, content, parentId, createdAt), courses (id, workspaceId, title, description, isCohort), lessons (id, courseId, title, content, dripDays, orderIndex), and accessGroups (id, workspaceId, name, tier). Ensure all foreign key relationships have proper cascade rules and indexes. Write a seed script to populate initial test data.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Multi-Tenant Access Control

   Implement self-hosted authentication via better-auth with role-based access control middleware restricting channel and course access based on membership tiers.

   Integrate better-auth into the Next.js project supporting email/password sign-in and session management. Create custom database tables for user sessions and accounts linked to Turso. Build middleware that checks if a requesting user belongs to a workspace and possesses the required accessGroup permissions to view specific private channels or gated course modules. Add an admin settings panel allowing workspace owners to manage user roles and membership tiers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Real-time Chat Channels and Threaded Discussions

   Build real-time chat channels and threaded discussions utilizing Pusher for live message broadcasting, unread state tracking, and emoji reactions.

   Build a real-time chat interface using Next.js Server Actions and Pusher channels. Create UI components for channel sidebars, message history feeds with infinite scroll, message input with attachment support, threaded reply drawers, and inline emoji reactions. Implement client-side WebSocket subscription handlers that instantly update the message feed and track unread counts when new messages arrive without requiring a page refresh.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Nested LMS Course Engine with Drip Schedules

   Develop a course management system supporting evergreen and cohort modules, lesson content rendering, progress tracking, and scheduled drip access.

   Implement a nested Learning Management System (LMS) within the Next.js app. Create instructor views to create courses, sections, and lessons with markdown content and video embeds. Build student views with a course outline sidebar, progress tracking bars, and completion checkboxes. Implement drip-schedule logic that restricts lesson visibility based on the student's enrollment date plus the lesson's dripDays configuration, verifying access against user progress records.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05WebRTC Voice and Video Rooms Integration

   Integrate LiveKit to power in-platform voice and video rooms supporting up to 256 participants with screen sharing and audio controls.

   Integrate LiveKit into the platform to power live voice and video rooms. Set up a token generation API route that authorizes authenticated users to join specific room names with appropriate participant metadata. Build a React video room component using LiveKit components featuring grid participant layouts, camera/microphone toggles, screen sharing capabilities, and an active speaker indicator bar. Handle connection state errors and reconnection UX gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Stripe Payments and Subscription Access Sync

   Configure Stripe Checkout and webhook listeners to process membership purchases and automatically update user access groups upon successful payment.

   Set up Stripe payment integration in Next.js. Create an API route to generate Stripe Checkout sessions for workspace membership tiers and one-time course purchases. Implement a Stripe webhook receiver endpoint that listens for customer.subscription.created, customer.subscription.updated, and invoice.payment_succeeded events. When webhooks fire, securely update the database user records and access groups to grant or revoke permissions automatically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Pulse AI Co-builder Assistant

   Incorporate an AI assistant powered by the Anthropic API that parses natural language prompts to scaffold community structures, channels, and course outlines.

   Build an AI co-builder feature named Pulse using the Anthropic API SDK. Create a chat drawer interface where creators can type natural language prompts describing their community business. Write a server-side route that sends the prompt along with a structured system prompt to Claude Sonnet, returning JSON instructions to automatically create workspace channels, default course modules, and welcome post templates in the database. Implement confirmation UI allowing creators to review and execute the generated structure.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Heartbeat