CodeIA2025 - Sesión 9 - Vue 3 - To-Do App con Supabase

En esta Sesión 9 arrancamos el Proyecto P4: To-Do App con Vue 3 y damos un salto importante: pasamos de “UI local” a producto con datos reales, usando Supabase (Postgres + Auth + RLS) como backend gestionado y despliegue en Vercel para tener una URL pública. Esta sesión entrena especialmente nuestra capacidad de definir contratos de datos, permisos y estados de UI con IA, sin perdernos en detalles de código.

SesiónIntermedio

Hace 5 meses2h 11m 40s108 visualizaciones5.0(1 reviews)

Tecnologías

TypeScriptAsistente IA para códigoVue 3Supabase

Herramientas IA utilizadas

Claude CodeGeminiAntigravityVSC

Iniciar sesión para comenzar Crear cuenta

Sesión 9 - Vue 3: To-Do App con Supabase

En esta sesión arrancamos el Proyecto P4: To-Do App con Vue 3 y damos un salto importante: pasamos de "UI local" a producto con datos reales, usando Supabase (Postgres + Auth + RLS) como backend gestionado y despliegue en Vercel para tener una URL pública. Esta sesión entrena especialmente nuestra capacidad de definir contratos de datos, permisos y estados de UI con IA, sin perdernos en detalles de código.

📋 Descripción general

Qué haremos:

Definiremos el alcance

Contenido Protegido

Inicia sesión para acceder al contenido completo.

Iniciar Sesión Crear Cuenta

Índice de la sesión

00:001:54

Introducción al Proyecto TodoApp con Vue 3 y Supabase

Se presenta el proyecto de una aplicación de gestión de tareas (TodoApp) que se desarrollará con Vue 3 y se conectará a Supabase. Se discute la diferencia entre librerías y frameworks como React/Next y Vue/Nuxt, y la naturaleza de Angular como framework completo.

01:543:39

Definición de Alcance y Conceptos Clave

Se define el alcance de la aplicación, incluyendo operaciones CRUD, gestión de estados y filtros. Se explica el concepto de 'estados' en el desarrollo de software y se introduce la necesidad de crear cuentas en Supabase y Vercel.

05:334:33

Herramientas y Tecnologías Fundamentales

Se discuten las herramientas y tecnologías a utilizar: Vite para empaquetado, PNPM para gestión de paquetes, Tailwind para estilos y TypeScript para tipado. Se enfatiza la importancia de Node 20+ y la flexibilidad en la elección de bases de datos.

10:068:03

Planificación del Proyecto con IA (Prompts)

Se inicia la planificación del proyecto utilizando prompts de IA para generar la estructura del MVP, modelo de datos, políticas RLS, mapa de UI, plan de integración y checklist de despliegue. Se muestra cómo interactuar con la IA para refinar estos documentos.

18:096:51

Configuración de Supabase y Generación de Código

Se procede a la creación del proyecto en Supabase, obteniendo las claves API necesarias. Se utiliza la IA para generar el código base de la aplicación Vue 3, incluyendo la configuración del entorno y la conexión a Supabase.

25:005:00

Resolución de Errores y Creación de Tablas

Se identifican y resuelven errores relacionados con la ausencia de la tabla 'todos' en Supabase. La IA genera un script SQL para crear la tabla y configurar las políticas RLS y autenticación mínima, demostrando la capacidad de la IA para corregir problemas.

30:006:40

Pruebas Iniciales de la Aplicación y Despliegue en Vercel

Se realizan pruebas iniciales de la aplicación, verificando el funcionamiento del login y registro. Se procede al despliegue de la aplicación en Vercel utilizando la CLI, configurando el proyecto y las variables de entorno para la producción.

36:4094:54

Verificación del Despliegue y Próximos Pasos

Se verifica el despliegue exitoso en Vercel y se comprueba el funcionamiento de la aplicación en producción. Se discuten los próximos pasos, incluyendo la integración con GitHub para un despliegue continuo y futuras mejoras en la aplicación.