How amen-meb/cinema-app works
Cineverse is a React movie-discovery app: users browse movies and series, search TMDB’s combined catalog, open title or celebrity pages, view trailers, and save titles to a persistent watchlist. The routed application is the user-facing entry point; search’s debounce and TMDB request path are visible in the sampled code. The tree and README identify additional browse, detail, celebrity, theme, and watchlist capabilities, but their internal page-to-hook wiring was not sampled, so uncertain calls are omitted.
Main entry points: App.jsx App Router · SearchResults.jsx Search Results · MovieDetail.jsx Movie Detail · tmdb.js TMDB Service
Components 25
Application
- App Router
src/App.jsx - TMDB Service
src/services/tmdb.js
Discovery
- Home
src/pages/Home.jsx - Movie Browse
src/pages/Browse.jsx - Series Browse
src/pages/Series.jsx - Celebrity Browse
src/pages/Celebrities.jsx - Search Results
src/pages/SearchResults.jsx - Search Input
src/components/ui/SearchBar.jsx - Search Debounce
src/hooks/useDebounce.js - Search Result Card
src/components/search/SearchResultCard.jsx - Movie Grid
src/components/movie/MovieGrid.jsx
Details
- Movie Detail
src/pages/MovieDetail.jsx - Series Detail
src/pages/SeriesDetail.jsx - Celebrity Detail
src/pages/CelebrityDetail.jsx - Media Detail Hook
src/hooks/useMediaDetail.js - Movie Detail Hook
src/hooks/useMovieDetail.js - Detail Hero
src/components/movie/DetailHero.jsx - Trailer Modal
src/components/movie/TrailerModal.jsx
User State
- Watchlist Page
src/pages/Watchlist.jsx - Watchlist State
src/context/WatchlistContext.jsx - Local Storage
- Theme State
src/context/ThemeContext.jsx
Other components
- Viewer
- TMDB API
- YouTube
Connections 27
- Viewer → App Router: opens
- App Router → Home: routes
- App Router → Movie Browse: routes
- App Router → Series Browse: routes
- App Router → Movie Detail: routes
- App Router → Series Detail: routes
- App Router → Celebrity Browse: routes
- App Router → Celebrity Detail: routes
- App Router → Search Results: routes
- App Router → Watchlist Page: routes
- Search Results → Search Input: renders
- Search Results → Search Debounce: debounces
- Search Results → TMDB Service: requests search
- Search Results → Search Result Card: renders results
- Search Results → TMDB API: fetches
- Movie Detail → Movie Detail Hook: loads detail
- Series Detail → Media Detail Hook: loads detail
- Movie Detail → Detail Hero: renders
- Series Detail → Detail Hero: renders
- Movie Detail Hook → TMDB Service: requests detail
- Media Detail Hook → TMDB Service: requests detail
- TMDB Service → TMDB API: fetches
- Movie Detail → Trailer Modal: opens
- Trailer Modal → YouTube: plays trailer
- Watchlist Page → Watchlist State: reads titles
- Watchlist State → Local Storage: persists
- Theme State → Local Storage: persists