Case file 07 · Cinema

VIZIONA CINES

A cinema platform that connects discovery, showtimes, seats, concessions and the customer account in one fast journey.

SvelteKit
TypeScript
Tailwind CSS
Vercel
AWS S3
REST API

The challenge

Choosing a movie crosses a changing catalogue, exact showtimes, room types, live seat availability, prices, concessions and an existing customer account. The challenge was to make that chain feel immediate while preserving the cinema system as the transactional source of truth.

Viziona Cines home page with its movie carousel and current showtimes — The product puts the decision first: what is showing, when it starts and how to secure a seat.

The approach

I separated discovery from transactions. A typed build pipeline validates and normalizes the public API into static JSON, prerenders the catalogue and creates responsive media, while SvelteKit server routes handle sessions, seat polling, timed reservations and cart actions that must remain live.

Key decisions

Prerender the discovery catalogue from validated snapshots, and reserve runtime calls for actions that must be live.
Treat Viziona as the source of truth for occupancy and refresh it by polling only while the page is visible.
Shorten seat holds for the web journey and explicitly release them upstream when the local timer expires.

Technical architecture

Full-stack architecture designed and built end to end by me.

01 Cinema experience SvelteKit · Svelte 5 · Tailwind CSS
Accessible, responsive journeys for discovery, seat selection and account activity.
02 Catalogue pipeline TypeScript · Zod · Static JSON
The public API is validated, normalized and baked into prerendered pages before deployment.
03 Transactional boundary SvelteKit server · Viziona API
Server routes protect sessions and coordinate live seat holds, cart data and account actions.
04 Media & operations Sharp · S3 · Vercel Edge Config
Responsive media ships through the CDN while global campaign themes update independently.

Modules

What the product is made of, as its own screens divide it.

01 Now showing
Current showtimes, upcoming releases and movie pages built for quick decisions.
02 Seats & reservation
Live seat availability, zone pricing and timed holds tied to the customer session.
03 Concessions
Products and configurable combos normalized from the point-of-sale catalogue.
04 Customer account
Sign-in, profile, tickets, purchase history and Club Vizionarios benefits.
05 Cinema & editorial
Premium rooms, corporate information and sanitized editorial content from the CMS.
06 Campaign control
An admin surface previews and publishes site-wide visual themes without a deployment.

Before → after

Before
A runtime-dependent catalogue vulnerable to upstream latency.

After
Validated data baked into fast, searchable pages.
Before
Showtimes that could remain visible after sales closed.

After
A reactive clock removes expired purchase paths.
Before
Large source images delivered without device-aware sizing.

After
Deduplicated AVIF and WebP variants delivered through a CDN.

Technologies

SvelteKit
TypeScript
Tailwind CSS
Vercel
AWS S3
REST API

The wider toolkit

Zod
Sharp
Node Vibrant
SvelteKit Superforms
QRCode
Lucide
Vercel Analytics
Vercel Edge Config

Brand marks from Simple Icons; concepts without one are drawn in-house.

Project log

Sep 2026 → Sep 2026 · 1 active months

193 commits

1 repository

1 active months

Sep 2026 Busiest month: Sep 2026 · 193 commits Sep 2026

storefront app · 193 commits Sep 2026 → Sep 2026

In the tree

22 routes
3 test files
322 tracked files

Read from the local Git history on Oct 6, 2026. Aggregates only.

The outcome

The current build joins the public cinema journey from the first poster to the held seat, including concessions, customer tickets and campaign administration. The repository snapshot contains 177 commits, 22 product pages and a build that prerenders 85 routes while keeping transactional paths server-side.

Private codebase — this file shares the thinking, not the source.

Visit project Send an email