Hazzot Video Editor

Hazzot is the AI-powered, client-side video editor that helps you create stunning videos – from storyboard to sound – without ever leaving your browser.

Comment

Inspiration: When a Hackathon Asks "Build What?" and You Say "A Whole Video Editor?!"

Let's be honest, who in their right mind sets out to build a whole video editor for a hackathon submission? Turns out, I was that silly person! Oof. But jokes aside, the core inspiration was twofold:

  1. Personal Pain Point & Next-Level Building: After dabbling in a "one-shot" project (shoutout to Realityripples.online ), I craved building something of genuine personal use. Video editing, while notoriously complex, always felt like a frontier ready for a solo developer to conquer with enough computational wizardry. I wanted to create a tool I'd genuinely use, especially one with AI features like storyboard, narration, and sound effect generation.
  2. Bolt.new's Mind-Blowing Speed: This was the truly "scary & exciting" part! The sheer velocity of development possible with Bolt.new felt less like what I, as an individual, could push in a day, and more like what a dedicated team might achieve in a month. This immediate feedback loop from idea to functional code was a huge driver. It literally flipped the script on how I perceive rapid prototyping and complex application development.

What I Learned: AI's Superpowers & the Art of Vibe-Coding a Behemoth

This project was a masterclass in the capabilities of modern AI and "vibe coding." For one, I learned that AI can truly accelerate development at an unprecedented pace. What previously felt like a multi-month endeavor for a video editor became a rapid sprint. Secondly, I gained deeper appreciation for the intricate dance of UI, logic, and performance that complex applications like video editors demand.

A crucial takeaway, even with our benevolent AI overlords handling much of the heavy lifting, is that well-structured, clean code still reigns supreme. There were moments when "the AI did not vibe properly," especially with larger codebases, and it truly highlighted that for AI to be a phenomenal assistant, it still needs a solid foundation, much like any seasoned programmer does.

How I Built It: From Prompt to Premiere (Almost!)

Hazzot Video Editor was built primarily with Bolt.new, leveraging its incredible ability to translate prompts into functional code. The core idea was to craft an AI-powered, client-side editor that keeps all your precious media local.

Here’s the magical tech recipe:

  • Foundation: React 18, TypeScript, Vite, and Tailwind CSS for a sleek, responsive UI. Redux Toolkit manages the state, with a super custom undo/redo system so I could experiment fearlessly.
  • AI Brains: Google Gemini™️ drives the intelligent AI Storyboard Generator which transforms ideas into detailed scene plans, complete with clip suggestions, text, music, and SFX cues. Gemini also powers our interactive AI Chat, contextually understanding commands and executing editing tasks.
  • Voice & Sound: ElevenLabs™️ brings audio to life with high-quality text-to-speech for narration and AI-generated sound effects, directly adding them to your resources.
  • Heavy Lifting (Client-Side!): FFmpeg.wasm is the unsung hero, handling all high-performance video processing and export entirely within your browser – ensuring privacy and bypassing server queues. It was a journey wrangling its multi-threaded capabilities into submission!
  • Data & Deploy: Supabase Edge Functions manage anonymous export analytics, and Netlify takes care of lightning-fast deployments.

The "storyboard generator" feature became the true orchestrator. From a mere idea prompt, it can generate scenes, narrations, text, sound effects, and even lay everything onto the timeline tracks. It's fantastic for quickly visualizing and iterating on concepts, giving a strong foundation for any project.

Challenges Faced: The Tokens, The Timelines, and The "What Do I Build?!" Existential Crisis

Every hero's journey has its dragons, and Hazzot's were quite memorable:

  1. FFmpeg on the Front Lines: The biggest beast was wrestling FFmpeg.wasm into shape, especially ensuring multi-threading worked correctly and dealing with deployment headaches on Netlify. Getting FFmpeg to seamlessly run in the deployed environment took several nail-biting hours on the final day – but hey, it works now!
  2. Bolt.new Tokens – The AI's Snack Habits: While phenomenal, the sheer size of the codebase sometimes led to the AI's "focus" wavering. Small CSS class name edits sometimes consumed a whopping 300k tokens, which felt like the AI was having a fancy, expensive snack. It’s a good reminder that even with AI, architecting a structured codebase is key for both the human and silicon collaborators.
  3. The Blank Canvas Dilemma: As with any creative endeavor, the start is deceptively stressful. Not because it's hard to begin, but because choosing what to begin from an ocean of possibilities is tough. This hackathon, with its open nature, amplified that. Deciding to tackle a video editor, of all things, felt both audacious and deeply personal. I believe focusing on the storyboard as the core unifying feature helped sail through this initial "idea paralysis."

Despite the occasional bug (it's cutting-edge, after all!), I'm genuinely impressed with the scope, features, and complexity that can be achieved solo or with a tiny team using Bolt.new. It's a game-changer that lets you turn grand visions into tangible applications at warp speed.

Built With

  • bolt.new
  • clsx
  • elevenlabs-api
  • ffmpeg/ffmpeg
  • ffmpeg/util-(ffmpeg.wasm)
  • google-gemini-api
  • indexeddb
  • lucide-react
  • netlify
  • react
  • redux-toolkit
  • supabase-edge-functions
  • tailwind-css
  • tailwind-merge
  • typescript
  • vite
  • xzdarcy/react-timeline-editor
Share this project:

Updates