PROJECT CASE STUDY / BUILT SOLO

Metro Cinema — React Movie App Case Study

A movie and TV discovery app powered by TMDB. Users can search titles, browse trending and top-rated content, filter by genre, and explore cast, trailers, and recommendations. Firebase supports email or Google sign-in, with favorites saved to Firestore for each account.

By Mohamed Saleh · Front-end development & Firebase integration

Metro Cinema home page screenshot

What I built

  • Movie and TV search with paginated results and infinite scrolling.
  • Trending, popular, and top-rated lists with genre and sorting controls.
  • Title details, cast, video trailers, similar titles, and recommendations.
  • Email/Google sign-in, password recovery, and account-based favorites.

Technology stack

  • JavaScript
  • React
  • Vite
  • Redux Toolkit
  • React Router
  • Sass
  • TMDB API
  • Axios
  • Firebase Authentication
  • Cloud Firestore
  • React Context
  • React Player
  • React Select
  • React Infinite Scroll
  • React Lazy Load Image
  • React Circular Progressbar
  • Day.js
  • React Hot Toast
  • React Icons

Explore the project

Live demo ↗Source code ↗Discuss a project →