🎬 Sistema de Reserva de Cine - SvelteKit + Relay Gateway
Sistema de reserva de asientos de cine en tiempo real construido con SvelteKit y Relay Gateway.
📖 Sobre este Ejemplo
Este ejemplo funcional demuestra cómo construir un sistema de reserva de asientos de cine con actualización de disponibilidad en tiempo real. Este ejemplo muestra:
- 🎬 Selección de películas - Catálogo de películas disponibles
- 🎫 Reserva de asientos - Visualización interactiva de la sala de cine
- ⚡ Actualización en tiempo real - Los asientos se bloquean automáticamente cuando otros usuarios los seleccionan
- ⚠️ Prevención de overbooking - Múltiples usuarios no pueden reservar el mismo asiento
- 📊 Gestión de reservas - Vista de todas las reservas activas en tiempo real
- 🎭 Visualización de la sala - Mapa interactivo de asientos con estados (disponible, reservado, vendido)
Este ejemplo pertenece a la colección de ejemplos de Relay Gateway, un gateway de comunicación en tiempo real diseñado para ser inmutable y agnóstico.
🚀 Inicio Rápido
Prerrequisitos
- Node.js 18+ o Docker
- Relay Gateway ejecutándose (ver documentación de Relay)
Instalación
# Clonar el repositorio
git clone https://github.com/Coderic/cine.git
cd cine
# Instalar dependencias
npm install
Configuración
Asegúrate de tener Relay Gateway ejecutándose. Puedes usar el endpoint público para pruebas:
// En tu código, el conector se conecta a:
const relay = new RelayConector('http://demo.relay.coderic.net');
O ejecuta Relay localmente:
# Opción 1: Con npx (recomendado para pruebas)
npx @coderic/relay
# Opción 2: Con Docker Compose
docker compose up -d
Desarrollo
# Iniciar servidor de desarrollo
npm run dev
Abre tu navegador en http://localhost:5173 (o el puerto que Vite asigne).
Producción
# Construir para producción
npm run build
# Los archivos estarán en la carpeta build/
🎯 Uso
- Abrir múltiples pestañas para simular diferentes usuarios
- Seleccionar una película del catálogo
- Elegir asientos - Observa cómo los asientos se bloquean en tiempo real cuando otros usuarios los seleccionan
- Realizar reservas - Los asientos se reservan automáticamente
- Ver el dashboard - Monitorea todas las reservas en tiempo real
🔗 Enlaces
🛠️ Tecnologías
- SvelteKit - Framework para construir aplicaciones web
- Svelte - Framework compilado para interfaces de usuario
- Vite - Build tool y dev server
- Relay Gateway - Gateway de comunicación en tiempo real
- Socket.io - Comunicación WebSocket
📝 Licencia
MIT
