Contenido detallado
🧱 Sitio web vs. app: qué estás construyendo realmente
Un sitio por lo general, es solo de lectura: la persona llega, ve el contenido y se va; nada queda guardado. Un app responde a quien lo usa: recibe datos, los guarda, te recuerda y ejecuta acciones. Es la diferencia entre un cartel en la pared y un cajero automático.
Las cuatro piezas de una app: front-end (lo que se ve), back-end (lo que procesa), base de datos (donde se guarda) e integraciones (servicios externos).
Saber cuál es la herramienta adecuada para cada problema evita pedirle lo equivocado a Claude y perder tiempo.
Front-end · back-end · base de datos · integración · determinístico vs. probabilístico.
✓ Es hora de convertirlo en una app cuando…
- ✓Necesitas guardar datos de quienes lo usan (correos, respuestas).
- ✓Cada persona tiene que entrar y ver su propia área.
- ✓Algo debe ocurrir después (enviar un correo, registrar un pedido).
✗ Todavía es solo un sitio web cuando…
- ✗La persona solo lee el contenido y no queda nada guardado.
- ✗No hay inicio de sesión ni áreas privadas.
- ✗No ocurre ninguna acción después de la visita.
🍽️ Analogía del restaurante
O front-end es el salón (mesas, menú). El back-end es la cocina (donde se procesa el pedido). El banco es la despensa y el libro de cuentas. Las integraciones son los proveedores y la terminal de pago: servicios externos que el restaurante llama cuando los necesita.
🗄️ La base de datos: donde viven los datos
Sin una base de datos, todos los datos recopilados se pierden cuando se cierra la pestaña. Con una base, se convierten en un activo tuyo. Piensa en Supabase como una hoja de cálculo potenciada: las tablas son pestañas, las filas son registros y las columnas son campos; solo que es confiable, tiene una API lista y se comunica directamente con Claude Code.
Un lugar confiable para guardar registros: nombres, correos electrónicos, respuestas de formularios, cuentas de usuario.
La base de datos es el "esqueleto firme" determinista de la app: guardar un correo electrónico tiene que guardar aquel correo electrónico, siempre igual.
Tabla · fila · columna · «punto de registro» (la fuente de la verdad) · conector/MCP.
Abre los conectores
En Claude Code, haz clic en el botón "+" y luego en "conectores".
Conecta Supabase
Busca Supabase en la lista y haz clic en conectar; se abrirá una ventana para autorizar.
Crea el proyecto y confírmalo
Pídele a Claude que cree un proyecto nuevo. Después confirma en supabase.com que apareció.
Conectar y crear la base de datos
Conecte este projeto a um banco de dados Supabase. Crie um projeto novo para este app.
🔐 Inicio de sesión y cuentas: capturar datos de forma segura
Dos piezas van juntas: el formulario, que convierte cada respuesta en una fila de la tabla, y la autenticación, que identifica a cada persona (registro, inicio de sesión, cierre de sesión). Sin inicio de sesión, todos ven todo; con inicio de sesión, tienes áreas privadas y contenido por usuario; todo gestionado por Supabase.
Formulario → tabla (el campo se convierte en columna), sumado al sistema de cuentas: registro (sign-up), inicio de sesión (sign-in) y sesión.
Es el salto de «sitio que muestra» a «app que recopila y protege»: el comienzo de un valor real.
Campo → columna · validación · sesión · «área autenticada».
✓ Hazlo en la prueba
- ✓Pide registro e inicio de sesión con contraseña obligatoria, gestionados en Supabase.
- ✓En Authentication → Sign-in providers, desactiva la confirmación por correo electrónico solo durante las pruebas.
- ✓Considera "iniciar sesión con Google": hoy es lo habitual y facilita la vida de quienes lo usan.
✗ No olvides esto antes de publicarlo
- ✗Dejar desactivada la confirmación por correo electrónico en producción (llena la base de datos de registros falsos).
- ✗Olvidar probar el cierre de sesión y un nuevo inicio de sesión con la misma contraseña.
- ✗Dar acceso a áreas privadas sin una sesión válida.
Autenticación básica
Agrega registro e acceso con contraseña obligatoria; todo autenticado y gestionado en Supabase. Después del acceso, lleva a la persona a un dashboard sencillo con el mismo estilo del sitio.
Original (EN):
Add sign-up and login with a required password, fully authenticated and managed in Supabase. After login, take the user to a simple dashboard in the same style as the site.
💬 Construir por capas: pedir, probar, repetir
No escribes todo de una vez. Tú conversación por capas: «agrega un formulario», pruébalo, «ahora guarda en la base de datos», pruébalo, «ahora hazlo más bonito», pruébalo. Cada pedido es pequeño y verificable: así se construye con confianza.
Describir un cambio pequeño en lenguaje natural, ver el resultado y ajustarlo — en lugar de intentar hacerlo todo de una vez.
Los cambios pequeños son fáciles de probar y corregir. Eso es lo que mantiene el proyecto bajo control.
Ciclo pedir → probar → recibir comentarios · describir el "qué", no el "cómo" · contexto conciso (/compact, fork).
Haz una sola solicitud
Describe un único cambio pequeño y espera a que Claude termine.
Abre la app y comprueba
Haz una prueba real. No confíes en el "listo": compruébalo con tus propios ojos.
Da feedback y repite
Describe qué está mal o qué falta y envía la siguiente solicitud. Repítelo hasta que te guste.
🧠 Consejo práctico: cuida el contexto
Una conversación demasiado larga empeora las respuestas. Cuando el historial se vuelva pesado, usa /compact. Para un experimento aislado sin mezclar todo, renombra la conversación actual y crea un fork a partir de ella.
✅ Probar de principio a fin
"Parece funcionar" no basta. Pruebas el flujo completo como una persona de verdad —rellenas, envías— y solo entonces revisa Supabase para ver el registro exacto en la tabla. La pantalla dice «enviado»; la base de datos dice la verdad.
Recorrer la app como usuaria(o) y, después, verificar manualmente en el Table Editor de Supabase.
Ver «enviado con éxito» en la pantalla no prueba que se haya guardado. Confirmarlo en la base de datos es lo que da certeza.
Prueba de punta a punta · fuente de la verdad · verificación manual.
Usa la app de verdad
Completa el formulario, crea una cuenta de prueba e inicia sesión como lo haría cualquier persona.
Abre Table Editor
En Supabase, ve al Table Editor y busca la fila exacta que acabas de crear.
Confirma el dato correcto
El nombre y el correo electrónico que escribiste tienen que estar ahí, campo por campo. Solo entonces queda validado.
⚖️ Determinístico vs. probabilístico
Los modelos de lenguaje son probabilísticos: la misma pregunta puede dar respuestas distintas. Una app necesita partes deterministas — guardar un correo electrónico tiene que guardar aquel correo electrónico, siempre igual. Por eso la verdad está en la base de datos, no en la generación de texto.
🚀 Publicar en línea (deploy)
Una app que solo está en tu PC no le sirve a nadie. Publicar es «subir» el código a internet, con una dirección que cualquiera puede abrir. Es el paso que hace que la app sea real y completa el ciclo concepto → app funcional.
Poner la app en producción en Vercel, con una dirección pública que cualquiera pueda abrir.
Publicar es lo que transforma un experimento local en algo que otras personas realmente usan.
Deploy · entorno de producción · "en línea" · lista de verificación previa al lanzamiento.
Publicar en línea
Quando estas mudanças estiverem prontas, publique e coloque o app no ar na Vercel.
Original (EN):
When these changes are ready, deploy and publish the app live on Vercel.
Profundiza (opcional): la lista de verificación antes de divulgar
Antes de enviarle el enlace a alguien: confirma en vercel.com que el deploy se completó, abre la dirección generada y repite todo el flujo en un navegador de incógnito. Y lo más importante: reactiva la confirmación de correo electrónico en Supabase — solo la habías desactivado para probar.
Autoevaluación (opcional): cómo tienes certeza de que se guardó un lead?
✏️ Ejercicios
1. Conecta y crea la tabla (fácil)
Conecta Supabase a tu proyecto y crea la tabla leads. Criterio: la tabla aparece en el Table Editor con las columnas correctas.
2. Capta un lead real (fácil)
Agrega el formulario y envía una respuesta de prueba. Criterio: la fila con el nombre y el correo electrónico que escribiste aparece en la tabla leads.
3. Agrega login (medio)
Implementa el registro y el inicio de sesión con contraseña. Criterio: creas una cuenta, cierras sesión y vuelves a entrar con la contraseña —y ves un área que solo aparece después de iniciar sesión.
4. Itera con feedback (medio)
Haz al menos tres mejoras pequeñas (una por solicitud), probando entre ellas. Criterio: cada cambio se describió en una frase, se probó y se confirmó antes del siguiente.
5. Publica (medio)
Publica la app en Vercel. Criterio: abres la dirección pública en un navegador anónimo y el flujo completo funciona.
⌨️ Prompts listos
Usa estos como punto de partida y adáptalos a tu app. Cuando el prompt sea canónico, también dejamos el original en inglés. El banco completo está en la Biblioteca → Prompts.
Formulario que guarda en la base de datos
Agrega un formulario con nombre, correo electrónico y «¿cuál es tu mayor desafío hoy?». Cuando lo envíen, guarda las respuestas en Supabase, en la tabla `leads`.
Pedir comentarios antes de construir
Antes de implementar, dime qué necesitas de mí y qué decisiones vas a tomar. Haz preguntas aclaratorias si algo es ambiguo.
Iterar a partir de una pantalla
Aqui está um print da tela atual. Há espaço demais acima e abaixo da imagem. Ajuste para caber bem, sem cortar o conteúdo importante.
Dejar que Claude ejecute en lugar de pedírtelo a ti (canónico)
Sempre que possível, execute você mesmo as tarefas (CLI, scripts) em vez de me pedir para fazer manualmente. Só me peça quando for algo que só eu posso fornecer (login, chave, decisão).
Original (EN):
Whenever possible, run the tasks yourself (CLI, scripts) instead of asking me to do them manually. Only ask me for things only I can provide (login, key, decision).
⚠️ Errores comunes
- ✗Intentar todo de una sola vez. Un único pedido enorme genera un resultado difícil de probar y corregir. Divídelo en pasos pequeños.
- ✗No validar en la base de datos. Ver «enviado con éxito» en la pantalla no prueba que se haya guardado. Abre el Table Editor y verifica la fila.
- ✗Olvidar reactivar la confirmación por correo electrónico. Está bien desactivarlo para probar; dejarlo desactivado en producción llena la base de datos de registros falsos.
- ✗Esperar respuestas idénticas de la IA. Los modelos son probabilísticos. Para lo que siempre debe ser igual, confía en la base de datos y la lógica.
- ✗Dejar que el contexto se infle. Una conversación demasiado larga empeora las respuestas. Usa
/compacty considera hacer un fork para frentes paralelos.
✅ Resumen del módulo
Lista de verificación de finalización
- ☐ Sé explicar la diferencia entre sitio web y app, y nombrar las cuatro piezas (front, back, base de datos, integraciones).
- ☐ Conecté Supabase a mi proyecto y creé un proyecto nuevo de base de datos.
- ☐ Tengo un formulario que guarda respuestas reales en la tabla
leads. - ☐ Confirmé el registro directamente en el Table Editor de Supabase.
- ☐ Añadí el registro y el inicio de sesión con contraseña, y probé crear una cuenta, cerrar sesión e iniciar sesión.
- ☐ Construí de forma incremental: pedido pequeño → prueba → comentarios → siguiente paso.
- ☐ Publiqué la app en Vercel y validé el flujo completo (con la confirmación por correo electrónico reactivada).
Siguiente módulo:
2.3 — Construye cualquier cosa: más allá de sitios y apps, automatizaciones y herramientas a medida