How to vibe codeAlitu

Prerequisites

• Node.jsFree

  Required runtime for running Next.js frontend and backend API routes.

• GitHubFree

  Version control and repository hosting to deploy via cloud providers.

• 

  OpenAI API KeyPay-as-you-go

  Provides Whisper and GPT models for transcription and show note generation.

AI coding tools

• Claude Code

  Agentic terminal coding tool capable of scaffolding the full-stack Next.js architecture, writing complex API routes, and debugging client-side media recorder state.

• Cursor

  Ideal AI-native editor for refining the complex transcript-to-waveform synchronization UI and interactive timeline components.

Build guide

1. 01Project Scaffolding & Database Schema

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

   Initialize a new Next.js project with Tailwind CSS, TypeScript, and App Router. Set up Drizzle ORM with a Turso SQLite database connection. Define the database schema for podcasts, episodes, tracks, and transcripts with appropriate foreign key relationships and timestamps. Implement better-auth configured for email/password authentication. Create a clean dashboard layout shell with a sidebar navigation for 'Shows', 'Episodes', 'Recording Studio', and 'Hosting'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02In-Browser Audio Recording Studio

   Build the recording interface using the browser MediaRecorder API with local chunking and background upload safety.

   Create a browser recording studio page in Next.js using the Web Audio and MediaRecorder APIs. Support recording solo audio with live microphone waveform visualizers using Canvas. Implement local IndexedDB chunking to store recorded audio blocks client-side in real-time, preventing data loss during network interruptions. Provide controls for Start, Pause, Stop, and a final upload mechanism that streams the recorded Blob to Cloudflare R2 via presigned URLs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Server-Side Audio Processing Pipeline

   Create an asynchronous processing worker that normalizes audio, removes background hum, and prepares master MP3 files using FFmpeg.

   Build a background job worker using Node.js and Fluent-FFmpeg that triggers upon episode upload. Implement an audio engineering pipeline that applies high-pass filtering (hum removal), noise suppression filters, and standardizes audio loudness to -16 LUFS (podcast standards) with dynamic range compression. Export the processed audio into a standardized MP3 file, calculate its duration and file size, and store the output back in cloud storage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Transcription & Show Notes Generation

   Integrate the OpenAI Whisper API to generate time-stamped transcripts and use an LLM to generate formatted show notes.

   Implement an API route that sends processed episode audio files to the OpenAI Whisper API to receive a time-stamped JSON transcript. Parse the transcript segments and store them in the database linked to the episode ID. Create an additional LLM integration step using the transcript text to automatically generate structured show notes, key bullet points, and social media summaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Text-Based Transcript Editor

   Build an interactive editing interface where users can delete transcript segments to slice and edit the underlying audio timeline.

   Create an interactive React component for text-based audio editing. Display the Whisper transcript with editable text blocks and clickable timestamps. When a user deletes a sentence or paragraph from the text view, calculate the corresponding audio time range start and end points. Send these cut instructions to the backend FFmpeg processor to splice the master audio file accordingly and regenerate the waveform preview.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Podcast RSS Feed & Web Hosting

   Generate standard RSS XML feeds for podcast directory distribution and build a simple public podcast website template.

   Build an RSS feed generator endpoint adhering strictly to Apple Podcasts and Spotify RSS specifications (including iTunes namespace tags, enclosure URLs, duration, explicit tags, and pubDate). Create a public podcast landing page and episode directory within the app that renders published episodes with an embedded HTML5 audio player, show notes, and subscription links.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Alitu