VibeCut: Browser-Based Non-Linear Video Editor
Next.js 15 | React 19 | Remotion | Firebase | Redux Toolkit
MY Role and summary
Architected and engineered a production-ready video editing platform from the ground up. While many web editors rely on simple canvas APIs, I utilized Remotion and React 19 to build a professional-grade timeline interface. The system handles real-time preview synchronization, multi-track manipulation, and cloud-based rendering pipelines, bridging the gap between desktop performance and web accessibility.
KEY CHALLENGES SOLVED
- Real-Time State Persistence: Engineered a custom Redux middleware (persistenceMiddleware.ts) to handle complex editing states. Achieved <1s debounce times for auto-saving to localStorage, preventing data loss during crashes while maintaining a 60fps preview.
- Race Condition Handling: Solved critical concurrency issues between user edits and auto-save operations using action-based filtering and selective state serialization.
- Dynamic Composition Orchestration: Overcame Remotion's static limitations by synchronizing compositionDurationInFrames across Redux state and the UI, ensuring consistent playback during dynamic zoom (0.1x-4x) and track reordering.
- Smart Cloud Rendering: Implemented hash-based change detection to trigger re-renders only when the composition differs from the last export, reducing cloud processing costs by roughly 40%.
CORE FEATURES
- Multi-Track Timeline: Full drag-and-drop support for video, audio, text, and images with frame-level precision and waveform visualization (via WaveSurfer.js).
- Type-Safe Asset Pipeline: Built a robust useFileUpload hook with validation for MIME types (MP4, MOV, MP3, PNG, etc.) and automatic metadata extraction.
- Dual-Layer Storage Architecture: Separated project lifecycle metadata from granular edit history (videoProjectStorage vs projectStorage) to optimize load times and data integrity.
- Text & Effects: Integrated 900+ Google Fonts with Framer Motion-powered animation presets (fade, slide, bounce) and custom canvas property controls.
SOME COMPONENTS FEATURE
.png&w=1200&q=75)
.png&w=640&q=75)
.png&w=640&q=75)
.png&w=640&q=75)
.png&w=640&q=75)
.png&w=640&q=75)
TECHNICAL IMPACT
VibeCut demonstrates mastery of modern web architecture by combining React 19's concurrent features with Remotion's composition model. The custom Redux middleware pattern showcases deep understanding of state management at scale, while the hash-based rendering optimization reflects production-grade thinking about cost and performance. This project bridges the gap between desktop-class video editing and browser-based accessibility, proving that professional tools can exist entirely in the web platform.