ShortifyAI

Inspiration

Content creators today face a massive challenge: the pressure to be present everywhere. While long-form content builds depth, short-form content drives discovery. We realized that creators were spending more time editing clips than creating new content. We wanted to build a tool that bridges this gap—giving creators their time back while maximizing their reach across platforms like TikTok and Instagram.

What it does

ShortifyAI acts as an intelligent production assistant. Users simply paste a link to a long YouTube video or upload a file. The system analyzes the content to identify the most engaging highlights, automatically reframes them for vertical screens (9:16), generates accurate captions, and applies trending editing styles. It effectively repurposes one piece of content into multiple viral assets.

How we built it

We built ShortifyAI using the Next.js framework for a robust and responsive frontend, styled with Tailwind CSS for a premium "glassmorphism" aesthetic. We integrated Framer Motion to create a fluid, highly interactive user experience. For the intelligence layer, we utilized Google's Generative AI (Gemini) to analyze video context and generate engaging captions. The backend data and authentication are managed by Supabase, ensuring secure and scalable user data handling.

Challenges we ran into

One of the main challenges was creating a dashboard that felt both powerful and simple. We struggled with layout shifts and responsive design, specifically ensuring the sidebar and main content areas interacted smoothly on different screen sizes without breaking the visual flow. We also had to work hard to synchronize complex animations without compromising the application's performance.

Accomplishments that we're proud of

We are incredibly proud of the "Premium SaaS" feel of the application. The user interface is dark, sleek, and modern, comparable to high-end professional tools. We successfully implemented a seamless navigation system and a "Quick Start" workflow that reduces the friction from login to content creation to near zero.

What we learned

We learned a great deal about the intricacies of Next.js 13+ app directory structure and client vs. server components. We also deepened our understanding of Framer Motion—specifically how to handle layout animations effectively to avoid layout thrashing. Integrating AI APIs taught us how to structure prompts effectively to get consistent, high-quality outputs for video summaries.

Built with

• Next.js
• React
• TypeScript
• Tailwind CSS
• Framer Motion
• Supabase
• Google Gemini API
• Lucide React

What's next for ShortifyAI

We plan to introduce "Brand Voice" customization, allowing the AI to learn a creator's specific editing style and humor. We are also working on direct social media scheduling, so users can publish their generated shorts to TikTok and YouTube directly from the ShortifyAI dashboard. Finally, we aim to add multi-language support to help creators go global instantly.

Built With

• api
• css
• framer
• gemini
• google
• motion
• next.js
• react
• supabase
• tailwind
• typescript