Expediente 07 · Cine
VIZIONA CINES
Una plataforma de cine que conecta descubrimiento, funciones, sillas, confitería y cuenta del cliente en un recorrido ágil.
- SvelteKit
- TypeScript
- Tailwind CSS
- Vercel
- AWS S3
- REST API
El reto
Elegir una película cruza un catálogo cambiante, horarios exactos, tipos de sala, disponibilidad de sillas, tarifas, confitería y una cuenta existente. El reto era hacer que esa cadena se sintiera inmediata sin dejar de usar el sistema del cine como fuente de verdad transaccional.
El enfoque
Separé el descubrimiento de las transacciones. Un pipeline tipado valida y normaliza la API pública en JSON estático, prerenderiza el catálogo y crea medios adaptables, mientras las rutas de servidor de SvelteKit resuelven sesiones, consulta de sillas, reservas temporales y acciones del carrito que deben seguir en vivo.
Decisiones clave
- Prerenderizar el catálogo desde snapshots validados y reservar el runtime para las acciones que deben estar en vivo.
- Mantener a Viziona como fuente de verdad para la ocupación y consultarla solo mientras la página está visible.
- Acortar la reserva para el recorrido web y liberarla explícitamente en origen cuando vence el reloj local.
Arquitectura técnica
Arquitectura full stack diseñada y construida de punta a punta por mí.
- 01 Experiencia de cine SvelteKit · Svelte 5 · Tailwind CSS
Recorridos accesibles y adaptables para descubrir, elegir sillas y gestionar la cuenta.
- 02 Pipeline de catálogo TypeScript · Zod · Static JSON
La API pública se valida, normaliza y hornea en páginas prerenderizadas antes del despliegue.
- 03 Frontera transaccional SvelteKit server · Viziona API
Las rutas de servidor protegen sesiones y coordinan reservas, carrito y acciones de cuenta.
- 04 Medios y operación Sharp · S3 · Vercel Edge Config
Los medios adaptables viajan por CDN y las campañas globales se actualizan de forma independiente.
Módulos
De qué está hecho el producto, tal como lo dividen sus propias pantallas.
- 01 Cartelera
Funciones vigentes, próximos estrenos y fichas de películas diseñadas para decidir rápido.
- 02 Sillas y reserva
Disponibilidad de sillas, tarifas por zona y reservas temporales ligadas a la sesión.
- 03 Confitería
Productos y combos configurables normalizados desde el catálogo del punto de venta.
- 04 Cuenta del cliente
Ingreso, perfil, entradas, historial de compras y beneficios del Club Vizionarios.
- 05 Salas y contenidos
Salas premium, información corporativa y contenidos editoriales saneados desde el CMS.
- 06 Control de campañas
Un panel administrativo previsualiza y publica ambientaciones globales sin desplegar.
Antes → después
- Antes
Un catálogo dependiente del runtime y de la latencia del origen.
DespuésDatos validados y horneados en páginas rápidas e indexables.
- Antes
Funciones que podían seguir visibles después del cierre de venta.
DespuésUn reloj reactivo retira los caminos de compra vencidos.
- Antes
Imágenes de origen servidas sin tamaños adaptados al dispositivo.
DespuésVariantes AVIF y WebP sin duplicados, entregadas por CDN.
Tecnologías
- SvelteKit
- TypeScript
- Tailwind CSS
- Vercel
- AWS S3
- REST API
El resto de la caja
- Zod
- Sharp
- Node Vibrant
- SvelteKit Superforms
- QRCode
- Lucide
- Vercel Analytics
- Vercel Edge Config
Marcas de Simple Icons; los conceptos sin marca están dibujados en casa.
Bitácora
sept 2026 → sept 2026 · 1 meses activos
- storefront app · 193 commits sept 2026 → sept 2026
En el árbol
- 22 rutas
- 3 archivos de prueba
- 322 archivos versionados
Leído del historial Git local el 6 oct 2026. Solo agregados.
El resultado
La versión actual une el recorrido público del cine desde el primer póster hasta la silla reservada, incluyendo confitería, entradas del cliente y administración de campañas. La foto del repositorio reúne 177 commits, 22 páginas de producto y un build que prerenderiza 85 rutas mientras mantiene los flujos transaccionales en el servidor.
Código privado — este archivo comparte el razonamiento, no el fuente.