CRUD básico con Lovable y Supabase para crear tablas de datos

Curso Gratis de Lovable para Crear Páginas Web sin Programar

Contenido del curso

Fundamentals and MVP Planning

Visual Construction of the Front-end

Data, Users and Business Logic

Launch, Testing and Feedback

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:34

CRUD básico con Lovable y Supabase para crear tablas de datos

Curso Gratis de Lovable para Crear Páginas Web sin Programar

Clase 12 de 20

Clase 12 / 20

Comentarios (18)18 comentarios

Beder Danilo Casa Condori

Hace un año

El CRUD (Crear, Leer, Actualizar y Eliminar) es fundamental al trabajar con bases de datos. En el contexto de Lovable y Supabase, puedes crear tablas de datos de manera sencilla. Por ejemplo:

Crear: Usa Lovable para definir una nueva tabla en Supabase donde los usuarios puedan añadir tareas.
Leer: Los usuarios pueden visualizar las tareas guardadas en la tabla.
Actualizar: Permite modificar el estado de una tarea, como marcarla como completada.
Eliminar: Los usuarios pueden borrar tareas no deseadas.

Esto proporciona una funcionalidad completa para manejar datos en tu aplicación.

Gonzalo Blasco

Hace 9 meses

Carril: APRENDER

Vamos a lo esencial de la clase 12 (CRUD con Lovable + Supabase) y cómo realmente funciona, sin ruido.

Qué aprendés en la clase 12 (en una frase)

Pasás de una app “linda” a una app que guarda, lee y modifica datos reales por usuario, sin escribir SQL ni backend a mano.

Qué es CRUD (pero aplicado, no teórico)

CRUD no es un concepto abstracto. En Lovable pasa esto:

Create → el usuario crea un registro (ej: una tarea, un lead, una respuesta)
Read → la app carga los registros del usuario al entrar
Update → el usuario cambia algo (estado, texto, check)
Delete → elimina lo que ya no sirve

Todo eso vive en Supabase, no en memoria.

Cómo funciona realmente (paso a paso mental)

1. Vos escribís un prompt claro

Ejemplo genérico:

“Agregar una tabla al dashboard para que el usuario pueda crear, ver, editar y borrar X. Crear la tabla en Supabase y usar CRUD.”

👉 Clave: decís explícitamente “CRUD”.

2. Lovable te propone cambios

Antes de tocar nada:

SQL para crear la tabla
Columnas (id, user_id, campos, estados)
Políticas de seguridad (RLS)

Vos revisás y aprobás.

Esto es importante: no es magia ciega. Vos tenés control.

3. Supabase ejecuta el SQL

Cuando aprobás:

Se crea la tabla en PostgreSQL
Se agregan políticas RLS
Queda ligada al usuario autenticado (auth.uid())

4. Lovable genera el frontend conectado

Automáticamente:

Formulario para crear registros
Lista para leerlos
Acciones para editar / borrar
Todo conectado a Supabase

Si refrescás la página y los datos siguen ahí → funciona.

La parte CLAVE: seguridad (RLS)

Esto es lo que hace que sea “producto” y no demo.

Cada fila tiene user_id
Las políticas dicen:
- “solo podés ver filas donde user_id = auth.uid()”

Resultado:

Vos ves tus datos
Otro usuario no puede ver ni tocar los tuyos
No depende del frontend → lo protege la base de datos

Esto es nivel pro.

Qué NO hace todavía esta clase

Muy importante para no adelantarse:

❌ No lógica compleja de negocio
❌ No agentes inteligentes
❌ No automatizaciones
❌ No decisiones “AI”

👉 Solo persistencia + seguridad + flujo básico Y está perfecto que sea así.

Cómo conecta esto con TU agente (concesionaria)

Traducido a tu caso:

En esta etapa, CRUD sirve para:

Guardar:
- consultas entrantes
- respuestas sugeridas
- estado de cada lead (nuevo / respondido)
Leer:
- historial por vendedor
Actualizar:
- marcar “respondido”
Eliminar:
- limpiar ruido o pruebas

👉 Todavía no responde solo. 👉 Todavía no deduce. 👉 Pero ya tiene memoria real.

Sin esto, no hay agente serio.

Punto ciego típico

Mucha gente quiere:

“que el agente piense”

Pero sin CRUD:

no recuerda
no aprende
no escala

La clase 12 es poner el cerebro en disco, básicamente.

Próximo paso lógico (cuando sigamos)

Después de CRUD:

