I built Captrix AI for TestSprite Hackathon Season 3: Build the Loop.
Captrix is a browser-based caption studio for short creator videos. It turns speech into editable captions, lets creators adjust timing visually, apply different styles, preview platform-specific formats, and export a finished video with captions burned in.
Why I Built It
Adding captions to short videos often requires several separate tools. One generates the transcript, another styles the captions, and a full video editor is needed to correct timing.
I wanted to create a focused application where the complete workflow could happen in one place:
- Upload a short video
- Generate captions from speech
- Edit text and timing
- Apply creator-ready styles
- Preview different platform formats
- Export the captioned video
Building the Studio
I used OpenAI Codex as my primary coding agent and built the application with Next.js, React, TypeScript, Tailwind CSS, Hugging Face Transformers, and browser media APIs.
The editor supports formats for Reels, TikTok, Shorts, YouTube, Facebook, Feed, and square posts. It also includes caption presets such as Creator Pop, Karaoke, Meme Stack, Minimal, and Neon Punch.
The timeline became one of the most important parts of the project. Caption blocks can be moved, resized with timing handles, and edited directly. Silence between spoken sections remains caption-free instead of leaving old text on the video.
Building Through a Testing Loop
Instead of waiting until the end to test everything, I followed a maker-checker loop:
- Build a small user-facing feature with Codex.
- Run type checks and a production build.
- Deploy the increment to Vercel.
- Test the live deployment using TestSprite CLI.
- Fix the behavior or test contract.
- Record the iteration in LOOP.md.
This process caught several real issues, including:
- Frontend tests being skipped by an incorrect batch command
- Missing stable selectors for browser tests
- Captions remaining visible during silence
- Timeline content overflowing beneath the inspector
- Export progress becoming unsynchronized
- Media cleanup errors after video rendering
- Outdated tests checking UI that had already changed
- The final TestSprite suite covers the landing transition, editor controls, platform switching, caption styling, caption controls, export guards, and timeline behavior. It also runs against the deployed application through GitHub Actions.
What I Learned
The most useful part of the hackathon was treating testing as part of product development instead of a final checklist.
Every failed or blocked test forced me to clarify either the application behavior or the test contract. That made Captrix more practical, predictable, and consumer-focused.
Try Captrix AI
Live application: https://captrix-ai.vercel.app/
GitHub repository: https://github.com/ayush002jha/captrix
X/Twitter Post:
Top comments (0)