Frameflow
AI-powered browser-based video editor
THE CHALLENGE
Content creators need to produce high-quality short-form videos at scale, but professional editing tools are complex, desktop-only, and don't leverage AI to speed up the workflow. The gap between having an idea and shipping a finished video is still too wide.
TECH STACK
Engineering Approach
AI-First Generation Flow
Instead of starting with a blank timeline, users describe their video in plain language. Gemini AI generates a structured scene breakdown — title, description, music mood, and duration per scene — creating a ready-to-edit project in seconds.
Schema-Driven Architecture
Designed the full data model before writing a single UI component. Projects, scenes, timelines, assets, render jobs, and notifications all have clear boundaries and relations, making the system extensible without rewrites.
Progressive Feature Delivery
Shipped auth, dashboard, and AI generation first to validate the core loop before investing in the editor. Each feature is built on top of a stable foundation rather than in parallel with it.
Real Infrastructure from Day One
Used Supabase with connection pooling, proper migration strategy, and soft-delete patterns from the start — not as an afterthought — so the system behaves correctly under real usage.
Key Technical Decisions
The choices that shaped the architecture and determined long-term maintainability.
Gemini AI for Scene Generation
Used Google Gemini 3 Flash to power the AI video generation flow
Gemini's structured output and large context window made it ideal for generating multi-scene breakdowns with consistent JSON format. The free tier supports real development usage without upfront cost.
Soft Delete for Projects
Projects are never immediately deleted — they move to a 30-day trash instead
Permanent delete is a one-way door. Soft delete gives users confidence to act quickly without fear, and gives the product room to add restore flows, undo patterns, and activity history later.
New Tab for AI Generation
The AI generation flow opens in a new tab instead of a modal or redirect
Generation takes several seconds. Opening in a new tab lets users continue working in the dashboard without blocking their context, and creates a clear separation between the prompt input and the review experience.
Single Migration Strategy
All schema changes batched into one migration instead of incremental ones during development
Early-stage products change fast. Batching schema changes until the data model stabilizes avoids migration noise and makes the history meaningful when it matters.
Challenges & Solutions
Gemini API returned inconsistent JSON with trailing commas and partial responses that broke parsing
Built a robust parsing layer using regex to extract the JSON block from the full response, then strip trailing commas before parsing. This made the integration resilient to model output variance.
Supabase connection pooler (pgbouncer) blocked Prisma migrations due to transaction mode limitations
Configured two separate connection strings — transaction mode for app queries and session mode for migrations — using Prisma's directUrl field. This is now the recommended Supabase + Prisma production setup.
Prisma Client was generating stale types after schema changes, causing TypeScript errors that didn't reflect the actual database state
Established a clear workflow: schema change → db push → prisma generate → restart TS server. Documented this as the standard dev loop to avoid confusion during active development.
Outcomes & Impact
Frameflow has a working AI generation loop — users describe a video, Gemini returns a structured scene breakdown, and a project is created in the database with full scene data. The dashboard, projects page, and review screen are fully functional with real data.
KEY TAKEAWAYS
AI integrations are as much about prompt engineering and output parsing as they are about API calls. The real work is making the model's output deterministic enough to build a product on top of.