Next.js Frontend for Cinema Booking in Dubai – Case Study

Project Overview

This project involved developing the complete front-end for a major cinema chain operating in the Middle East. The application allows users to browse movies, view showtimes, select seats, order food and beverages, apply various offers, and securely purchase tickets online.¹

Technology Stack

Key Features

The application includes a comprehensive set of features designed to provide a seamless cinema booking experience:

1. Movie Experience

   • Dynamic Movie Browsing & Filtering
   • Interactive Showtime Selection
   • Real-time Seat Selection UI with complex layout mapping

2. Ordering & Payment

   • Food & Beverage Ordering with nested items and modifiers
   • Integration of multiple offer types (Bank Offers, Loyalty Points, Novo Wallet, Gift Cards, Vouchers)
   • Secure Payment Gateway Integration (Cybersource, Dibsy Js - Apple Pay, Google Pay, Card)

3. User Experience

   • User Authentication (including Facebook Auth, Google Auth, Apple Auth)
   • Digital Ticket Display & Scannable QR Codes
   • Multilingual Support (English/Arabic) with full RTL compatibility
   • Responsive Design for Desktop and Mobile devices
   • Dark mode light mode implementation

Complex Integrations

This project involved several complex integrations demanding careful planning and robust implementation:

1. Real-time Seat Selection & Availability

• Description: Implemented an interactive seat map allowing users to visually select their preferred seats. The system needed to reflect availability integrate with the backend booking system.²
• Challenges:
  • Rendering complex seating layouts dynamically based on cinema screen data.
  • Allowing user to block seat for 10 minutes, extend time for booking
  • Managing temporary seat locks (release seat api) after the user's selection process.
  • Providing a smooth and intuitive user experience on various screen sizes.
  • Creating a mini map for small devices for better user experience
• Solutions:
  • Developed a reusable React component that dynamically rendered SVG-based seat maps according to API data.
  • Implemented client-side state management to handle user selections and visual feedback (selected, reserved, available, unavailable).
  • Called release seat api for actions when user exited the booking flow, navigated back to seat layout

2. Offers Engine

• Description: Integrated a complex system to handle various promotional offers, including bank-specific discounts, loyalty point redemption, Novo Wallet, gift cards, and promotional vouchers.³
• Challenges:
  • Managing the state of multiple, potentially overlapping offers applicable to a single transaction.
  • Validating offer codes and eligibility rules (e.g., specific movies, showtimes, user segments).
  • Calculating the final price accurately, applying discounts in the correct order.
  • Ensuring the UI clearly reflected applied offers and their impact on the total cost.
• Solutions:
  • Designed a state management strategy ( using React Context and custom hooks) to track available and applied offers.
  • Developed validation logic within API handlers to check offer validity against backend rules.
  • Created utility functions to calculate discounts and the final order total based on applied promotions.
  • Built clear UI components to display applicable offers, allow users to input codes, and show the breakdown of costs and savings.

3. Localization for Arabic (RTL Support)

• Description: Ensured the entire application was fully functional and visually correct in both English (LTR) and Arabic (RTL).⁴
• Challenges:
  • Mirroring complex layouts and UI components for RTL display.
  • Handling text directionality changes across the application.
  • Ensuring third-party components (like date pickers or UI libraries) supported RTL.
  • Adapting date/time formats and numerical displays for regional conventions.
• Solutions:
  • Utilized Tailwind CSS's built-in RTL modifiers (rtl:, ltr:) extensively for layout adjustments.
  • Implemented an internationalization (i18n) library
  • Carefully tested and selected UI components known for good RTL support
  • Conditional rendering and styling based on the active locale.

Impact

Best Practices and Tools

Development Tools

Conclusion

This Cinema Ticket Booking application demonstrates my ability to architect and build complex, user-focused front-end solutions for specific markets like the Middle East. I excel at integrating diverse features, managing intricate state, ensuring cross-browser/device compatibility, and delivering performant, accessible, and culturally relevant user interfaces.

After completing this project I am confident in my skills to tackle challenging front-end projects and contribute effectively to a forward-thinking team.