En esta actividad creas tu repositorio en GitHub, lo clonas localmente, instalas Node.js e inicializas tu proyecto con Next.js usando create-next-app. Aprendes el flujo básico de Git: agregar cambios, hacer commit, resolver un conflicto de merge y subir tu proyecto al repositorio remoto.

En esta actividad creas tu proyecto en Supabase (base de datos + backend en la nube), conectándolo con tu cuenta de GitHub, y creas una primera tabla en la base de datos definiendo sus columnas y tipos de datos.

En esta actividad instalas el cliente de Supabase en tu proyecto Next.js, configuras tus credenciales de forma segura en un archivo .env, creas el cliente de conexión reutilizable, y haces la primera consulta trayendo datos reales desde la base de datos hacia tu aplicación.

Conectas el formulario con Supabase para crear la cita al enviarlo. Implementas los estados idle/loading/ok/error para avisar al usuario qué está pasando. Subes el código a GitHub con un commit claro.

Creas las tablas negocio (id UUID, nombre, tipo, fecha) y citas, relacionada con negocio mediante negocio_id con eliminación en cascada. Activas las políticas de seguridad (RLS) sobre la nueva tabla.

Creas la ruta /agenda en el App Router y construyes el formulario donde el cliente ingresa sus datos para agendar. Usas un solo objeto de estado para todo el formulario en vez de un useState por campo.

Descripción: Configuras la autenticación de Supabase desactivando la confirmación de email, agregas una columna a la tabla negocio para vincularla con el usuario autenticado (auth.uid()), y activas las políticas RLS en negocio y citas para que cada negocio solo vea su propia información. Instrucciones para el estudiante: Mira el video, donde se explica cómo desactivar la confirmación de email en Supabase Auth, cómo agregar una columna a la tabla negocio que la relacione con el usuario dueño, y cómo se activan las políticas de seguridad (RLS) en negocio y citas, usando la función auth.uid() para bloquear automáticamente cualquier consulta si no hay sesión activa. Entrega: Captura de la configuración de autenticación en Supabase (confirmación de email desactivada) Captura de la tabla negocio mostrando la nueva columna que la relaciona con el usuario Captura de las políticas RLS activas en negocio y citas

Título: Selector de negocio y ruta dinámica Descripción: Creas la carpeta dinámica [negocioId] con su page.tsx dentro de agendar, y agregas en la página principal un selector donde la persona escoge el tipo de negocio (por ejemplo, barbería) para ser redirigida directamente a /agendar/[negocioId] de ese negocio, saltándose el paso de elegir negocio si ya llega por un link directo. Instrucciones para el estudiante: Mira el video, donde se explica la diferencia entre dos formas de llegar al formulario de agendamiento: escogiendo el tipo de negocio desde la página principal (ej. "necesito barbería"), o llegando directamente por un link único del negocio, que salta el paso de selección y lleva de una vez a /agendar/[negocioId]. Entrega: El código de app/agendar/[negocioId]/page.tsx Captura del selector de tipo de negocio en la página principal Captura navegando directamente por el link único de un negocio, mostrando que llega directo al formulario sin el paso de selección

Descripción: Construyes el panel donde el dueño ve sus citas con su estado (pendiente, confirmada, cancelada), y agregas las acciones de confirmar y cancelar, cada una actualizando la base de datos y abriendo automáticamente un mensaje de WhatsApp para el cliente. Instrucciones para el estudiante: Mira el video, donde se explica cómo se listan las citas del negocio filtradas por su negocio_id (protegidas por las políticas RLS que vimos en el video de autenticación), cómo se actualiza el estado de una cita a "confirmada" o "cancelada", y cómo se arma automáticamente un link de WhatsApp (wa.me) con un mensaje para avisarle al cliente. Entrega: El código del componente del dashboard donde se listan y gestionan las citas Captura del dashboard mostrando citas en distintos estados Captura de WhatsApp abriéndose con el mensaje automático al confirmar o cancelar una cita

Descripción: Construyes la sección del dashboard donde el dueño activa/desactiva cada día, define hora de inicio/fin y duración de cita, con su endpoint GET/POST que guarda todo en horarios_disponibilidad. Implementas también la función SQL get_available_slots, que calcula los espacios disponibles cruzando el horario con las citas existentes, en vez de calcularlo en JavaScript. Instrucciones para el estudiante: Mira la primera mitad del video, donde se configura el horario (desactivar un día, cambiar el rango de otro) y se revisa el código del GET/POST de horarios. Luego, presta atención a la función get_available_slots de PostgreSQL y a cómo el endpoint /api/slots la invoca por RPC pasando negocioId y fecha. Entrega: Captura del panel de horarios configurado Código de los endpoints GET/POST de horarios Código de la función SQL get_available_slots y del endpoint /api/slots

Descripción: Construyes el componente SlotPicker, que pinta la grilla de horas para el cliente: morado si está seleccionada, gris si está disponible, rojo tachado si está ocupada, y bloquea por completo los días que el negocio no atiende, mostrando un mensaje de error si se intenta agendar igual. Instrucciones para el estudiante: Mira la segunda mitad del video, donde se selecciona una fecha y aparece la grilla, incluyendo el intento de agendar un lunes (día no habilitado) y el mensaje de error resultante. Revisa el useEffect del SlotPicker que pide los slots cada vez que cambia la fecha. Entrega: Código del componente SlotPicker Captura de la grilla con horas disponibles y ocupadas Captura del mensaje de error al intentar agendar un día no habilitado

Descripción: Activas el toggle de pago anticipado (requiere_pago) en un negocio, y entiendes los dos flujos de pago distintos que maneja CitasYa: el cliente final pagando su cita por adelantado con tarjeta, y el dueño del negocio pagando una suscripción mensual a CitasYa (Básico/Pro/Premium), ambos resueltos mediante un mismo webhook de Stripe. Instrucciones para el estudiante: Mira el video, donde se explica la diferencia entre los dos flujos de pago de la plataforma, y se activa el pago anticipado en un negocio de prueba. (Nota: si tu instructor pide ver el código de checkout y el webhook, revisa también el resto del video más allá de este punto, donde se explica create-checkout-session, create-subscription-session y stripe-webhook.) Entrega: Captura del toggle de pago anticipado activado en el negocio Código del endpoint de checkout de citas Código del webhook de Stripe manejando ambos tipos de evento

Descripción: Conectas el repositorio de GitHub con Vercel para despliegue continuo, configuras las variables de entorno de producción (Supabase, Stripe), y verificas la app funcionando en producción exactamente igual que en local, con cada git push disparando un nuevo despliegue automático. Instrucciones para el estudiante: Mira el video, donde se explica cómo conectar GitHub con Vercel, por qué las variables de entorno (.env, que nunca se sube al repositorio) hay que configurarlas manualmente en Vercel (NEXT_PUBLIC_SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET), y por qué cambiar una variable requiere forzar un "Redeploy" para que tome efecto. Presta atención también a la demo final: un cambio subido con git push disparando un despliegue automático a producción. Entrega: Captura de las variables de entorno configuradas en Vercel (solo nombres, sin valores) Captura del historial de deployments en Vercel Captura de la app funcionando en la URL de producción (agendando o confirmando una cita real)