Frameflow
Editor de video basado en navegador impulsado por IA
EL DESAFÍO
Los creadores de contenido necesitan producir videos cortos de alta calidad a escala, pero las herramientas de edición profesionales son complejas, solo para escritorio y no aprovechan la IA para acelerar el flujo de trabajo. La brecha entre tener una idea y lanzar un video terminado sigue siendo demasiado grande.
STACK TECNOLÓGICO
Enfoque de ingeniería
Flujo de generación con IA primero
En lugar de comenzar con una línea de tiempo en blanco, los usuarios describen su video en lenguaje simple. Gemini AI genera un desglose de escenas estructurado, creando un proyecto listo para editar en segundos.
Arquitectura impulsada por esquema
Diseñé el modelo de datos completo antes de escribir un solo componente de UI. Proyectos, escenas, líneas de tiempo, activos, trabajos de renderizado y notificaciones tienen límites y relaciones claras, haciendo el sistema extensible sin reescrituras.
Entrega progresiva de funciones
Lancé autenticación, panel de control y generación de IA primero para validar el ciclo principal antes de invertir en el editor. Cada función está construida sobre una base estable en lugar de en paralelo con ella.
Infraestructura real desde el primer día
Usé Supabase con agrupación de conexiones, estrategia de migración adecuada y patrones de eliminación suave desde el principio, no como una ocurrencia tardía, para que el sistema se comporte correctamente bajo uso real.
Decisiones técnicas clave
Las elecciones que dieron forma a la arquitectura y determinaron la mantenibilidad a largo plazo.
Gemini AI para generación de escenas
Usé Google Gemini 3 Flash para impulsar el flujo de generación de video con IA
La salida estructurada de Gemini y la gran ventana de contexto lo hicieron ideal para generar desgloses de múltiples escenas con formato JSON consistente. El nivel gratuito soporta uso real de desarrollo sin costo inicial.
Eliminación suave de proyectos
Los proyectos nunca se eliminan inmediatamente, se mueven a una papelera de 30 días
La eliminación permanente es una puerta de un solo sentido. La eliminación suave da a los usuarios confianza para actuar rápidamente sin miedo, y da al producto espacio para agregar flujos de restauración, patrones de deshacer e historial de actividad más adelante.
Nueva pestaña para generación de IA
El flujo de generación de IA se abre en una nueva pestaña en lugar de un modal o redirección
La generación toma varios segundos. Abrir en una nueva pestaña permite a los usuarios continuar trabajando en el panel de control sin bloquear su contexto, y crea una separación clara entre la entrada del prompt y la experiencia de revisión.
Estrategia de migración única
Todos los cambios de esquema agrupados en una migración en lugar de incrementales durante el desarrollo
Los productos en etapa temprana cambian rápido. Agrupar cambios de esquema hasta que el modelo de datos se estabilice evita ruido de migración y hace que el historial sea significativo cuando importa.
Desafíos y soluciones
La API de Gemini devolvía JSON inconsistente con comas finales y respuestas parciales que rompían el análisis
Construí una capa de análisis robusta usando regex para extraer el bloque JSON de la respuesta completa, luego eliminar comas finales antes del análisis. Esto hizo la integración resiliente a la varianza de salida del modelo.
El agrupador de conexiones de Supabase (pgbouncer) bloqueaba las migraciones de Prisma debido a limitaciones del modo de transacción
Configuré dos cadenas de conexión separadas: modo de transacción para consultas de la app y modo de sesión para migraciones, usando el campo directUrl de Prisma. Esta es ahora la configuración recomendada de Supabase + Prisma para producción.
Prisma Client estaba generando tipos obsoletos después de cambios de esquema, causando errores de TypeScript que no reflejaban el estado real de la base de datos
Establecí un flujo de trabajo claro: cambio de esquema → db push → prisma generate → reiniciar servidor TS. Documenté esto como el ciclo de desarrollo estándar para evitar confusión durante el desarrollo activo.
Resultados e impacto
Frameflow tiene un ciclo de generación de IA funcionando: los usuarios describen un video, Gemini devuelve un desglose estructurado de escenas y se crea un proyecto en la base de datos con datos completos de escenas. El panel de control, la página de proyectos y la pantalla de revisión son completamente funcionales con datos reales.
APRENDIZAJES CLAVE
Las integraciones de IA tienen tanto que ver con la ingeniería de prompts y el análisis de salida como con las llamadas a la API. El trabajo real es hacer que la salida del modelo sea suficientemente determinista para construir un producto encima.