clase 13 → APIs / edge functions Ahí recién empieza la parte “inteligente”.

Mini resumen final

Clase 12 = datos reales + seguridad por usuario
CRUD es la base de cualquier SaaS
Tu agente necesita esto sí o sí
No estás atrasado: estás construyendo bien

Luis Fernando Forero Guzmán

Hace un año

Prompt used:

can you add a table to the dashboard that allows the users to tick off todos, we should create a table in supabase to enable it, make sure it utilises CRUD

Carlos Andrés Garcia Sanchez

Hace 8 meses

cinco minutos de video son como 30 minutos de practica y mas cuando actualizan tan rapido la Lovable

Juan Sebastian Vega Hernandez

Hace un año

gran contedino, aunque la parte de supabase requiere más estudios, es realmente fácil seguir el ritmo 🥳

Israel Basurto

Hace un año

Me vuela la cabeza estas funciones de IA, yo que vengo de código de .net, C# y estructuras manuales de bases de datos es increible como la IA puede acelerar y mejorar el desarrollo. Sentía que me estaba quedanto atras pero ahora siendo que estoy avanzando 10 años de obsolesencia con este curso.

Gabriel Obregón

Hace 9 meses

📘📌 🔁 CRUD with Lovable and Supabase

🎯✨ OBJECTIVE

👉 Quickly learn CRUD using a real use case:

✔ Task panel

✔ Lovable

✔ Supabase

✔ No manual coding

🔐 With built-in security and automatic front-end

🔁🧩 WHAT IS CRUD?

CRUD = basic operations of an application

➕ Create

→ Add new tasks

👀 Read

→ View saved tasks

✏️ Update

→ Modify tasks

→ Example: mark as completed

🗑️ Delete

→ Remove unnecessary tasks

📌 Everything is practiced in a real task panel

🛠️⚙️ TOOLS

🤖 Lovable

✔ Works through prompts

✔ Automatically generates:

🗄️ Database
🔐 Security
🖥️ Connected front-end

🗃️ Supabase

✔ Stores data

✔ Runs SQL

✔ Applies RLS

🧠➡️ WORKFLOW

1️⃣ ✍️ Write a prompt

2️⃣ 👀 Review proposed changes

3️⃣ ✅ Approve

4️⃣ 🤖 Lovable does everything:

Runs SQL
Creates tables
Configures RLS
Generates the front-end

🗂️📄 TASK TABLE

Main fields:

🔹 id → unique identifier

🔹 user_id → task owner

🔹 title → description

🔹 completed → status (done / not done)

🔐🛡️ SECURITY (RLS)

✔ Row-level security

✔ Each user sees only their own data

✔ Validation with auth.uid

👤 Example:

✅ Harry sees his tasks
❌ Sue cannot see Harry’s tasks

Edward Martinez

Hace 10 meses•editado

Inicio por adelantado el día 10 ya que venia haciendo este curso desde hace un par de días atrás, esto ha complementado un montón lo que ya conocía sobre desarrollo web y tengo ya un MVP con las clases vistas hasta hoy.

Sebastián Pineda Giraldo

Hace 8 meses

Gracias

Harrison Alberto Tutalcha Pame

Hace un año

¡Excelente pregunta, Harrison Alberto! La clase se centra en tablas donde los usuarios interactúan directamente con los datos usando CRUD (Crear, Leer, Actualizar, Eliminar). Las tablas del sistema, como las de almacenamiento de usuarios, no suelen aplicar CRUD directamente para el usuario final.

Catalina Jaramillo

Hace 2 meses

porque tengo que implementar CRUD

Piensa en cualquier aplicación que uses todos los días, como WhatsApp o Spotify. Sin CRUD, solo podrías ver información estática; no podrías enviar un mensaje nuevo, marcarlo como leído, editar tu perfil ni borrar nada.

El CRUD es lo que convierte una simple página web en un software vivo e interactivo. ¿Qué pasaría con tus datos si cerraras la sesión y la app no tuviera dónde guardarlos?

Enrique Gutierrez

Hace 5 meses

voy con la clase pero no he podido conectar con supabase por mas que lo intento no sale el icono arriba y el de gibhub ya no aparece, si me pudieran ayudar seria genial.

Engelbert Fanor Juárez Bonilla

Hace 7 meses

pero no hizo la funcionalidad de actualizar. se le olvidó a lovable

Camila Ossa

Hace 8 meses

Aqui voy, aquí voy, me va gustando

