How to vibe codeBlitzReels

Prerequisites

• Node.jsfree

  Required runtime for Next.js, Remotion video bundles, and API services.

• GitHubfree

  Source code repository and CI/CD deployment pipelines.

• Supabase Accountfree

  Hosts project metadata, user authentication, and relational tables.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack Next.js apps, setting up Remotion templates, and writing complex API routes.

• Cursor

  Excellent AI-native IDE for fine-tuning timeline UI components and inspecting React video frames.

Build guide

1. 01Scaffold Next.js App & Database Schema

   Initialize the Next.js project with Tailwind CSS and set up Supabase database schemas for users, projects, media assets, transcripts, and timeline items.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client configuration file and write SQL migrations for tables: 'projects' (id, user_id, title, status, created_at), 'media_assets' (id, project_id, storage_url, duration_seconds, file_size), 'transcripts' (id, media_id, raw_json, words_json), and 'timeline_items' (id, project_id, start_time, end_time, track_index, metadata). Ensure strict foreign key relations and RLS policies.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Video Ingestion & Cloudflare R2 Uploads

   Implement chunked file uploads and YouTube URL ingestion, storing raw assets in Cloudflare R2 storage buckets.

   Implement a file upload and ingestion pipeline in Next.js. Create API routes that generate presigned PUT URLs for Cloudflare R2 so users can upload large multi-gigabyte video files directly. Add a helper endpoint to accept a YouTube URL, download the video using yt-dlp inside a server worker or temporary container, and store the output file into the R2 bucket. Save the resulting asset reference into the 'media_assets' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Deepgram Transcription & Moment Scoring

   Integrate Deepgram Nova-2 to generate word-level timestamped transcripts and use OpenAI GPT-4o to analyze and score viral moments.

   Build an asynchronous transcription worker using Trigger.dev that triggers upon successful video upload. Send the audio stream to Deepgram Nova-2 API with word-level timestamps enabled. Save the resulting JSON transcript into the 'transcripts' table. Then, pass the transcript text to OpenAI GPT-4o with a structured JSON prompt to score segments from 0-100 based on viral hook potential, and store the resulting clip suggestions in a 'clip_suggestions' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Professional Timeline & Ripple Edit State Machine

   Build an interactive web-based timeline supporting track selection, split/trim operations, and automatic subtitle ripple synchronization.

   Build a React video editing timeline component. It must display an audio waveform, video preview, and a synchronized subtitle track with word-level timing boxes. Implement state management for timeline item edits (trimming edges, splitting at playhead, deleting ranges). Ensure that when a time range is deleted or silence is cut, all subsequent subtitle words and timeline items perform a ripple shift automatically without breaking timestamp sync.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Remotion Video Rendering Pipeline

   Set up a Remotion React-based video composition template to render short-form vertical clips with dynamic captions and background layers.

   Create a Remotion composition package within the repository designed for vertical 9/16 short-form video export (1080x1920 at 30fps). The composition must accept props for video source URL, subtitle words array with active word highlighting, and background fill effects. Write a server-side render trigger route that invokes Remotion programmatically, passes the project timeline state as input props, renders the MP4 file via Remotion serverless rendering or AWS Lambda, and saves the exported file back to Cloudflare R2.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Agent CLI & OpenAPI Endpoints

   Expose an OpenAPI specification, REST endpoints, and a lightweight CLI wrapper so AI coding agents like Claude Code can inspect projects and trigger edits programmatically.

   Implement a secure REST API and OpenAPI specification under '/api/v1' for programmatic video editing. Include endpoints to list project transcripts, apply automated silence removal plans, insert B-roll items, update caption word texts and timings, and queue video exports. Write a simple CLI tool in TypeScript using Commander.js that authenticates with a bearer token and allows running commands like 'blitz clips generate <project_id>' or 'blitz timeline trim <item_id> --start 5 --end 15' from the terminal.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for BlitzReels