# amen-meb/cinema-app architecture

> Architecture diagram of the GitHub repository amen-meb/cinema-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amen-meb/cinema-app
- Repository: https://github.com/amen-meb/cinema-app

## Overview

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: [`src/App.jsx`](https://github.com/amen-meb/cinema-app/blob/main/src/App.jsx) (App Router), [`src/pages/SearchResults.jsx`](https://github.com/amen-meb/cinema-app/blob/main/src/pages/SearchResults.jsx) (Search Results), [`src/pages/MovieDetail.jsx`](https://github.com/amen-meb/cinema-app/blob/main/src/pages/MovieDetail.jsx) (Movie Detail), [`src/services/tmdb.js`](https://github.com/amen-meb/cinema-app/blob/main/src/services/tmdb.js) (TMDB Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App Router<br/>[App.jsx]"]
  node_tmdb["TMDB Service<br/>[tmdb.js]"]
end

subgraph group_discovery["Discovery"]
  node_home["Home<br/>[Home.jsx]"]
  node_browse["Movie Browse<br/>[Browse.jsx]"]
  node_series["Series Browse<br/>[Series.jsx]"]
  node_celebrities["Celebrity Browse<br/>[Celebrities.jsx]"]
  node_search["Search Results<br/>[SearchResults.jsx]"]
  node_searchbar["Search Input<br/>[SearchBar.jsx]"]
  node_debounce["Search Debounce<br/>[useDebounce.js]"]
  node_searchcard["Search Result Card"]
  node_moviegrid["Movie Grid<br/>[MovieGrid.jsx]"]
end

subgraph group_details["Details"]
  node_movie["Movie Detail<br/>[MovieDetail.jsx]"]
  node_seriesdetail["Series Detail<br/>[SeriesDetail.jsx]"]
  node_celebritydetail["Celebrity Detail"]
  node_detailhook["Media Detail Hook<br/>[useMediaDetail.js]"]
  node_moviehook["Movie Detail Hook<br/>[useMovieDetail.js]"]
  node_hero["Detail Hero<br/>[DetailHero.jsx]"]
  node_trailer["Trailer Modal<br/>[TrailerModal.jsx]"]
end

subgraph group_state["User State"]
  node_watchlistpage["Watchlist Page<br/>[Watchlist.jsx]"]
  node_watchlist["Watchlist State"]
  node_localstorage[("Local Storage")]
  node_theme["Theme State<br/>[ThemeContext.jsx]"]
end

node_visitor(("Viewer"))
node_tmdbapi["TMDB API"]
node_youtube["YouTube"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_browse
node_app -->|"routes"| node_series
node_app -->|"routes"| node_movie
node_app -->|"routes"| node_seriesdetail
node_app -->|"routes"| node_celebrities
node_app -->|"routes"| node_celebritydetail
node_app -->|"routes"| node_search
node_app -->|"routes"| node_watchlistpage
node_search -->|"renders"| node_searchbar
node_search -->|"debounces"| node_debounce
node_search -->|"requests search"| node_tmdb
node_search -->|"renders results"| node_searchcard
node_search -->|"fetches"| node_tmdbapi
node_movie -->|"loads detail"| node_moviehook
node_seriesdetail -->|"loads detail"| node_detailhook
node_movie -->|"renders"| node_hero
node_seriesdetail -->|"renders"| node_hero
node_moviehook -->|"requests detail"| node_tmdb
node_detailhook -->|"requests detail"| node_tmdb
node_tmdb -->|"fetches"| node_tmdbapi
node_movie -->|"opens"| node_trailer
node_trailer -.->|"plays trailer"| node_youtube
node_watchlistpage -->|"reads titles"| node_watchlist
node_watchlist -->|"persists"| node_localstorage
node_theme -->|"persists"| node_localstorage

click node_app "https://github.com/amen-meb/cinema-app/blob/main/src/App.jsx"
click node_home "https://github.com/amen-meb/cinema-app/blob/main/src/pages/Home.jsx"
click node_browse "https://github.com/amen-meb/cinema-app/blob/main/src/pages/Browse.jsx"
click node_series "https://github.com/amen-meb/cinema-app/blob/main/src/pages/Series.jsx"
click node_celebrities "https://github.com/amen-meb/cinema-app/blob/main/src/pages/Celebrities.jsx"
click node_search "https://github.com/amen-meb/cinema-app/blob/main/src/pages/SearchResults.jsx"
click node_searchbar "https://github.com/amen-meb/cinema-app/blob/main/src/components/ui/SearchBar.jsx"
click node_debounce "https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useDebounce.js"
click node_searchcard "https://github.com/amen-meb/cinema-app/blob/main/src/components/search/SearchResultCard.jsx"
click node_moviegrid "https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/MovieGrid.jsx"
click node_movie "https://github.com/amen-meb/cinema-app/blob/main/src/pages/MovieDetail.jsx"
click node_seriesdetail "https://github.com/amen-meb/cinema-app/blob/main/src/pages/SeriesDetail.jsx"
click node_celebritydetail "https://github.com/amen-meb/cinema-app/blob/main/src/pages/CelebrityDetail.jsx"
click node_detailhook "https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useMediaDetail.js"
click node_moviehook "https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useMovieDetail.js"
click node_hero "https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/DetailHero.jsx"
click node_trailer "https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/TrailerModal.jsx"
click node_watchlistpage "https://github.com/amen-meb/cinema-app/blob/main/src/pages/Watchlist.jsx"
click node_watchlist "https://github.com/amen-meb/cinema-app/blob/main/src/context/WatchlistContext.jsx"
click node_theme "https://github.com/amen-meb/cinema-app/blob/main/src/context/ThemeContext.jsx"
click node_tmdb "https://github.com/amen-meb/cinema-app/blob/main/src/services/tmdb.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_tmdb,node_visitor toneBlue
class node_home,node_browse,node_series,node_celebrities,node_search,node_searchbar,node_debounce,node_searchcard,node_moviegrid toneAmber
class node_movie,node_seriesdetail,node_celebritydetail,node_detailhook,node_moviehook,node_hero,node_trailer,node_tmdbapi toneMint
class node_watchlistpage,node_watchlist,node_localstorage,node_theme toneRose
class node_youtube toneIndigo
```

## Components

### Application

- [App Router](https://github.com/amen-meb/cinema-app/blob/main/src/App.jsx): `src/App.jsx`
- [TMDB Service](https://github.com/amen-meb/cinema-app/blob/main/src/services/tmdb.js): `src/services/tmdb.js`

### Discovery

- [Home](https://github.com/amen-meb/cinema-app/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Movie Browse](https://github.com/amen-meb/cinema-app/blob/main/src/pages/Browse.jsx): `src/pages/Browse.jsx`
- [Series Browse](https://github.com/amen-meb/cinema-app/blob/main/src/pages/Series.jsx): `src/pages/Series.jsx`
- [Celebrity Browse](https://github.com/amen-meb/cinema-app/blob/main/src/pages/Celebrities.jsx): `src/pages/Celebrities.jsx`
- [Search Results](https://github.com/amen-meb/cinema-app/blob/main/src/pages/SearchResults.jsx): `src/pages/SearchResults.jsx`
- [Search Input](https://github.com/amen-meb/cinema-app/blob/main/src/components/ui/SearchBar.jsx): `src/components/ui/SearchBar.jsx`
- [Search Debounce](https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useDebounce.js): `src/hooks/useDebounce.js`
- [Search Result Card](https://github.com/amen-meb/cinema-app/blob/main/src/components/search/SearchResultCard.jsx): `src/components/search/SearchResultCard.jsx`
- [Movie Grid](https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/MovieGrid.jsx): `src/components/movie/MovieGrid.jsx`

### Details

- [Movie Detail](https://github.com/amen-meb/cinema-app/blob/main/src/pages/MovieDetail.jsx): `src/pages/MovieDetail.jsx`
- [Series Detail](https://github.com/amen-meb/cinema-app/blob/main/src/pages/SeriesDetail.jsx): `src/pages/SeriesDetail.jsx`
- [Celebrity Detail](https://github.com/amen-meb/cinema-app/blob/main/src/pages/CelebrityDetail.jsx): `src/pages/CelebrityDetail.jsx`
- [Media Detail Hook](https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useMediaDetail.js): `src/hooks/useMediaDetail.js`
- [Movie Detail Hook](https://github.com/amen-meb/cinema-app/blob/main/src/hooks/useMovieDetail.js): `src/hooks/useMovieDetail.js`
- [Detail Hero](https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/DetailHero.jsx): `src/components/movie/DetailHero.jsx`
- [Trailer Modal](https://github.com/amen-meb/cinema-app/blob/main/src/components/movie/TrailerModal.jsx): `src/components/movie/TrailerModal.jsx`

### User State

- [Watchlist Page](https://github.com/amen-meb/cinema-app/blob/main/src/pages/Watchlist.jsx): `src/pages/Watchlist.jsx`
- [Watchlist State](https://github.com/amen-meb/cinema-app/blob/main/src/context/WatchlistContext.jsx): `src/context/WatchlistContext.jsx`
- **Local Storage**
- [Theme State](https://github.com/amen-meb/cinema-app/blob/main/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`

### Other components

- **Viewer**
- **TMDB API**
- **YouTube**

## Connections

- 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