ShortsAI Dashboard

Inspiration

Creating engaging YouTube Shorts can be time-consuming and requires multiple tools for scripting, voiceovers, captions, and editing. We wanted to simplify this process by building an all-in-one AI-powered platform that enables anyone to generate professional-quality Shorts in minutes.

What it does

ShortsAI lets users generate YouTube Shorts videos by writing a script, selecting an AI voice, choosing a background, customizing captions, and adding music. The app automatically combines these elements, generates the video, and stores it in the cloud for easy access and sharing.

How we built it

We built the complete app using Bolt.new that picked the right tech stack of React, TypeScript, Vite, Zustand, and Tailwind CSS. The backend is powered by Node.js, Express, and FFmpeg for video processing. Supabase handles cloud storage and authentication. The app integrates AI voice generation with ElevenLabs, real-time progress updates using websockets, and cloud-based video management.

Challenges we ran into

Integrating FFmpeg for dynamic video generation and ensuring compatibility across platforms.
Bolt couldn't handle bigger project size and kept showing the message for large project.
Providing real-time feedback and previews to users during video generation with websockets, since it is webcontainer environment.
Eleven labs api calls also had issues with webcontainer environment (possibly CORS restrictions)

Accomplishments that we're proud of

Seamless end-to-end workflow from script to finished video.
Real-time video preview and progress updates.
Flexible customization options for captions, voices, and backgrounds.
Reliable cloud storage and easy video access via Supabase.

What we learned

Deepened our understanding of video processing with FFmpeg.
Gained experience integrating cloud storage and authentication with Supabase.
Learned best practices for building responsive, user-friendly React apps.
Learned to integrate with Elevenlabs to get voice overs and TTS programmatically.