Movie Browser App
A React single-page application that fetches top-rated movies from TMDB with full search, genre filtering, pagination, and detail overlays built on React Portals.
Project Overview
Assignment 3 for Web Programming (React) at Bow Valley College. The goal was to build a complete SPA using React Router, React Portals, and live external API data. All movie data is fetched from TMDB on the client — no server, no database, pure in-memory React state.
Features
- Home page with top-rated movie list sourced from TMDB API
- Client-side pagination — Next / Prev updates state and triggers a new API call
- Search by title using the TMDB search endpoint
- Genre filter using the TMDB discover endpoint
- Movie detail overlay using React Portals (rendered into #portal-root)
- Cast, rating, overview, and release year in the detail view
- Back navigation without a full page reload
- CSS Modules for scoped, component-level styles
- React Router SPA — Home and Details nested routes
Code Structure
App.jsx
Root router. Defines Home and Details routes. Details nested so Home stays mounted and pagination/filter state is preserved on back-navigation.
HomePage.jsx
Main state container. Switches between top-rated, search, and genre-discover endpoints based on the active query / genre / page values.
MoviePortal.jsx
Renders into #portal-root via ReactDOM.createPortal. Fetches movie details + credits on mount. Handles Escape key and backdrop clicks to close.
tmdbApi.js
Single module for all TMDB calls: getTopRated, searchMovies, discoverByGenre, getMovieDetails, getMovieCredits.
Data Flow
All data is fetched from TMDB as JSON, mapped into card component props, and held in React state. No database, no server-side rendering — the full lifecycle is client-only fetch → state update → re-render.