Cómo conectar tu web con una base de datos con Claude Code

Hay un momento concreto en el que tu web deja de ser un folleto.

Es cuando alguien escribe algo, le da a un botón, y eso se queda guardado. A partir de ahí ya no tienes una página: tienes una herramienta. Y la diferencia entre las dos cosas es una base de datos.

Suena a que hace falta ser programador. No hace falta. Lo que sí hace falta es entender cuatro conceptos, y entenderlos de verdad, porque es la parte donde se puede liar de forma que duela: perder datos, dejar información expuesta o montar algo que se rompe en cuanto entran diez personas a la vez.

Vamos por partes.

¿Cómo guardo datos de usuarios en mi web?

Con tres piezas que hacen cosas distintas y que conviene no mezclar en la cabeza.

La base de datos. Es donde se guardan las cosas, en tablas. Una tabla de usuarios, una de mensajes, una de lo que sea. Cada fila es un registro y cada columna un dato.

La capa que la protege. Nadie puede hablar directamente con la base de datos desde el navegador sin control. Tiene que haber unas reglas que digan quién puede leer qué y quién puede escribir qué. Esta es la parte que la gente se salta y es la que causa los disgustos.

La web. Los formularios y las pantallas que ve el usuario, que piden y muestran datos a través de esa capa.

Yo uso Supabase para las dos primeras. Te da la base de datos, la gestión de usuarios y las reglas de acceso, con plan gratuito suficiente para empezar. Y me lo monto todo con Claude Code, que es quien escribe la parte aburrida mientras yo decido qué quiero.

Si esto de las bases de datos te suena a chino todavía, empieza por qué es una base de datos sin código y vuelve luego.

Paso 1: decide qué guardas antes de tocar nada

Escríbelo en una servilleta. Literal.

"Voy a guardar contactos. De cada contacto quiero: nombre, correo, mensaje, fecha y si ya lo he contestado."

Con eso ya tienes la tabla. Cinco campos. Y ahora la pregunta importante, la que decide todo lo demás: ¿quién puede ver esto?

Hay tres respuestas posibles y solo tres:

• Solo yo. (Un formulario de contacto, por ejemplo.)
• Cualquiera. (Comentarios públicos.)
• Cada usuario lo suyo. (Una herramienta con cuentas.)

La tercera es la que más trabajo lleva. La primera es la más común y la que voy a usar de ejemplo.

Paso 2: la conversación con Claude

Abres tu proyecto y le cuentas exactamente eso, sin lenguaje técnico:

"Quiero añadir a esta web un formulario de contacto que guarde los mensajes en Supabase. Los campos son nombre, correo, mensaje, fecha y contestado. Solo yo debo poder leer los mensajes; cualquiera puede enviar uno. Explícame qué tengo que hacer en el panel de Supabase y qué haces tú."

Ese último trozo es clave. Hay pasos que tienes que dar tú a mano en el panel (crear el proyecto, copiar las claves) y hay pasos que hace él en el código. Si no lo separas, te pierdes.

Lo que va a hacer: crear la tabla, escribir las reglas de acceso, montar el formulario y conectarlo. Lo que vas a hacer tú: crear la cuenta, crear el proyecto y pegarle las claves donde te diga.

Paso 3: las claves, que es donde se la pega todo el mundo

Supabase te da dos claves. Una pública y una secreta.

La pública puede ir en la web, no pasa nada, está pensada para eso. La secreta no puede salir de tu servidor jamás. Si la secreta acaba en el código que se descarga el navegador, cualquiera puede leer y borrar toda tu base de datos.

Dos normas que no me salto nunca:

Las claves van en un archivo de variables de entorno, nunca escritas dentro del código. Claude lo hace bien si se lo pides, pero compruébalo.

Ese archivo no se sube nunca a GitHub. Pídele explícitamente: "asegúrate de que el archivo de variables está en el gitignore". Y míralo tú.

Si alguna vez sospechas que una clave se ha escapado, en el panel se regenera en un clic. Hazlo sin pensarlo.

Paso 4: las reglas de acceso

Aquí va el concepto que más rentabiliza el rato que le dediques.

Por defecto, una tabla nueva no deja hacer nada a nadie. Y a partir de ahí tú abres permisos concretos: "cualquiera puede insertar filas en contactos", "solo el usuario autenticado puede leer sus propias filas".

La forma correcta de trabajar es empezar cerrado e ir abriendo lo mínimo. La forma en la que mucha gente acaba, por prisa, es abriendo todo "para probar" y olvidándose de cerrarlo.

Yo le pido siempre lo mismo: "escríbeme las reglas de acceso una por una y explícame en castellano qué permite cada una". Si una regla no la entiendes leída en castellano, no la dejes puesta.

Paso 5: probar como si fueras un desconocido

Abre tu web en una ventana de incógnito, sin tu sesión iniciada. Y prueba a ver si puedes leer lo que no deberías.

Envía un mensaje: debería funcionar. Intenta ver la lista de mensajes: no debería dejarte. Si te deja, tienes una regla mal puesta y mejor descubrirlo ahora que dentro de seis meses.

Esta prueba tonta de dos minutos es lo que separa un proyecto serio de un proyecto que un día sale en un foro por las razones equivocadas.

Lo que se te va a atascar

El error de conexión de la primera vez. Casi siempre son las claves mal pegadas o el servidor que no se ha reiniciado después de cambiarlas. Reinicia y vuelve a probar antes de volverte loco.

Los datos que no aparecen. Suele ser una regla de acceso que bloquea la lectura, no un fallo del formulario. La pista es que el registro sí está en el panel de Supabase pero no se ve en la web.

Las fechas y las zonas horarias. Se guardan en un formato universal y luego se muestran donde toque. Si ves horas que no cuadran, es esto. Dile qué zona quieres ver y lo resuelve.

Querer montar el sistema de usuarios el primer día. Cuentas, contraseñas, recuperación, correos de confirmación. Es todo un mundo y no lo necesitas para guardar mensajes de un formulario. Hazlo cuando el proyecto te lo pida, no antes.

No tener copia de seguridad. El día que ejecutes una operación de borrado sin filtro vas a querer tener una. Configúralas desde el principio, es un botón.

Y ahora qué

Empieza por lo más pequeño que puedas: un formulario de contacto en la web que ya tengas. Una tabla, dos reglas de acceso, una pantalla.

Cuando veas la primera fila aparecer en el panel sabiendo que la ha escrito alguien desde internet, se te queda una cara de tonto muy agradable. Y a partir de ahí ya piensas distinto: cualquier cosa que se te ocurra es una tabla más y dos pantallas.

Si vienes de cero y ni siquiera tienes Claude Code funcionando, empieza por la guía para no programadores. Y para exprimir Supabase más allá de lo básico, lo tengo desmenuzado en Supabase como base de datos de tu app con IA.

En el curso monto esto de principio a fin: la web, la base de datos, las reglas de acceso y la publicación, con los errores reales incluidos en vez de una demo perfecta.

Ver el curso de webs con Claude Code