# How to Vibe Code Your Own Headliner (and Stop Paying for It)

> Turn audio and podcasts into viral social media videos

- Site: https://headliner.app
- Category: Creator Tools / Video Production
- Platforms: Web app, iOS app, Android app
- Verdict: **Serious undertaking** (48/100 vibecodeable)
- Estimated effort: 3-5 weeks of focused coding and debugging

## Verdict

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.

### 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

## What it 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

Founded 2018.
Team size: 10-50.

## The hard parts

- 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 vibe code Headliner

### Prerequisites

- Node.js (free): Required runtime for the Next.js full-stack framework and build tooling.
- GitHub (free): Source control and integration bridge for deploying background workers and web apps.
- Fly.io account (free tier / usage-based): Needed to host persistent Docker containers capable of running FFmpeg for video rendering.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding multi-file Next.js apps and debugging complex media worker pipelines.
- Cursor: Ideal for iterative UI work, waveform timeline adjustments, and React component styling.

### 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

- 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

1. **Project 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.
```

2. **Audio 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.
```

3. **OpenAI 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.
```

4. **Transcript 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.
```

5. **FFmpeg 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.
```

6. **Export 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

**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 the SaaS instead: $12.99/mo (Pro)
- Build time: 35-50 hours
- AI tool credits: $20/mo (Claude/Cursor Pro)
- Break-even: N/A (built for personal use & learning)

## Sources

- [Headliner Official Site & Getting Started Guide](https://headliner.app)
- [Headliner Support Docs - Pricing & Features](https://www.headliner.app/pricing)