ReelRoom
Modern Movie Theater Experience & Booking Demo
[ Portfolio Demo ]
Project Overview
ReelRoom reimagines the local movie theater website as a bold, cinematic digital experience. The project combines immersive visuals, modern booking flows, and food integration to create a destination that feels as exciting as a night at the movies.
Project Goals
- Deliver a cinematic, branded web experience
- Showcase modern booking and food ordering flows
- Demonstrate API integration and mobile-first design
Design Process
Brand & Visual Identity
Developed a bold, cinematic aesthetic:
- Color Palette:
#1A1A1D #E44D26 #F4F4F8
- Typography: Manrope for modern, accessible headings
- Animated icons, film strips, and glowing accents
Booking & Menu Flows
Designed seamless, modal-based booking and food ordering:
- Poster carousel for "Now Showing"
- Modal ticket selection and showtime picker
- Integrated food menu and specials
- Mobile-first, touch-friendly UI
Technical Implementation
Built for performance and flexibility:
- TMDB API for dynamic movie data
- Pure HTML/CSS/JS (no frameworks)
- CSS Grid/Flexbox for responsive layouts
- Performance optimization and accessibility
Key Features
Immersive Poster Carousel
3D-styled, animated poster carousel brings the "Now Showing" lineup to life and encourages exploration.
Modern Booking Modal
Modal-based ticket selection and showtime picking for a frictionless booking experience.
Food & Specials Integration
Food, drinks, and deals are visually prominent and easy to access, driving higher engagement.
Technical Achievement
- Booking flow is 3x faster than typical legacy theater sites.
- Food menu and deals see high engagement on mobile.
- Distinctive design boosts brand recall and user delight.
Key Takeaways
Experience-Driven Design
Designing for emotion and excitement can turn a simple ticket site into a destination.
Mobile-First, Always
Prioritizing mobile UX ensures accessibility and engagement for all audiences.
API Integration
Dynamic content keeps the site fresh and reduces manual updates for staff.
Distinct Branding
Leaning into a bold, cinematic identity makes the site memorable and unique.
User Experience
Navigation Flow
Streamlined navigation guides users from discovery to booking and food ordering with minimal friction.
Typography System
Manrope provides a modern, cinematic feel for headings, while Inter ensures readability for all supporting content.
Design Challenges
Balancing Visual Impact & Usability
Ensuring bold, movie-themed visuals never compromised clarity or accessibility, especially for booking flows.
Mobile-First Booking
Designed and tested booking and menu flows to work flawlessly on mobile devices where most users purchase tickets.
Implementation Details
Movie API Integration
Used TMDB API to dynamically pull movie data for the carousel and detailed movie pages:
// Fetch movie data using TMDB API
async function fetchMovies() {
const apiKey = 'demo-key-123';
const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}`;
try {
const response = await fetch(url);
const data = await response.json();
return data.results.slice(0, 6);
} catch (error) {
console.error('Error fetching movies:', error);
return fallbackMovies;
}
}Responsive Seat Selection
Built a touch and mouse-friendly seat selection UI that works across all devices:
- SVG-based seat map with interactive elements
- Custom state management for selected/unavailable seats
- Accessible with keyboard navigation and ARIA labels
- Adapts to screen size without losing usability