Arquitectura del Frontend

Visión General

El Frontend Público (serve-time-ui) es una aplicación web moderna construida con Nuxt 4, Vue 3 y TypeScript. Forma parte del mismo monorepo que el Panel de Administración, gestionado con Nx y pnpm.

Stack Tecnológico

• Framework: Nuxt 4 (Vue 3)
• Lenguaje: TypeScript
• UI: Nuxt UI + Tailwind CSS
• Fechas: @internationalized/date
• Build: Vite 7
• Monorepo: Nx con pnpm workspaces

Cómo Funciona

1. El cliente abre el sitio en su navegador
2. Selecciona una sede (ej: Rosario, Funes)
3. Se conecta al servidor para ver disponibilidad en tiempo real
4. Completa la reserva siguiendo los 4 pasos
5. Recibe confirmación por email

Componentes Principales

Formulario de Reserva (Multi-step)

La pantalla principal con un formulario de 4 pasos:

1. Detalles del turno: Selección de fecha y duración
2. Selección de cancha: Visualización de canchas disponibles con horarios y precios
3. Datos personales: Información del jugador
4. Pago: Selección de método de pago y confirmación

Mapa de Sede

Visualización interactiva de la disposición de las canchas usando componentes SVG vectoriales (cancha estándar, cancha de singles, frontón, zona de práctica, parque).

Sistema de Disponibilidad

Consulta en tiempo real al backend para mostrar turnos disponibles, filtrando por:

• Sede seleccionada
• Fecha elegida
• Duración del turno
• Franja horaria

Integración de Pagos

Conexión segura con MercadoPago para pagos con débito y dinero en cuenta. También soporta transferencia bancaria con flujo manual.

Sistema de Emails

Envío automático y asíncrono de confirmaciones con:

• Código de referencia de la reserva
• Detalles completos (fecha, hora, cancha, precio)
• Link de cancelación
• Información de la sede

Cancelación de Reservas

Página dedicada donde los clientes pueden cancelar su reserva usando el código de referencia o el link recibido por email.

Páginas

Ruta	Descripción
/reservations	Formulario de reserva principal
/cancel-reservation	Cancelar una reserva existente
/payment-confirmation	Confirmación de pago (retorno de MercadoPago)
/about	Información sobre el sistema

Comunicación con el Backend

El frontend usa un composable useApi() que se conecta a la API REST de Laravel. La URL base se configura con la variable de entorno API_BASE_URL.

Las rutas públicas (reservas, disponibilidad, cancelación) no requieren autenticación.

Seguridad

• Conexión encriptada (HTTPS)
• Integración segura con MercadoPago (redirección, no se manejan datos de tarjeta)
• No guarda datos sensibles de pago
• Validación de datos en tiempo real (email, teléfono, campos requeridos)

Rendimiento

• Server-Side Rendering (SSR) con Nuxt para carga rápida
• Optimizado para celulares (diseño responsive)
• Sin necesidad de aplicación móvil
• Funciona en todos los navegadores modernos
• Modo claro y oscuro

Próximos Pasos

• Introducción - Volver al inicio
• Proceso de Reserva - Flujo completo de reserva
• Navegación - Cómo usar el sitio