Lección 04: Tu Primer Proyecto con Vibe Coding
- Un buen proyecto de vibe coding es visual, maneja datos y se puede desplegar — un dashboard o tracker cumple los tres criterios.
- El flujo completo tiene 7 fases: PRD, wireframe, prompt inicial, iteración de UI, datos, testing y deploy.
- Bolt.new genera la primera versión funcional en minutos. El valor real está en saber iterar con prompts específicos.
- Supabase proporciona base de datos y autenticación sin configurar backend. Vercel o Netlify despliegan con un click.
- Cuando algo falla, la solución casi siempre es copiar el error y pegárselo a la IA — ella sabe interpretarlo.
En las tres lecciones anteriores aprendiste qué es vibe coding, qué herramientas existen y cómo escribir prompts efectivos. Ahora toca construir algo real. En este tutorial vas a crear una aplicación completa — desde la idea hasta tenerla funcionando en internet — usando exclusivamente herramientas de vibe coding. No vas a escribir una sola línea de código manualmente. Todo lo genera la IA. Tu trabajo es dirigir, iterar y validar.
Elegir el Proyecto Correcto
No todos los proyectos son buenos candidatos para vibe coding, especialmente cuando estás empezando. El proyecto ideal para un primer intento cumple tres criterios:
Visual
Tiene interfaz de usuario. Puedes evaluar el resultado sin leer código.
Con datos
Gestiona información (CRUD). Te obliga a conectar una base de datos.
Desplegable
Se publica en internet con herramientas gratuitas. Un proyecto local no demuestra nada.
Para este tutorial vamos a construir un Personal Finance Tracker: una aplicación donde puedes registrar ingresos y gastos, ver un balance total y visualizar tus movimientos en una tabla ordenada por fecha.
¿Por qué no una todo app?
Las todo apps son el ejemplo más repetido en tutoriales, pero son demasiado simples para aprender el flujo completo. Un finance tracker incluye cálculos, formateo de moneda, filtros por fecha y categorías — suficiente complejidad para que el ejercicio tenga valor.
Define qué vas a construir con un documento breve de requisitos. Cuanto más específico, menos iteraciones después.
Escribir el PRD (Product Requirements Document)
Antes de abrir cualquier herramienta, define qué vas a construir. Un PRD para vibe coding no necesita 20 páginas — con 4-5 puntos claros es suficiente. Lo importante es que la IA tenga contexto concreto sobre funcionalidad, categorías, diseño y stack técnico.
PROYECTO: Personal Finance Tracker FUNCIONALIDAD: - Registrar transacciones con: fecha, descripción, monto, tipo (ingreso/gasto), categoría - Ver balance total (ingresos - gastos) - Tabla de transacciones ordenada por fecha (más reciente primero) - Filtrar transacciones por tipo (ingreso/gasto) y por categoría - Eliminar transacciones CATEGORÍAS PREDEFINIDAS: - Ingresos: Salario, Freelance, Inversiones, Otros - Gastos: Vivienda, Transporte, Alimentación, Ocio, Servicios, Otros UI: - Diseño oscuro, minimalista, responsive - Dashboard con tarjetas de resumen (ingresos totales, gastos totales, balance) - Formulario para añadir transacción - Tabla con las transacciones STACK: - Frontend: React + Tailwind CSS - Base de datos: Supabase (PostgreSQL) - Deploy: Vercel
Este documento es un contrato entre tú y la IA. Cuanto más específico seas aquí, menos iteraciones necesitarás después. Fíjate en los detalles: categorías predefinidas, orden de la tabla, esquema de colores. Todo lo que dejes ambiguo, la IA lo decidirá por ti — y puede que no te guste la decisión.
Fase 2: El Wireframe Mental
No necesitas Figma ni herramientas de diseño. Un wireframe para vibe coding puede ser una descripción textual de la estructura. Lo que importa es que sepas dónde va cada elemento antes de pedirle nada a la IA.
Esta estructura va directamente en el prompt. La IA la convierte en interfaz funcional. No hace falta que sea bonito ni preciso — solo que defina qué va dónde.
Fase 3: El Primer Prompt
Abre Bolt.new en tu navegador. En el campo de prompt, pega tu PRD completo junto con la descripción del wireframe:
Crea un Personal Finance Tracker con React y Tailwind CSS. FUNCIONALIDAD: - Formulario para registrar transacciones: fecha, descripción, monto, tipo (ingreso/gasto), categoría - Balance total visible: ingresos totales, gastos totales, balance neto - Tabla de transacciones ordenada por fecha descendente - Filtros por tipo (ingreso/gasto) y categoría - Botón para eliminar cada transacción CATEGORÍAS: - Ingresos: Salario, Freelance, Inversiones, Otros - Gastos: Vivienda, Transporte, Alimentación, Ocio, Servicios, Otros DISEÑO: - Tema oscuro con fondo #0a0a0a - Tarjetas de resumen en la parte superior: - Ingresos totales (texto verde #22c55e) - Gastos totales (texto rojo #ef4444) - Balance neto (texto blanco) - Formulario debajo de las tarjetas, campos en una fila horizontal - Tabla con bordes sutiles, ingresos en verde, gastos en rojo - Responsive: en móvil el formulario y las tarjetas se apilan verticalmente - Tipografía limpia, sin decoraciones innecesarias Usa localStorage para persistir los datos inicialmente. Después conectaremos Supabase.
Bolt.new procesará el prompt y generará una aplicación completa en segundos. Verás el código aparecer en tiempo real y una vista previa interactiva a la derecha. La primera versión raramente es perfecta, pero debería tener la estructura básica correcta.
Empieza con localStorage
El prompt pide localStorage a propósito. Conectar Supabase desde el primer prompt complica las cosas innecesariamente. Es mejor validar que la UI funciona bien primero y después añadir la base de datos en una fase separada.
Iterar la Interfaz
La primera versión va a tener problemas: tarjetas desalineadas, colores inexactos, formulario demasiado grande. Esto es normal. El vibe coding funciona por iteración. La clave está en escribir prompts de corrección específicos — no digas "mejora el diseño", di exactamente qué quieres cambiar:
// Iteración 1: Ajustar las tarjetas de resumen Las tres tarjetas de resumen deben tener el mismo ancho, distribuidas con gap de 16px. Cada tarjeta debe mostrar el label arriba (texto gris pequeño) y el monto abajo (texto grande bold). Añade un borde sutil de 1px con color #27272a. // Iteración 2: Mejorar la tabla En la tabla de transacciones, el monto debe mostrarse con formato de moneda (EUR con 2 decimales). Añade un signo + verde para ingresos y - rojo para gastos antes del monto. La fila debe tener hover con fondo #18181b. // Iteración 3: Responsive En pantallas menores a 768px, las tarjetas de resumen deben apilarse verticalmente. El formulario debe pasar a layout vertical con cada campo ocupando el 100% del ancho. La tabla debe tener scroll horizontal.
Cada iteración es un prompt nuevo en Bolt.new. La herramienta mantiene el contexto del proyecto, así que entiende que estás pidiendo cambios sobre lo que ya generó. Normalmente necesitarás entre 3 y 6 iteraciones para dejar la UI en un estado satisfactorio.
Fase 5: Conectar Supabase
Con la UI validada, es momento de reemplazar localStorage por una base de datos real. Supabase es la opción más accesible: ofrece un plan gratuito con PostgreSQL, autenticación y API REST automática.
Preparar Supabase
Antes de volver a Bolt.new, necesitas crear el proyecto en Supabase:
- Crear cuenta en supabase.com (gratis con GitHub).
- Crear un proyecto nuevo. Elige un nombre y una contraseña para la base de datos. Guarda la contraseña.
- Ir a Settings > API y copiar dos valores: la
URLdel proyecto y laanon key(clave pública).
Con esos dos datos, ya puedes pedirle a la IA que conecte la base de datos:
Reemplaza localStorage por Supabase como base de datos. CONFIGURACIÓN SUPABASE: - Instalar @supabase/supabase-js - Crear un archivo lib/supabase.ts con el cliente inicializado - Usar variables de entorno para SUPABASE_URL y SUPABASE_ANON_KEY TABLA "transactions": - id: uuid, primary key, default gen_random_uuid() - created_at: timestamptz, default now() - date: date, not null - description: text, not null - amount: numeric(10,2), not null - type: text, not null (check: 'ingreso' o 'gasto') - category: text, not null OPERACIONES: - INSERT para añadir transacción - SELECT para listar (orden: date DESC, created_at DESC) - DELETE por id para eliminar Genera también el SQL para crear la tabla en Supabase. Habilita Row Level Security con una policy que permita todas las operaciones para anon (es una app personal sin auth).
Bolt.new generará el código de integración y el SQL para crear la tabla. Copia el SQL y ejecútalo en el SQL Editor de Supabase (menú lateral del dashboard). Después, configura las variables de entorno en Bolt.new con tu URL y anon key.
Variables de entorno
Nunca pegues las claves directamente en el código. Bolt.new tiene una sección de Environment Variables en la configuración del proyecto. Añade VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY ahí. Si usas Cursor, crea un archivo .env.local.
Fase 6: Testing Manual
Las aplicaciones generadas con IA necesitan testing igual que cualquier otra. La diferencia es que no vas a escribir tests automatizados (al menos no en esta fase). Vas a hacer testing manual estructurado.
- Crear transacción: Añade un ingreso y un gasto. Verifica que aparecen en la tabla con el formato correcto.
- Balance: Comprueba que los totales se actualizan. Ingreso de 1000 + gasto de 300 = balance de 700.
- Filtros: Filtra por "ingresos" y verifica que solo aparecen ingresos. Ídem con gastos y categorías.
- Eliminar: Borra una transacción y verifica que desaparece y que el balance se recalcula.
- Persistencia: Recarga la página. Los datos deben seguir ahí (si Supabase está conectado correctamente).
- Responsive: Abre la app en el móvil o usa las DevTools del navegador para simular pantallas pequeñas.
- Casos límite: ¿Qué pasa si dejas un campo vacío? ¿Si pones un monto negativo? ¿Si la descripción tiene 500 caracteres?
Si encuentras un bug, descríbelo de forma precisa a la IA. No digas "no funciona". Di: "cuando añado una transacción con monto 0, la app muestra NaN en el balance". Cuanto más específico el reporte, más rápida la corrección.
Fase 7: Deploy a Producción
Tu app funciona en local (o en el preview de Bolt.new). Ahora vamos a publicarla en internet.
Opción A: Deploy desde Bolt.new
Bolt.new tiene integración directa con Netlify. Haz click en el botón "Deploy" en la barra superior. Bolt.new creará automáticamente un proyecto en Netlify, configurará el build y lo desplegará. Obtendrás una URL tipo tu-proyecto.netlify.app.
Opción B: Deploy con Vercel
Si prefieres Vercel, necesitas exportar el proyecto a un repositorio de GitHub y después conectarlo:
# 1. Exportar el proyecto desde Bolt.new # Click en "Download" para obtener el ZIP del proyecto # 2. Crear repositorio en GitHub git init git add . git commit -m "feat: finance tracker initial version" git remote add origin https://github.com/tu-usuario/finance-tracker.git git push -u origin main # 3. En vercel.com: # - "Add New Project" > Importar desde GitHub # - Seleccionar el repositorio finance-tracker # - Framework: Vite (autodetectado) # - Environment Variables: añadir VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY # - Click en "Deploy"
En menos de un minuto, Vercel construye y despliega tu aplicación. Obtendrás una URL tipo finance-tracker.vercel.app. Cada vez que hagas push a main, Vercel redespliega automáticamente.
No olvides las variables de entorno
El error más común en el deploy es no configurar las variables de entorno en Vercel o Netlify. Sin VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY, la app se despliega pero no puede conectar con la base de datos. Configúralas en el panel del proyecto antes del deploy.
Troubleshooting: Problemas Comunes
Estos son los problemas más frecuentes y cómo resolverlos:
La app no carga |
Abre las DevTools del navegador (F12 > Console). Copia el mensaje de error completo y pégalo a la IA con el contexto: "Mi app de React desplegada en Vercel muestra este error en la consola: [error]". La IA identificará la causa en el 90% de los casos. |
Estilos rotos |
Cuando la IA genera CSS genérico o ignora tus especificaciones de diseño, sé más concreto. En lugar de "hazlo bonito", usa valores exactos: "fondo #0a0a0a, tarjetas con border-radius 12px, gap 16px, texto principal #ffffff, texto secundario #a1a1aa". |
DB no conecta |
Verifica en este orden: (1) las variables de entorno están configuradas en el panel de deploy, (2) la tabla existe en Supabase, (3) las policies de RLS están habilitadas y permiten las operaciones necesarias. |
Datos no persisten |
Si al recargar los datos desaparecen, es probable que la app siga usando localStorage. Revisa la consola del navegador — si no ves peticiones de red a Supabase, la integración no está activa. Pídele a la IA que verifique que todos los CRUD apuntan al cliente de Supabase. |
Build falla |
Lee el log de build en Vercel o Netlify. Errores comunes: dependencias faltantes en package.json, errores de TypeScript que no aparecen en desarrollo, o rutas de importación incorrectas. Copia el error y pídele a la IA que lo corrija. |
Resultado Final
Si seguiste las siete fases, ahora tienes:
App web funcional
Desplegada en internet con su propia URL pública accesible desde cualquier dispositivo.
Base de datos PostgreSQL
En Supabase, almacenando transacciones de forma persistente con Row Level Security.
Interfaz responsive
Funciona en escritorio y móvil con tema oscuro y diseño minimalista.
Repositorio en GitHub
Con el código fuente versionado y deploys automáticos en cada push.
Todo esto sin escribir una línea de código manualmente. Lo construiste dirigiendo a la IA con prompts precisos y iterando sobre los resultados. Este es exactamente el flujo que seguirás en proyectos más complejos — lo que cambia es la profundidad del PRD, la cantidad de iteraciones y la complejidad de la integración de datos. En la próxima lección veremos cómo llevar un prototipo como este a un nivel de producción real: rendimiento, seguridad, SEO y mantenimiento.
Preguntas Frecuentes
Sobre tu primer proyecto con vibe coding