MARIA TERESA PANIAGUA RIVERA

Hace 9 meses

Thanks

EDGAR LÓPEZ FIERRO

Hace un año

El riesgo de seguridad más crítico al no incluir una condición como 'user_id = auth.uid()' en una política RLS es la exposición de datos sensibles. Sin esta verificación, cualquier usuario autenticado podría acceder a los datos de otros usuarios, lo que comprometería la privacidad y la seguridad de la información. Esto es especialmente relevante en aplicaciones donde los datos son personales o confidenciales. Implementar RLS adecuadamente es esencial para proteger la base de datos y garantizar que los usuarios solo tengan acceso a su propia información.

Fredy Pico

Hace un año

I would like to know what is going on in the tables. Can you explain or show that while Lovable is building the application?

Follow me:

EDGAR LÓPEZ FIERRO

Hace un año

En PILARES hicimos parecido con Python al utilizar el módulo Tkinter para resolver un problema haciendo tablas de calificaciones de los alumnos: crear, buscar, modificar y eliminar.

Andrés Felipe Cano Sierra

Hace un año

¿Ofrece Supabase un ORM o algún tipo de conexión de los modelos en el código?

Andrés Felipe Cano Sierra

Hace un año

Respuesta de la IA: Supabase no ofrece un ORM (Object-Relational Mapping) incorporado, pero proporciona una API para interactuar con la base de datos PostgreSQL de manera eficiente. Puedes usar librerías como Supabase.js para gestionar tu conexión y realizar operaciones CRUD, lo cual simplifica el manejo de datos en tu aplicación. Esto es útil para desarrolladores que desean integrar la funcionalidad de su front-end con la lógica de la base de datos sin la complejidad de un ORM completo.

¿Alguien conoce algo mejor?

Kevin Fiorentino

Hace un año

Por lo que dices, Supabase no tiene su propio ORM, pero eso no quiere decir que no puedas mapear tu BBDD desde tu código y leer las tablas, ejecutar queries, etc. Puedes usar TypeORM por ejemplo, conectarte a la BBDD, crear los schemas y demás.

Es tu base de datos en tu cuenta de Supabase, puedes hacer lo que quieras. Dudo que te limite de alguna manera.

Recursos

Master CRUD fast with a real to‑do dashboard using Lovable and Supabase. Learn how to create, read, update, and delete records, auto-generate front-end code, and keep user data safe with row-level security. Clear steps, plain English, and examples you can reuse.

What is CRUD and why does it matter?

CRUD is the foundation of most apps: create, read, update, delete. It’s how users add data, view it, change it, and remove it in a database or table. In the example, the goal is to let users manage to-dos in a dashboard without writing code.

Create: add new to-dos to the table.
Read: load and display saved to-dos in the dashboard.
Update: mark items as completed or edit them.
Delete: remove items you no longer need.

Key vocabulary and examples. - CRUD: acronym for create, read, update, delete. Example: “we want to be able to create, read, update, and delete them as well.” - Database/table: where records live. Example: “the basic thing that you wanna do with any sort of database or table.” - Record: one row in a table. Example: “change some records, and be able to delete them as well.” - Dashboard: the app screen where you interact with data.

How does Lovable set up Supabase for a to-do table?

Lovable integrates tightly with Supabase to handle both the front-end code and the SQL needed to create tables. Using the prompt box, you ask for a CRUD-enabled to-do table and approve the proposed database changes.

What you ask Lovable to do. - “Add a table to the dashboard that allows the user to tick off to-dos.” - “Create a table in Supabase to enable it.” - “Make sure it utilizes CRUD.”

What Lovable creates in SQL. - id: unique identifier for each to-do. - user_id: links the to-do to the logged-in user. - title: text of the to-do. - completed: simple true/false to track status.

What happens when you click approve. - Lovable contacts Supabase and runs the SQL. - Tables are created and policies prepared. - The app connects to the database and the front end is generated. - You can add, delete, and mark items complete in the UI. - Refreshing the dashboard shows the data persists, proving it’s saved in the database. - In Supabase’s table editor, you can see your to-dos tied to your user ID.

Useful vocabulary in context. - Prompt: the instruction you give Lovable. - Approve: confirm the suggested database change. - Table editor: where you view rows in Supabase. - Front-end code: UI generated to interact with your data.

How is data kept secure with RLS policies?

Security uses RLS (row-level security) so users can’t see each other’s data. Policies check the user’s identity, often using auth.uid, before allowing any action. Lovable typically sets this up for you, and may create helper functions or triggers to streamline operations.

