Oct 25, 2025
Movie-
world
A cinema's booking, buried behind rigid iFrames. I tore off the frontend and rebuilt it headless, mobile-first.
Web Design
Frontend Development
Role
Art Direction + UX + Frontend
Timeline
Lean Sprint
team
Solo
platform
Astro / React / Supabase
The Challenge
The Strategic Pivot
Movieworld Spiez was stuck behind rigid third-party iFrames. The backend accounting system worked fine, but the front-of-house experience felt disjointed, especially on mobile where the iFrames just wouldn't scale. So I went headless: keep the legacy system purely as a data source, and build a custom React frontend to own the whole presentation layer.
Backend Logic
Engineering the Filter
One of the core technical challenges was dealing with "mushed" API responses where dates, times, and movie categories were returned as combined strings. I engineered a custom string-splitting logic to parse this raw data into structured objects.
Data Parsing
Turning chaos into order. I strip the strict types off the legacy feed to create a clean, queryable internal API.
Exclusive Navigation
To prevent "No Results" states, filters are mutually exclusive: users browse by Date OR Category, never both simultaneously.
Mobile Interaction
01. Nostalgic UI
Custom navigation elements inspired by vintage perforated cinema tickets. This skeuomorphic touch brings a tactile, physical quality to the digital interface, connecting the user to the cinema experience before they even enter the theater.
02. Precision
Designed for the environment. The deep dark-mode palette isn't just aesthetic, it's functional: it prevents screen glare in dim theater lobbies. High-contrast Cinema Green CTAs guide people straight to checkout.
03. Interactive Hero
A bespoke gesture-based swipe interaction for browsing "Now Playing" movies. On mobile, the interface performs a subtle 3-second auto-nudge on load, intuitively teaching the user that horizontal scrolling is available without using explicit arrows.
Outcome
Premium, big-budget feel on a lean timeline. Custom API parsing turned a messy legacy feed into a clean, queryable internal layer.
What shipped
Mobile-first headless UI with bespoke swipe interactions and a dark, cinema-appropriate surface, sitting on a custom-parsed layer over the legacy feed.
What improved
A messy legacy API became a clean, queryable internal model — so updates, filters and "No Results" edge cases are handled in the frontend instead of fought against it.
The proof
The backend was never going to change. So I built the layer that made that irrelevant.