Vibe Coding en vivo: Cómo construimos una web de feedback desde cero (y sin código)
Crónica de un directo bastante épico, el poder de Lovable + Supabase y un regalo especial para ti.
¡Qué locura de semana! Todavía estoy procesando el directo de ayer. Primero, hablemos de números (porque ya sabes que me gusta la transparencia): 80 personas se apuntaron y 24 estuvisteis allí dándolo todo en vivo.
A ver, la conversión no está mal, pero si hubiera cobrado 5€ por cada “no asistente”, ahora mismo os estaría escribiendo desde una hamaca en Bali 😂
Bromas aparte, millones de gracias a los que vinisteis. Fue genial ver algunas caras y responder dudas en tiempo real. Para los que no pudisteis estar, he editado la grabación para que en apenas una hora tengáis todo el jugo sin los tiempos muertos.
Pero vamos al lío: ¿qué aprendimos construyendo una app de feedback sin tocar una sola línea de código?
(un poco más abajo tienes el vídeo completo)
1. El cerebro: Un PRD conversacional con Gemini
Empezamos donde debe empezar todo buen proyecto: el PRD (Product Requirements Document). No es más que un documento de requisitos, pero trabajado mano a mano con un GPT personalizado (un GEM) que tengo entrenado.
La idea era simple: una web minimalista (blanco y negro, fuente Inter) donde los usuarios pudieran dejar feedback. Pero quería un “vibe” especial: un V-Captcha. En lugar de seleccionar semáforos, el usuario tiene que dibujar una “V” en la pantalla. Si la IA reconoce el trazo, se habilita el botón de enviar.
Puedes acceder al GEM para generar los PRDs a través de este enlace.
2. El músculo: Lovable + Supabase
Aquí es donde ocurre la magia. Conectamos Lovable (nuestro constructor de apps en React) con Supabase (nuestra base de datos).
Lo más potente de Lovable ahora mismo es su capacidad de “auto-corrección”. Durante el directo, el algoritmo de la “V” se puso un poco tiquismiquis y no validaba bien. ¿Qué hicimos? Activar el modo chat, explicarle el error a la IA y dejar que ella misma reescribiera la lógica de validación del Canvas.
Resultado: Una tabla en Supabase guardando feedback anónimo en tiempo récord.
3. El despliegue: Vercel y dominio propio
No sirve de nada tener una app en local. La desplegamos en Vercel para tener una infraestructura sólida y conectamos un subdominio (feedback.polmarza.com) desde Hostinger.
Es increíble pensar que hace tres años esto requería un equipo de desarrollo y semanas de trabajo. Hoy, con el vibe coding, lo hacemos en una tarde de café y charla 😄
Te comparto el vídeo completo:
🛠️ Novedades en el horizonte (y un regalo)
Estoy probando cosas nuevas con el plan de pago de la newsletter. No sé si lo que hago aporta valor real o no, pero quiero descubrirlo con vosotros. Para mejorar el servicio, he decidido que los usuarios Pro tendrán:
Chat privado directo conmigo: Para vuestras consultas sobre vibe coding.
Sesiones en directo cada 15 días: Ahora mismo somos poquitos en el plan Pro, así que es prácticamente un 1:1 conmigo. Aprovecha antes de que crezca.
Acceso al archivo histórico: Todo el contenido de más de un mes de antigüedad será exclusivo para suscriptores Pro.
🎁 TU REGALO: Tanto si estuviste en el directo como si no, en tu email tienes un código para disfrutar de 30 días gratis del plan Pro. Si no lo recibiste por email, te lo comparto aquí:
Mi objetivo es poder vivir de compartir este conocimiento y ayudarte a construir tus propias ideas. ¡Gracias por estar al otro lado!
Y hasta aquí la newsletter de hoy.
¿Cuál es la siguiente herramienta que deberíamos construir en directo? Te leo en los comentarios 👇