Te cuento todo el proceso de desarrollo paso a paso desde cero a producción junto a cada herramienta utilizada ⬇️
💻 El proyecto se llama «Code History». Es una web que cada día publica un hecho relevante relacionado con programación y tecnología.
Quizás te parezca simple, pero se trata de un sistema completo que incluye el frontend, backend, generación automática de datos, base de datos, integración continua y despliegue en servidor. No está mal para menos de una hora.
1️⃣ Stack tecnológico:
Comencé definiendo el stack web que quería utilizar: TS, React, Tailwind y Next.
Es uno de los más populares de la actualidad, con mayor soporte en herramientas de generación de código con IA.
2️⃣ Diseño de UI:
Para ello utilicé v0 que justamente utiliza el stack propuesto. Le pedí lo siguiente: «Quiero crear una web que cada día muestre una efeméride sobre programación. Quiero que la UI sea minimalista y simule una terminal».
Y boom!
3️⃣ Editor de código y agente:
Descargué el código generado por v0 para empezar a trabajar en local.
Seleccioné Cursor como editor (ya que está tan de moda) junto a Claude Sonnet (el modelo que mejores resultados me está dando). Importante definirle unas buenas reglas para indicarle cómo debe generar el código.
4️⃣ Base de datos:
Aquí elegí Supabase como BaaS. Tiene una capa gratis muy generosa para hacer uso de su PostgreSQL (donde se van a almacenar las efemérides). Configuro su API y listo.
5️⃣ MCP:
Un MCP sirve para conectar tu agente (el de Cursor) con sistemas externos (mi Supabase). Así ampliarás el contexto para que tu agente conozca tu código y base de datos. Creo el esquema, meto datos y los recupero desde mi app.
6️⃣ API:
Lo siguiente es que cada día se genere una nueva efeméride. Para ello utilizo el API de OpenAI. Creo una operación junto a un prompt para generar la info y guardarla en mi base de datos.
7️⃣ Automatización:
Cada día necesito una nueva efeméride. Subo mi código a GitHub y creo una Action que lanza cada 24h el proceso de generación de datos.
8️⃣ Despliegue:
Sólo queda poner el proyecto en producción. Utilizo Vercel, con soporte perfecto a mi stack tecnológico (ya que usé v0 para generar la estructura principal del código, herramienta de la misma empresa). Vercel se integra con GitHub y realiza el despliegue con cada push de código.
⚠️ Lo importante no es haber utilizado la herramienta A o B. O que este proceso me llevara menos de una hora. Lo realmente importante es tener presente que nuestra forma de trabajar está cambiando, y que debemos combinar estas nuevas herramientas con nuestro conocimiento como programadores para sacarles el máximo provecho. No se trata de hacer Vibe Coding, se trata de situarnos al volante de la revolución.