RLS: ensures “Harry can read his content, but Sue cannot read Harry’s content.”
Policy: a rule that controls who can select, insert, update, or delete.
auth.uid: checks the authorized user ID inside policies.
Trigger/function: optional helpers to automate or speed up tasks.

Which vocabulary should you notice?

RLS (row-level security): per-user access rules.
Policy: permission rule in Supabase.
auth.uid: the logged-in user’s ID used in checks.
User ID: the identifier that links data to a user.
SQL: the language used to create tables and policies.
API: service you connect to for external data.
Requests and responses: how you send queries to an API and read results.

What practical skills are practiced?

Writing a clear prompt that demands CRUD coverage.
Reviewing and approving database changes.
Understanding columns: id, user_id, title, completed.
Checking RLS policies reference auth.uid.
Adding, deleting, and marking to-dos as complete.
Verifying persistence by refreshing the dashboard.
Viewing data in Supabase’s table editor.

What examples show CRUD in action?

Create: “add new to-dos.”
Read: refresh the dashboard and see the same items.
Update: “mark the eat chicken one” as complete.
Delete: remove items you no longer need.

Looking ahead: a quick API connection is mentioned, with a plan to explore requests and responses next. If you have questions about prompts, RLS, or the to-do schema, share them in the comments and compare approaches with others.

Resumen

What is CRUD and why does it matter?

Create: add new to-dos to the table.
Read: load and display saved to-dos in the dashboard.
Update: mark items as completed or edit them.
Delete: remove items you no longer need.

How does Lovable set up Supabase for a to-do table?

What you ask Lovable to do. - “Add a table to the dashboard that allows the user to tick off to-dos.” - “Create a table in Supabase to enable it.” - “Make sure it utilizes CRUD.”

What Lovable creates in SQL. - id: unique identifier for each to-do. - user_id: links the to-do to the logged-in user. - title: text of the to-do. - completed: simple true/false to track status.

How is data kept secure with RLS policies?

RLS: ensures “Harry can read his content, but Sue cannot read Harry’s content.”
Policy: a rule that controls who can select, insert, update, or delete.
auth.uid: checks the authorized user ID inside policies.
Trigger/function: optional helpers to automate or speed up tasks.

Which vocabulary should you notice?

RLS (row-level security): per-user access rules.
Policy: permission rule in Supabase.
auth.uid: the logged-in user’s ID used in checks.
User ID: the identifier that links data to a user.
SQL: the language used to create tables and policies.
API: service you connect to for external data.
Requests and responses: how you send queries to an API and read results.

What practical skills are practiced?

Writing a clear prompt that demands CRUD coverage.
Reviewing and approving database changes.
Understanding columns: id, user_id, title, completed.
Checking RLS policies reference auth.uid.
Adding, deleting, and marking to-dos as complete.
Verifying persistence by refreshing the dashboard.
Viewing data in Supabase’s table editor.

What examples show CRUD in action?

Create: “add new to-dos.”
Read: refresh the dashboard and see the same items.
Update: “mark the eat chicken one” as complete.
Delete: remove items you no longer need.

Fundamentals and MVP Planning

Crea apps sin código con Lovable

Creación de un proyecto en blanco y efectos animados con p5.js

Chat y Edit mode en Lovable

Knowledge files para apps consistentes en Lovable

User stories y diagramas para MVPs rápidos

Diseña el style guide de tu app en Lovable

Visual Construction of the Front-end

Refactoriza componentes grandes en Lovable

Personaliza tu UI con componentes de 21stDev

Rutas en React Router con Lovable

Prompting en español con comentarios en inglés en Lovable

Cómo conectar Supabase a Lovable

Data, Users and Business Logic

CRUD básico con Lovable y Supabase para crear tablas de datos

Cómo conectar una API externa con Lovable

Formularios de feedback y waitlist con Lovable

Cómo crear un flujo de onboarding con Supabase

Cómo depurar errores en Lovable

Launch, Testing and Feedback

Escaneo de seguridad antes del despliegue en aplicaciones web

Cómo publicar tu app y conseguir tus primeros usuarios

Conectar un dominio personalizado en Lovable

Cómo gestionar y priorizar feedback en Lovable

CRUD básico con Lovable y Supabase para crear tablas de datos

Progreso del curso

Fundamentals and MVP Planning

Visual Construction of the Front-end

Data, Users and Business Logic

Launch, Testing and Feedback

Recursos

Recursos