How to vibe codeZencastr

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack application.

• GitHubfree

  Code repository hosting and integration with Vercel and Modal.

• 

  Modal accountfree tier available

  Provides serverless GPU compute queues for running Whisper speech-to-text transcription models.

AI coding tools

• Claude Code

  Executes complex multi-file scaffolding across the Next.js frontend, WebRTC hooks, and Python backend services.

• Cursor

  Ideal for fine-tuning complex React client hooks managing MediaRecorder APIs and Canvas video layouts.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for single-user authentication.

   Initialize a new Next.js project with App Router, TypeScript, and Tailwind CSS. Configure Turso SQLite with Drizzle ORM to support tables for users, podcast_sessions, recording_tracks (storing file URLs, participant IDs, duration), and transcripts. Implement better-auth for secure user login and session management. Set up environment variables and create a clean dashboard UI layout matching a professional podcast studio aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02WebRTC Signaling and Room Management

   Build the real-time room signaling layer allowing hosts and guests to join a session using WebRTC peer connections.

   Implement a WebRTC signaling mechanism using Next.js route handlers and Server-Sent Events (SSE) or simple WebSocket polling. Create a Session Room page where users can input a room ID, request camera and microphone permissions via navigator.mediaDevices, render local and remote video streams in a responsive grid layout, and handle peer connection ice candidate exchange.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Client-Side Local Multi-Track Recording

   Implement client-side MediaRecorder API logic to capture uncompressed audio tracks and high-definition video locally on each user's machine.

   Build a client-side recording hook using the MediaRecorder API that captures raw audio and video tracks independently on each participant's device into local browser memory buffer chunks. Implement a multi-chunk background uploader that pushes recorded chunks to Cloudflare R2 or local S3-compatible storage once the recording session ends, ensuring robust error handling and retry logic for dropped uploads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Asynchronous Transcription Pipeline on Modal

   Deploy a Python FastAPI worker on Modal that pulls recorded audio tracks and transcribes them using OpenAI Whisper.

   Create a Python FastAPI service deployed via Modal using the @app.function decorator with GPU support. Implement an endpoint that accepts an audio file URL, downloads it, runs OpenAI Whisper transcription with timestamped word segments and speaker diarization, and returns structured JSON transcription data back to the Next.js backend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Text-Based Editor and Episode Dashboard

   Build an interactive text-based editor interface allowing users to review transcripts, click timestamps to jump to video points, and manage generated media.

   Build an interactive dashboard and text-based editor page in Next.js. Display the transcript with synchronized timestamps alongside an HTML video player. Allow users to select text blocks to trim segments, view episode analytics summaries, and manage recorded tracks with download buttons for individual WAV and video files.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Zencastr