Construir una aplicación útil y sin pretensiones comerciales puede ahorrar dinero y, lo más importante, resolver un problema real de forma práctica. Aquí explico paso a paso cómo diseñé y llevé a producción una mini versión de una herramienta de clipping (Clip Genius) que convierte videos horizontales en clips verticales con subtítulos sincronizados, usando un flujo compuesto por herramientas gratuitas o de bajo costo: Google AI Studio para prototipos, Google Antigravity para desarrollo asistido por IA, Supabase para autenticación, y Hostinger para el deploy final.
Tabla de contenidos
- Idea y alcance 🚀
- Prototipado en Google AI Studio 🧩
- Subtítulos y sincronización ⏱️
- Diseño iterativo y ajustes de UX 🎨
- Control de versiones y GitHub 📦
- Desarrollo en Antigravity (desarrollo real) 🧑💻
- Integración con Supabase para autenticación 🔐
- Testing local y errores comunes 🐞
- Deploy automático a Hostinger y manejo de variables de entorno 🚀
- Lecciones aprendidas y recomendaciones prácticas 💡
- Cómo replicarlo: checklist y roadmap 🛠️
- Ejemplos prácticos y detalles técnicos 🔍
- Resumen final y próximos pasos 📈
Idea y alcance 🚀
La meta fue simple: reemplazar una aplicación pagada con una versión propia, pequeña y funcional. No buscaba competir con herramientas completas, solo obtener un MVP que haga lo esencial —extraer clips relevantes de un video largo, reencuadrarlos a formato vertical 9:16, agregar un hook llamativo arriba y subtítulos abajo— para publicar en Reels, TikTok o Shorts.
Tecnología mínima viable seleccionada:
- Frontend: React (React-Beat en el flujo del proyecto).
- Procesamiento de video: manipulación en navegador con WebM, MediaRecorder y Canvas API (evitar ffmpeg en servidor si es posible).
- IA: modelos para entender contenido del video y proponer cortes (se probaron modelos disponibles en Antigravity como Opus 4.5 y otros de Google).
- Autenticación: Supabase para registro/login rápido.
- Deploy: GitHub + Hostinger (deploy automático desde repositorio).
Elegir hacer el procesamiento en navegador con WebM y Canvas API reduce costos y complejidad de infraestructura. No siempre es la solución para grandes cargas, pero para el flujo de creación de contenido y tutoriales funciona excelente.
Prototipado en Google AI Studio 🧩
Antes de escribir código, es útil aterrizar la idea con un PRD simplificado y dejar claro el alcance, usuario objetivo, problema y solución. Crear ese documento en Markdown ayuda a las IAs a interpretar jerarquías y títulos correctamente.
Practica recomendada para prototipado:
- Escribir un PRD breve en Markdown: visión, usuario objetivo, casos de uso, interfaces clave y restricción de alcance (MVP).
- Pegar ese Markdown en el chat de AI Studio y pedir un prompt o flujo para un «agent» o asistente que construya un prototipo.
- Pedir que genere componentes UI y archivos base sin cambiar la tecnología principal (por ejemplo, afirmar «es React-Beat, no me cambies la tecnología»).
Con este flujo el prototipo que genera AI Studio suele crear varias pantallas y componentes listos para probar. En mi caso el primer build ya identificó «momentos» en el video y generó clips para procesar.
«La IA no entiende igual que nosotros; entiende mejor Markdown.»
Ese es un consejo práctico: usar Markdown con títulos (hashtags) y secciones claras para que la IA organice mejor output y código generado.
Subtítulos y sincronización ⏱️
Los subtítulos son críticos: ayudan a la retención en Reels/Shorts y permiten que el clip comunique el mensaje incluso con el audio en mute. El punto clave es la sincronización. La estrategia más robusta fue reutilizar las transcripciones que YouTube ya genera, porque vienen con marcas de tiempo y están sincronizadas con el audio.
Pasos recomendados para subtítulos precisos:
- Obtener la transcripción desde YouTube Studio (o generar un SRT/TXT con marcas de tiempo).
- Pasar esa transcripción al sistema IA como «fuente de la verdad» y obligarlo a usarla palabra por palabra para los subtítulos del clip.
- Ajustar la longitud de cada línea de subtítulo para que sea legible en móvil (evitar líneas excesivamente largas).
- Si la IA intenta reescribir o rehacer el texto, insistir en que use la versión con timestamps en lugar de inferir ritmo por cuenta propia.
Una observación práctica: cuando no le pasas los timestamps la IA suele «adivinar» dónde cortar y puede introducir desincronización. Por eso:
«Si tienes la transcripción con marcas de tiempo, esa es la fuente de la verdad. Debemos obligar al modelo a usarla estrictamente para la sincronización.»
En la práctica, pegando bloques de la transcripción con sus timestamps dentro de AI Studio y pidiendo explícitamente «usa estos tiempos tal cual» mejoró la precisión de los subtítulos significativamente.
Diseño iterativo y ajustes de UX 🎨
Un prototipo inicial raramente es perfecto. Pedir micro-ajustes en la UI desde el chat de IA es muy eficiente: mover un texto unos píxeles, aclarar fondos, aumentar opacidad de elementos secundarios, etc. Cada cambio puede implicar múltiples archivos de código; por eso es conveniente reiniciar la conversación cuando la cadena de instrucciones se vuelve larga para evitar confusión o alucinaciones del modelo.
Recomendaciones para cambios de diseño:
- Hacer cambios pequeños y aislados para verificar resultados rápidamente.
- Si la IA no entiende, usar la función de «restore» o volver a un commit anterior y reiniciar la conversación con la versión que funcionó.
- Cuando se pida un cambio visual, describir exactamente el objetivo (ej: «aclara los fondos un 8% y sube la opacidad de los elementos secundarios al 90%»).
Esto garantiza que las modificaciones sean reproducibles y que los assets generados sigan coherencia visual a lo largo de la aplicación.
Control de versiones y GitHub 📦
Prototipar con AI Studio o Antigravity es excelente, pero hay que poner el código en un control de versiones lo antes posible. Crear un repo privado y hacer push desde la plataforma ayuda a mantener un historial limpio y a preparar el deploy automático.
Pasos prácticos:
- Crear repositorio en GitHub (privado si lo deseas) y nombrarlo claramente, por ejemplo clip-genius.
- Hacer stage and commit de todos los cambios generados por la IA y confirmar que la estructura del proyecto está completa.
- Conectar el repo con la plataforma de desarrollo para clonar y continuar el trabajo (Antigravity o local con VS Code).
Desarrollo en Antigravity (desarrollo real) 🧑💻
Antigravity es ideal para pasar del prototipo a código funcional, con asistentes que pueden hacer npm install, corregir errores de sintaxis y levantar el servidor local. Clonar el repo y dejar que la plataforma haga una revisión inicial acelera la detección de errores triviales.
Lo que sucedió en el flujo:
- Clonar el repositorio generado por AI Studio en Antigravity.
- Antigravity ejecutó la instalación de dependencias y detectó errores de sintaxis (por ejemplo, JSX con caracteres no escapados).
- Se creó un archivo .env con la API Key de Gemini y placeholders para credenciales de Supabase cuando la integración fue solicitada.
- El asistente corrigió ciertos fallos y levantó la aplicación en servidor local para pruebas.
Ventaja: muchos errores que antes consumían tiempo ahora se detectan y corrigen automáticamente por el asistente, acelerando el tiempo al primer «Hello world».
Integración con Supabase para autenticación 🔐
Para evitar construir un sistema de auth desde cero, Supabase ofrece autenticación lista para usar, panel de administración y versiones gratuitas generosas. El flujo básico fue:
- Crear o usar un proyecto en Supabase.
- Configurar providers de autenticación. En este caso se habilitó la autenticación por email y se deshabilitaron otros providers (para evitar confirmaciones adicionales que ralentizan pruebas).
- Proveer las credenciales en el .env y dejar que Antigravity genere la integración con el SDK de Supabase en el frontend.
Nota práctica: al integrar con Supabase desde la plataforma asistida, suele generarse una carpeta services con archivos como gemini-service.ts o configuraciones útiles. Si no ves esa carpeta, probablemente no activaste la integración de la API correspondiente.
Testing local y errores comunes 🐞
Durante las pruebas locales aparecieron varios problemas típicos que vale la pena conocer:
- Errores de sintaxis: caracteres no escapados en JSX. Las herramientas modernas los detectan, pero es útil revisar el build log.
- Provider no habilitado: el proyecto pidió habilitar un provider de auth que no estaba activado en Supabase. Solución: mantener la configuración de auth consistente entre front y panel de Supabase.
- Form duplicado: el componente de auth se estaba renderizando en dos lugares (encabezado y página principal). Solución: limitar la renderización al componente principal o manejar la lógica de sesión con condicionales.
- Cuotas API: saturación de la API de Gemini durante las pruebas masivas. Si un endpoint responde saturado, rotar claves o usar cuentas alternativas para pruebas rápidas.
Un flujo recomendado para depurar:
- Reproducir el error en local y revisar consola del navegador.
- Revisar logs de build en Antigravity o en la plataforma que uses.
- Si el problema es de autenticación, revisar Project Settings > Authentication en Supabase.
- Para problemas con las APIs, chequear el dashboard de la API (por ejemplo, consola de Gemini) y las cuotas.
Deploy automático a Hostinger y manejo de variables de entorno 🚀
Deployar la aplicación en Hostinger fue directo: conectar GitHub, configurar como Node.js app y pasar las variables de entorno necesarias. Variables típicas:
- API_KEY_GEMINI o la clave del modelo que uses en Antigravity.
- SUPABASE_URL y SUPABASE_ANON_KEY para el cliente en frontend.
- Otras variables necesarias para la configuración del runtime (por ejemplo, NODE_ENV).
Pasos para deploy en Hostinger:
- En Hostinger Cloud, crear un nuevo sitio web y seleccionar «App Web de Node.js».
- Conectar la cuenta con GitHub y seleccionar el repositorio.
- Establecer variables de entorno copiadas desde el archivo .env local o desde las settings de Supabase y Gemini.
- Iniciar la implementación y revisar logs. Si la API de Gemini está sobrecargada, considerar rotar la API key o usar otra cuenta temporalmente.
En una ocasión la API de Gemini apareció saturada durante el deploy. La solución práctica fue generar otra API Key desde otra cuenta y actualizar las variables de entorno en el panel de despliegues, lanzar un nuevo build y verificar que todo funcionara.
Lecciones aprendidas y recomendaciones prácticas 💡
Este proyecto dejó varias lecciones claras que sirven para cualquier creador que quiera construir una app rápida, económica y funcional:
- Prototipa primero. Usar Google AI Studio para crear un prototipo funcional ayuda a validar flujos y evitar workarounds costosos más adelante.
- Usa Markdown para el PRD. Las IAs interpretan mejor estructuras con títulos y secciones, lo que reduce la fricción en generación de código y componentes.
- Pasa transcripciones con timestamps para subtítulos. Esa información debe ser la fuente de la verdad para evitar desincronización que cuesta corregir manualmente.
- Itera el diseño con pequeños pasos. Reinicia la conversación con la IA cuando la cadena de cambios sea larga para evitar alucinaciones o errores acumulados.
- Integra pronto con control de versiones y haz commits frecuentes. Pushing temprano evita perder trabajo y facilita rollbacks si un cambio rompe algo.
- Prefiere herramientas que aceleren la rutina. Supabase reduce el tiempo de setup de autenticación y Hostinger facilita el deploy automático desde GitHub.
- Planifica para cuotas y rate limits. Las APIs de modelos y servicios pueden saturarse; tener claves alternativas o entornos de prueba ayuda a continuar.
- Si usas VS Code, el proceso es equivalente. Antigravity simplifica cosas, pero todo lo que se hace allí se puede reproducir en un entorno local con VS Code.
Cómo replicarlo: checklist y roadmap 🛠️
Un checklist práctico para replicar este flujo:
- Definir idea y alcance: ¿qué problema resuelves y qué hará el MVP?
- Escribir PRD simplificado en Markdown.
- Crear prototipo en Google AI Studio pegando el PRD y pidiendo pantallas/archivos React.
- Obtener transcripción del contenido (YouTube Studio o servicio de transcripción) y asegurarse de tener marcas de tiempo.
- Probar cortes/clips en el prototipo, forzando el uso de la transcripción con timestamps para subtítulos.
- Versionar el prototipo en GitHub y clonar en Antigravity o VS Code.
- Levantar proyecto, corregir errores detectados por la revisión automática y crear archivo .env con claves necesarias.
- Integrar Supabase para autenticación; configurar providers y copiar claves a .env.
- Probar localmente: subir un MP4, generar clip y verificar reencuadre y subtítulos.
- Conectar repo a Hostinger y configurar variables de entorno en panel de despliegue.
- Implementar y monitorizar logs; rotar claves en caso de saturación de APIs.
Herramientas y recursos mencionados (enlaces para consultar):
- Hostinger con descuento aplicado: https://hostinger.com/rodrigo
- Google AI Studio: https://aistudio.google.com
- Google Antigravity: https://antigravity.google
- Supabase: https://supabase.com
Ejemplos prácticos y detalles técnicos 🔍
A continuación algunos detalles técnicos que pueden ayudar a implementar la parte de manipulación de video íntegramente en el navegador:
- Captura y reencuadre: usar un elemento video en combinación con un canvas para dibujar frames recortados y reescalados a 9:16. Este canvas se puede convertir a WebM usando MediaRecorder.
- Export: MediaRecorder grabando el canvas entrega un blob WebM que se puede descargar o subir a un servidor.
- Subtítulos: generar un archivo WebVTT o SRT localmente a partir de la transcripción con timestamps; inyectarlo en el video como track o renderizar subtítulos encima del canvas para mayor control visual.
- Procesamiento en lote: si vas a procesar varios momentos en un video, hacer una cola de procesamiento con límites para no saturar la CPU del navegador ni agotar memoria.
Estas tácticas permiten construir una herramienta eficiente sin depender de procesos server-side costosos.
Resumen final y próximos pasos 📈
Construir una aplicación funcional con herramientas modernas de IA y plataformas de desarrollo asistido es totalmente posible y accesible. Con un buen PRD en Markdown, transcripciones con timestamps, Supabase para auth y un deploy automático desde GitHub a Hostinger, se puede pasar de idea a aplicación pública en pocos ciclos de iteración.
Si te interesa replicar este flujo, comienza por escribir el PRD en Markdown, prueba prototipado visual en Google AI Studio y luego clona el repo para continuar el desarrollo en Antigravity o localmente. Prioriza la simplicidad: arregla la parte visual y de subtítulos primero, integra auth después y sólo añade backend si la escala lo requiere.
Recursos nuevamente para facilitar el inicio:
- Hostinger: https://hostinger.com/rodrigo
- Google AI Studio: https://aistudio.google.com
- Google Antigravity: https://antigravity.google
- Supabase: https://supabase.com
En la construcción es normal tener errores, bloqueos por cuotas y momentos de frustración. La clave es iterar, versionar, y mantener la base mínima viable. Con eso, la productividad sube y los resultados llegan.
Nota final
Este proceso se puede adaptar a muchas ideas: desde generadores de clips para redes sociales hasta micro herramientas internas. La combinación de prototipado asistido por IA y despliegue automático permite experimentar rápido con bajo costo.
