Dreamreel

Inspiration

Creating engaging video content is essential for creators, marketers, and social media teams. It is also the age of AI where video generation and image generation with AI is possible. There are also tons of online video editor tools that leverages AI but extracts all the creative control and freedom from the hand of users. So I decided to build an AI-first video editor that can give more freedom and put more creative control in the hands of the users.

What it does

Dreamreel is a web-based video editor that allows users to:

Import videos, images, audio tracks, and add text overlays
Define aspect ratios and project descriptions
Trim, split, reorder, and layer media clips on a timeline
Preview edits in real time
generate images, audios from text using elevenlabs
Export the final video as an .mp4 using scalable cloud rendering (Remotion Lambda)(in progress)

How we built it

Dreamreel is built with a modern, scalable tech stack:

Frontend: Next.js (App Router), React, Tailwind CSS, shadcn/ui, Lucide React icons for a beautiful and responsive UI
Video Engine: Remotion for video composition and Remotion Lambda for scalable cloud rendering
Database: SQLite (Libsql) with Drizzle ORM for project and asset management
Authentication: Better Auth for secure user authentication
Storage: Backblaze S3-compatible API for efficient media storage
Other: TypeScript for type safety, and a modular, well-documented codebase

Challenges we ran into

Integrating Remotion’s advanced video capabilities into a seamless, real-time web UI
Ensuring smooth uploads, previews, and timeline interactions for large media files
Building a scalable export pipeline using Remotion Lambda
Designing a beautiful, production-worthy UI that’s also highly functional and responsive
Managing state and performance for complex, multi-layered video projects in the browser

Accomplishments that we're proud of

Delivering a fully functional, cloud-based video editor with real-time preview and export
Achieving a beautiful, intuitive, and responsive UI that feels modern and delightful to use
Seamless integration of Remotion Lambda for scalable video rendering
Robust asset management and timeline editing features
Modular, maintainable codebase with best practices in security and performance

What we learned

Deep insights into video processing and rendering in the browser and cloud
Learned about Capabilities of Bolt, how to use it, prompt better, manage context and save token and use Bolt to its full potential.
Advanced state management and performance optimization in React/Next.js

Things incomplete and in progress

video export rendering
Saving video projects (right now everything is happening client side, so the videos and states are not being saved)

What's next for Dreamreel

Video generation with AI, integrating file services, generating sound effect, video enhancing, image manipulation and editing like background removal etc and much more.
More advanced editing tools (transitions, effects, AI-powered features)