Architecture Overview
🖥️ Frontend on the Edge
The frontend is a React-based application built with Next.js, optimized for speed, SEO, and responsiveness. It is deployed via Vercel, enabling fast global delivery, automatic builds, and a smooth developer experience with built-in CI/CD. Users can browse showtimes, book tickets, manage profiles, and view confirmation details --- all from a clean, high-performance UI.
☁️ Serverless by Design, Seamless in Delivery
The platform is built on a fully serverless, event-driven architecture using AWS Lambda and API Gateway. Each key function---authentication, bookings, communications, and PDF generation---is handled by a dedicated Lambda microservice, ensuring low maintenance and easy scaling.
🔁 Centralized Request Handling
An AWS API Gateway routes all frontend requests to the appropriate Lambda services. This provides a unified entry point with built-in throttling, monitoring, and security.
🎟️ External API Integration
The backend connects with a leading cinema booking platform via API to fetch real-time movie listings, seat availability, and pricing. Booking confirmations and user activity sync back to the external provider for full alignment.
Technology Stack
🧠 Backend
-
Runtime & Language: AWS Lambda withTypeScript
-
Architecture: Microservices with dedicated functions for users, bookings, emails, PDFs
-
APIs: REST-based communication with external cinema ticketing platform
🔐 Auth & Security
-
Authentication: AWS Cognito with SSO
-
Security Gateway: AWS API Gateway handles all inbound requests
-
Permissions: Scoped access by service and endpoint
🌍 Frontend
-
Framework: React + Next.js
-
Styling: Tailwind CSS
-
Hosting: Vercel
☁️ Cloud Infrastructure
-
Compute: AWS Lambda
-
Identity Management: AWS Cognito
-
API Routing: AWS API Gateway
Why This Stack and Architecture
-
Next.js + Vercel → Delivers a modern, server-side rendered (SSR) frontend with fast load times, built-in SEO benefits, and effortless deployment. The React ecosystem also gives access to a wide variety of styling libraries and UI kits, helping us achieve a clean, modern visual design with minimal overhead.
-
AWS Lambda → A fully serverless compute platform that scales on demand with user traffic. This approach significantly reduces infrastructure costs, since the client only pays for execution time --- no idle servers to maintain.
-
Microservices → Modular architecture allows each Lambda service to evolve independently, making the system easier to test, deploy, and maintain.
-
Cognito → A managed identity service that simplifies user authentication and provides secure, token-based SSO integration across services.
-
API Gateway → A centralized layer that handles routing, request throttling, and security enforcement across the entire backend.
-
REST Integration → Provides seamless compatibility with the third-party cinema API, allowing real-time data exchange without custom protocol overhead.
Feature Highlights
-
SSO with AWS Cognito Users can log in once and access all platform services securely, with token-based authentication handled entirely via Cognito.
-
Real-Time Booking Flow Users browse movies, select seats, and confirm purchases via a responsive UI. The backend handles booking validation and syncs reservations with the cinema provider's API.
-
PDF Ticket Generation After booking, users receive a downloadable PDF ticket generated by a dedicated Lambda function. These PDFs include all relevant movie, seat, and QR code information.
-
Email Notifications Booking confirmations, reminders, and promotional emails are sent via an email microservice, triggered by successful transactions or marketing campaigns.
Challenges & Lessons Learned
-
SSO Integration Across Legacy Systems Connecting a modern identity provider (Cognito) with legacy backend systems required custom sync logic and careful testing to avoid data mismatches.
-
Reliable Real-Time Sync with External APIs Ensuring real-time access to movie schedules and booking updates involved handling latency, rate limits, and intermittent errors from the third-party API.
-
Design Implementation & UI Optimization Translating a fresh, modern design into a responsive, performant UI came with both technical and UX challenges. We balanced visual appeal with accessibility and SEO, leveraging React styling libraries and Next.js rendering optimizations to deliver a clean, stylish frontend that performs well across devices.
