How to vibe codeHeadliner
Turn audio and podcasts into viral social media videos
headliner.app ↗Creator Tools / Video Production
The verdict: can you vibe code Headliner?
Build a subset of Headliner focused on local audio uploads, Whisper transcripts, and a basic FFmpeg audiogram renderer; the catch is orchestrating heavy server-side video rendering without timing out serverless functions.
Headliner relies on robust media pipelines that take real engineering effort to piece together. While transcribing audio via Whisper and parsing podcast RSS feeds are straightforward, orchestrating background video rendering jobs with FFmpeg, syncing dynamic waveforms to audio streams, and building a responsive web-based text-editor for cuts will test your patience. A solo developer can build a functional personal tool for clipping local audio and exporting watermarked audiograms, but managing containerized queues on a VPS requires manual ops work.
Estimated effort: 3-5 weeks of focused coding and debugging
What you can't replicate
- Optimized multi-tenant video render farm running at low unit cost
- Massive ecosystem of pre-built professional design templates and styles
- Built-in integrations with dozens of social platform distribution APIs
Founded
2018
Raised
—
Team
10-50
Cheapest paid tier
$0/mo
What Headliner does
An all-in-one marketing toolkit for podcasters and audio creators to generate audiograms, transcripts, smart clips, and automated social posts.
Core features
- Audio file ingestion and RSS feed parsing
- Speech-to-text transcription with timestamp alignment
- Text-based audio and video editor (Eddy)
- Automated waveform generation and animation styles
- Server-side media rendering pipeline for video exports
- Smart clipping based on content or manual highlight selection
- Background job orchestration for heavy processing queues
- Automated publishing workflows triggered by new podcast episodes
The business
Pricing
- Forever Free$0/mo
- Basic$7.99/mo
- Pro$12.99/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 5 — after that, every month is money kept.
The hard parts of vibe coding Headliner
- Server-side media processing orchestration (FFmpeg rendering at scale under load)
- Precise client-server synchronization for text-based audio clipping and scrubbing
- Background worker queue management for long-running video generation jobs
- Handling edge cases in podcast RSS enclosure URLs and third-party media formats
How to vibecode Headliner
Prerequisites
Node.jsfree
Required runtime for the Next.js full-stack framework and build tooling.
GitHubfree
Source control and integration bridge for deploying background workers and web apps.
Fly.io accountfree tier / usage-based
Needed to host persistent Docker containers capable of running FFmpeg for video rendering.
AI coding tools
Recommended stack
| Frontend | Next.js (App Router) + Tailwind CSS + Lucide Icons |
|---|---|
| Backend | Next.js API Routes + BullMQ / Node worker process running FFmpeg |
| Database | Turso (SQLite over HTTP) for user data, jobs, and transcript segments |
| Auth | better-auth for self-hosted secure user sessions |
| Payments | None (personal-use clone) |
| Other | OpenAI API (Whisper + GPT-4o for transcripts and show notes), Cloudflare R2 for storing raw audio uploads and exported videos, FFmpeg (inside Docker on Fly.io) for media rendering |
Hosting & infrastructure
| Fly.io | Hosting the backend API and long-running Docker container equipped with FFmpeg for video rendering jobs. | $5-10/mo |
| Cloudflare | Hosting the Next.js frontend application and serving exported videos via R2 object storage. | $0/mo |
Build guide
01Project Scaffolding & Database Schema
Initialize the Next.js 16 project with Tailwind CSS, configure Turso for SQLite data persistence, and set up better-auth for user management.
Create a new Next.js 16 project configured with the App Router, TypeScript, and Tailwind CSS. Install better-auth and configure a SQLite connection using Turso with Drizzle ORM. Define database schemas for users, projects, transcription_segments, and video_render_jobs. Create the initial authentication endpoints and sign-in/sign-up pages using clean Tailwind UI components with Lucide icons.02Audio Upload & Cloudflare R2 Integration
Implement secure file upload handling for MP3/WAV audio files and store them directly in Cloudflare R2 object storage.
Implement an audio file upload pipeline in Next.js that generates pre-signed URLs for Cloudflare R2 storage. Create a dashboard page where users can upload an audio file (MP3, WAV), preview it using an HTML5 audio player, and save the metadata record linked to their user account in the Turso database. Handle file size validation and display upload progress indicators.03OpenAI Whisper Transcription Pipeline
Integrate the OpenAI Whisper API to process uploaded audio files, generating time-coded transcripts stored in the database.
Build a transcription background action that sends uploaded audio files from Cloudflare R2 to the OpenAI Whisper API with timestamp granularity enabled. Parse the resulting JSON response containing words and timestamps, and save each segment into the transcription_segments table linked to the project. Create a transcript viewing UI component that highlights spoken words in real time as the audio plays.04Transcript Editor & Clipping Interface
Build an interactive text-based editor allowing users to select transcript ranges to create short social clips and cut audio segments.
Build an interactive text-based editor component for the transcript where users can highlight text blocks to define start and end timestamps for a social clip. Include controls to preview the selected clip range using HTML5 audio seeking. Save the clip definition (start time, end time, title) back to the project record in the database.05FFmpeg Video Rendering Worker & Queue
Set up a background worker container running FFmpeg to synthesize audio waveforms, background images, and text subtitles into an MP4 video export.
Implement a background job worker using Node.js and BullMQ backed by Redis, running inside a Docker container on Fly.io that includes FFmpeg. Write a rendering script that takes a project ID, downloads the source audio from R2, generates an animated audio waveform filter graph (-filter_complex showwaves), overlays dynamic text captions from the transcript database, and renders a 1080x1920 vertical MP4 video for social media. Upload the resulting video back to Cloudflare R2 and update the job status table.06Export Dashboard & Download Manager
Create a user dashboard to monitor video rendering progress, preview completed clips, and download final exports.
Build an export management dashboard in Next.js that lists all video rendering jobs for the user. Poll the job status endpoint every few seconds for active jobs, displaying real-time progress bars. Once a job completes, display a video preview player with a download button pointing to the signed Cloudflare R2 export URL. Add error handling and retry triggers for failed render jobs.
Cost vs paying for Headliner
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- AI Coding Assistant subscription$20
Total$20 one-time
Ongoing costs (monthly)
- Fly.io container hosting$5/mo
- OpenAI API usage (Whisper transcription)~$3/mo
Total~$8/mo
Paying for Headliner
$12.99/mo (Pro)
Your time to build
35-50 hours
AI tool credits
$20/mo (Claude/Cursor Pro)
Break-even
N/A (built for personal use & learning)
Vibe code Headliner: FAQ
- Can you vibe code Headliner yourself?
- Serious undertaking — 48/100 vibecodeable. Build a subset of Headliner focused on local audio uploads, Whisper transcripts, and a basic FFmpeg audiogram renderer; the catch is orchestrating heavy server-side video rendering without timing out serverless functions.
- How long does it take to vibe code Headliner?
- 3-5 weeks of focused coding and debugging — roughly 35-50 hours of hands-on time with an AI coding agent.
- How do you build your own Headliner?
- Scoped to personal use: Next.js (App Router) + Tailwind CSS + Lucide Icons on the front, Next.js API Routes + BullMQ / Node worker process running FFmpeg behind it, Turso (SQLite over HTTP) for user data, jobs, and transcript segments for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Headliner without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 3-5 weeks of focused coding and debugging. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Headliner instead of paying?
- About $20 one-time to start and ~$8/mo to run, versus $12.99/mo (Pro) for Headliner. Break-even: N/A (built for personal use & learning).
- What stack should you use to vibe code Headliner?
- Next.js (App Router) + Tailwind CSS + Lucide Icons; Next.js API Routes + BullMQ / Node worker process running FFmpeg; Turso (SQLite over HTTP) for user data, jobs, and transcript segments; plus OpenAI API (Whisper + GPT-4o for transcripts and show notes), Cloudflare R2 for storing raw audio uploads and exported videos, FFmpeg (inside Docker on Fly.io) for media rendering.