CASO DE ESTUDIO / 07
Eventos App
Publicación de eventos, registro de asistentes y gestión de cupos desde una misma plataforma.
En esta página
01 / CONTEXTO
El problema y la solución
El punto de partida
Ofrecer a organizadores y asistentes un sistema centralizado para consultar disponibilidad y gestionar inscripciones a eventos con capacidad limitada.
La propuesta
Una web pública de eventos conectada con paneles personales, tickets únicos y una administración de cupos y asistentes.
02 / PRODUCTO
Funciones principales
Exploración e inscripción
Eventos con fecha, ubicación y disponibilidad; los asistentes pueden consultar el detalle e inscribirse.
Tickets y cancelaciones
Cada inscripción genera un identificador único de 16 caracteres; una cancelación libera el lugar.
Administración de eventos
Creación y edición de eventos, definición del cupo y consulta de asistentes con sus tickets.
Resumen de comentarios con IA
El administrador puede generar, regenerar o eliminar un resumen cuando hay al menos seis comentarios visibles.
03 / IMPLEMENTACIÓN
Decisiones técnicas
Cupos conectados al registro
El registro reduce la disponibilidad y la cancelación la devuelve al evento.
Servidor y validación
Nuxt 4 y Nitro utilizan Drizzle con PostgreSQL en Neon; nuxt-auth-utils gestiona sesiones y Zod valida los datos.
IA con regla de publicación
Vercel AI SDK genera el resumen, que se muestra identificado como “Generado con IA” y requiere un mínimo de comentarios visibles.
04 / CAPTURAS
El proyecto en pantalla
Una selección de vistas del proyecto. Pulsa una captura para verla a tamaño completo.
05 / DOCUMENTACIÓN
Explorar en detalle
El recorrido completo por los módulos, las reglas y las pantallas del proyecto.
Leer documentación completa
Plataforma web para la gestión y registro de eventos con capacidad limitada. Desarrollada con Nuxt 4, Vue 3, Nuxt UI 4 y Tailwind CSS. Utiliza PostgreSQL con Drizzle ORM y Neon para la base de datos.
Acerca del proyecto
Este proyecto surge de la necesidad de tener un sistema centralizado donde los organizadores puedan publicar eventos con cupos limitados y los asistentes puedan registrarse de forma autónoma. El problema principal era que no había una forma fácil de gestionar cupos y evitar sobreventa.
Stack Tecnológico
El proyecto está construido con Nuxt 4 como framework principal, utilizando Vue 3 con Composition API. Para el frontend utilizo Nuxt UI 4 con Tailwind CSS para los estilos. En el backend uso Nitro (el servidor de Nuxt) con Drizzle ORM para interactuar con PostgreSQL en Neon. La autenticación la manejo con nuxt-auth-utils y Zod para la validación de datos.
Parte Pública
La aplicación cuenta con una landing page donde se muestran los eventos próximos. Cada evento muestra información básica como el título, fecha, ubicación y si hay cupos disponibles o está agotado.
Al hacer clic en un evento, se puede ver la descripción completa, fecha, hora, ubicación y la cantidad de lugares disponibles. Si el usuario está interesado y hay cupos, puede registrarse directamente desde aquí.
Autenticación
Para registrarse, el usuario necesita proporcionar su nombre, correo electrónico y una contraseña. Una vez creada la cuenta, puede iniciar sesión para acceder a su panel personal.
Panel del Usuario
Una vez autenticado, el usuario tiene acceso a "Mis Eventos" donde puede ver todos los eventos a los que está inscrito, tanto próximos como pasados. Desde aquí también puede cancelar su asistencia si ya no puede asistir, lo cual libera su lugar automáticamente para que otra persona pueda inscribirse.
Sistema de Tickets
Al inscribirse a un evento, se genera automáticamente un ticket con un identificador único de 16 caracteres. Este ticket es visible en el panel del usuario y puede copiarlo al portapapeles con un clic. El sistema garantiza que cada ticket sea único.
Panel de Administración
El administrador tiene acceso a un panel completo donde puede gestionar todos los eventos. Desde aquí puede crear nuevos eventos especificando título, descripción, fecha, hora, ubicación e imagen. También puede editar eventos existentes o eliminarlos si es necesario.
Una funcionalidad importante es la gestión de cupos. El administrador define un cupo máximo al crear el evento, y el sistema va reduciendo automáticamente conforme los usuarios se registran. Si un usuario cancela, el cupo se libera automáticamente.
En la sección de detalles de cada evento, el administrador puede ver la lista completa de asistentes registrados, junto con su información de contacto y el ID del ticket. Esto es útil para verificar la asistencia el día del evento.
Resumen de Comentarios con IA
Esta funcionalidad permite que el administrador genere automáticamente un resumen de los comentarios de un evento usando el Vercel AI SDK, el cual se muestra como primera opción en la página pública del evento.
Tecnologías utilizadas:Vercel AI SDK para la generación de texto, Drizzle ORM para la persistencia en PostgreSQL y Zod para la validación de datos.
Regla de negocio:El resumen solo se puede generar cuando el evento tiene 6 o más comentarios visibles.
Flujo de trabajo:Desde el panel de administración, el admin puede generar, regenerar o eliminar el resumen. En la vista pública, el resumen aparece destacado con la etiqueta "Generado con IA".
Referencia de diseño:Me inspiré en funcionalidades similares de plataformas como Mercado Libre, adaptando la idea al contexto de eventos para ofrecer una vista rápida y valiosa del feedback de los usuarios.
