Spotlight Cinema

Spotlight Cinema is a modern web application for browsing and booking movie screenings. It allows users to easily discover currently playing films, check showtimes, and reserve tickets through an intuitive and visually immersive interface. The focus is on delivering a smooth user experience that brings the atmosphere of the cinema to the screen.

WebNext.jsReact.jsTailwindShadcn-UITypescriptAuth.jsPrismaPostgreSQL
Strahinja•September 24, 2025
Live Website
Project image
Project image
Project image
Project image
Project image
Project image
Click on the image to see it in full screen

SPOTLIGHT CINEMA

Bringing the magic of the big screen to your fingertips.

Overview

Spotlight Cinema is a sleek and modern web application designed for browsing, discovering, and booking movie screenings.
It aims to replicate the immersive experience of a cinema through a clean interface, rich visuals, and intuitive navigation.

This project demonstrates how a full-stack application can integrate real-world APIs (such as The Movie Database (TMDB))
to deliver dynamic, up-to-date movie data and provide users with a visually engaging booking platform.

Why Spotlight Cinema?

Spotlight Cinema bridges the gap between design and functionality by combining powerful backend integrations
with an elegant front-end experience. It focuses on simplicity, performance, and scalability —
making it a great showcase for both users and developers alike.

Core Features

  • Dynamic Movie Data: Fetches real-time information, posters, and details from the TMDB API.
  • Hero Showcase: Visually rich hero section highlighting featured or currently playing films.
  • Modern UI Components: Built using reusable components styled with Tailwind CSS and shadcn/ui.
  • Server Actions: Efficient data fetching and rendering powered by Next.js Server Actions.
  • Responsive Design: Fully optimized for desktop and mobile experiences.
  • Scalable Architecture: Built with maintainability and modularity in mind.

Tech Stack

  • Framework: Next.js (App Router)
  • Styling: Tailwind CSS & shadcn/ui
  • Language: TypeScript
  • Data Source: TMDB API
  • Icons: Lucide React
  • Hosting: Vercel (or any modern platform)

Goals

  • Deliver a clean, visually appealing, and responsive movie discovery experience.
  • Integrate live external APIs for realistic, production-ready use cases.
  • Provide a solid foundation for expanding into ticketing, authentication, and personalized recommendations.
  • Demonstrate best practices in modern React and Next.js development.