Documentación

Tutoriales por semana

Semana 1 · Tu landing en vivo

Setup completo, landing personalizada con waitlist y deploy en producción.

Next.jsTailwindSupabaseVercelyarnCursor

Esta es la semana del hito grande: al terminarla, tu producto tiene una página web pública en internet, con tu nombre, tu copy y una URL que puedes mandar por WhatsApp. Todo lo que sigue en el curso se construye encima de esto.

Qué vas a tener al final

  • ✅ La plantilla VibeFast clonada y corriendo en tu compu.
  • ✅ Landing con tu copy, tus colores y un solo CTA claro.
  • ✅ Waitlist funcionando en tu landing, guardando emails en tu base de datos.
  • ✅ Todo deployado en Vercel con una URL pública.

Lo que debes tener antes

  • Ficha de proyecto de Semana 0 — necesitas saber qué producto y para quién antes de escribir el copy.
  • Cuentas creadas y compu preparada (Pasos 2 y 3 de la Semana 0). Si te lo saltaste, hazlo ahora — sin eso el Paso 1 no avanza.

Paso 1 · Setup de entorno

Este paso completo vive en el Quick start. Ahí vas a:

  1. Hacer tu fork del repo y clonarlo en tu compu.
  2. Instalar dependencias y crear tu web/.env.local con las 3 keys de Supabase.
  3. Subir el schema a Supabase (Paso 6 — con esto tu waitlist ya guarda de verdad).
  4. Correr el proyecto con yarn dev.

→ Sigue Empieza aquí → Quick start hasta el Paso 8 (30–60 min). Si no adelantaste tu proyecto de Supabase en Semana 0, el propio Quick start te manda a crearlo antes del Paso 1.

Regresa aquí cuando veas la landing por default de VibeFast en localhost:3000.

Checkpoint

✅ Ves la landing por default de VibeFast en localhost:3000. ✅ En Supabase → Table Editor ves las tablas del boilerplate (Paso 6 hecho).

¿Atorado en algún paso? → Errores comunes. No te quedes solo: pregunta en el canal del curso.

Paso 2 · Personaliza tu producto en web/config.js

web/config.js es el único archivo que hay que cambiar para que la landing sea tuya — y lo cambia Cursor por ti. Copia este prompt y rellena las llaves con los datos de tu ficha de Semana 0:

Prompt para Cursor — copy del producto
Soy founder de un producto que {describe tu producto en 1 frase}.
Mi ICP es {describe tu cliente ideal en 1 frase}.
El dolor principal que resuelvo es {describe el dolor}.Edita web/config.js. Actualiza:
app.name, app.description, app.domain
brand.primary (sugiere un hex acorde al producto)
landing.hero (eyebrow corto, title de máximo 12 palabras, subtitle de 1 frase, cta.label como verbo de acción)
landing.features.items: 3 items relevantes a mi producto, cada uno con icon de lucide-react, title corto y body de 1 frase
landing.faq.items: 4 preguntas que un visitante real haría
Devuelve el archivo completo. No cambies la estructura del objeto.

El prompt es el arranque, no el final

Si el copy que salió no suena a ti, díselo a Cursor: "el título suena genérico, hazlo más directo y con el dolor del cliente". Itera 2-3 veces — es normal y es el músculo que estás entrenando.

Paso 3 · Guarda y mira el cambio

Guarda web/config.js y refresca localhost:3000.

Checkpoint

✅ Tu título aparece en el Hero. ✅ Los 3 features tienen iconos. ✅ El color primario es el tuyo.

Paso 4 · Prueba tu waitlist

Escribe un email en el formulario de la landing y envíalo.

Checkpoint

✅ El formulario responde con su mensaje de confirmación. ✅ En Supabase → Table Editor → tabla waitlist, el email aparece como una fila nueva. Tu waitlist guarda de verdad.

¿El formulario da error o la fila no aparece? Casi siempre es que faltó el Paso 6 del Quick start (subir el schema) o una key mal pegada en web/.env.local — revisa Errores comunes.

Paso 5 · Deploy a Vercel

El paso a paso vive en el Quick start. Ahí vas a:

  1. Importar tu fork en Vercel (login con GitHub).
  2. Poner Root Directory = web (crítico — es monorepo).
  3. Pegar tus variables de entorno (las 4 mínimas).
  4. Deployar, y luego actualizar NEXT_PUBLIC_APP_URL con la URL real + redeploy.

→ Sigue el Paso 9 del Quick start (~10 min).

Regresa aquí cuando tengas tu URL pública abriendo en el navegador.

Checkpoint

✅ Tienes una URL pública tipo tu-producto.vercel.app. ✅ La abres desde tu celular (no solo tu compu) y se ve tu landing. ✅ Actualizaste NEXT_PUBLIC_APP_URL en Vercel con esa URL (no localhost) y redeployaste.

Entregable de la semana

URL pública de tu landing. Mándala al docente con:

  1. La URL.
  2. 1 captura de pantalla.
  3. 1 párrafo de qué hace tu producto (el mismo del app.description).

Y compártela en el canal del curso — ver las landings de los demás es parte del ejercicio.

Si te sobra tiempo

  • Favicon: pídele a Cursor — "cambia el favicon en web/public/ por uno acorde a mi producto (puede ser un emoji renderizado a SVG)".
  • Preview en redes: pídele a Cursor — "configura el og:image y los metadatos para que el link de mi landing se vea bien al compartirlo en WhatsApp y Twitter".
  • Sección extra: una fila de "logos de clientes" con tu logo + placeholders — descríbesela a Cursor y deja que la proponga.
AnteriorSemana 0 · Arranque & DiagnósticoSiguiente Semana 2 · MVP con auth y core feature