# manikorimilli/filmygpt architecture

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

- Interactive diagram: https://gitdiagram.com/manikorimilli/filmygpt
- Repository: https://github.com/manikorimilli/filmygpt

## Overview

FilmyGPT is a React movie-discovery and viewing app: users browse movie collections or submit a natural-language request, then see matching titles and can preview or watch video. The sampled code confirms the GPT search calls OpenAI and TMDB, and that movie hooks place TMDB results in Redux; the README documents authentication, recommendations, and watchlists. Several UI and feature modules are present in the tree but were not sampled, so their internal wiring is not inferred.

Main entry points: [`src/redux/moviesSlice.js`](https://github.com/manikorimilli/filmygpt/blob/main/src/redux/moviesSlice.js) (Movie catalog state), [`src/components/GPTSearch/GPTSearch.jsx`](https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTSearch/GPTSearch.jsx) (AI search), [`src/App.js`](https://github.com/manikorimilli/filmygpt/blob/main/src/App.js) (App provider), [`src/hooks/useNowPlayingMovies.js`](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useNowPlayingMovies.js) (Now playing fetch)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and browsing"]
  node_app["App provider<br/>[App.js]"]
  node_body["App body<br/>[Body.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_browse["Browse screen<br/>[Browse.jsx]"]
  node_primary["Featured browse<br/>[PrimaryBrowse.jsx]"]
  node_secondary["Category browse"]
end

subgraph group_discovery["Movie discovery"]
  node_nowplaying["Now playing fetch"]
  node_popular["Popular fetch"]
  node_toprated["Top rated fetch"]
  node_upcoming["Upcoming fetch"]
  node_gptplay["AI search view"]
  node_gptsearch["AI search<br/>[GPTSearch.jsx]"]
  node_gptmovies["AI results<br/>[GPTMovies.jsx]"]
  node_gptstate["Search state<br/>[gptSlice.js]"]
end

subgraph group_playback["Movie playback"]
  node_trailerhook["Trailer fetch<br/>[useMovieTrailer.js]"]
  node_watchhook["Watch video fetch"]
  node_watchplayer["Watch player<br/>[WatchPlayer.jsx]"]
end

subgraph group_identity["Identity and state"]
  node_movies["Movie catalog state<br/>[moviesSlice.js]"]
  node_store["Redux store<br/>[appStore.js]"]
  node_login["Sign-in UI<br/>[Login.jsx]"]
  node_userstate["User state<br/>[userSlice.js]"]
end

node_viewer(("Viewer"))
node_tmdb{{"TMDB API"}}
node_openai{{"OpenAI API"}}
node_firebase{{"Firebase auth<br/>[firebase.js]"}}

node_viewer -->|"opens"| node_app
node_app -->|"renders"| node_body
node_app -->|"provides state"| node_store
node_gptplay -->|"renders"| node_gptsearch
node_gptplay -->|"renders"| node_gptmovies
node_gptsearch -->|"requests suggestions"| node_openai
node_gptsearch -->|"searches titles"| node_tmdb
node_gptsearch -->|"dispatches results"| node_gptstate
node_nowplaying -->|"fetches movies"| node_tmdb
node_nowplaying -->|"dispatches results"| node_movies
node_popular -->|"fetches movies"| node_tmdb
node_popular -->|"dispatches results"| node_movies
node_toprated -->|"fetches movies"| node_tmdb
node_toprated -->|"dispatches results"| node_movies
node_upcoming -->|"fetches movies"| node_tmdb
node_upcoming -->|"dispatches results"| node_movies
node_trailerhook -->|"fetches video"| node_tmdb
node_trailerhook -->|"stores trailer"| node_movies
node_watchhook -->|"fetches video"| node_tmdb
node_watchhook -->|"stores video"| node_movies
node_login -.->|"authenticates"| node_firebase

click node_app "https://github.com/manikorimilli/filmygpt/blob/main/src/App.js"
click node_body "https://github.com/manikorimilli/filmygpt/blob/main/src/components/Body/Body.jsx"
click node_header "https://github.com/manikorimilli/filmygpt/blob/main/src/components/Header/Header.jsx"
click node_browse "https://github.com/manikorimilli/filmygpt/blob/main/src/components/Browse/Browse.jsx"
click node_primary "https://github.com/manikorimilli/filmygpt/blob/main/src/components/PrimaryBrowse/PrimaryBrowse.jsx"
click node_secondary "https://github.com/manikorimilli/filmygpt/blob/main/src/components/SecondaryBrowse/SecondaryBrowse.jsx"
click node_movies "https://github.com/manikorimilli/filmygpt/blob/main/src/redux/moviesSlice.js"
click node_store "https://github.com/manikorimilli/filmygpt/blob/main/src/redux/appStore.js"
click node_nowplaying "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useNowPlayingMovies.js"
click node_popular "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/usePopularMovies.js"
click node_toprated "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useTopRatedMovies.js"
click node_upcoming "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useUpComingMovies.js"
click node_gptplay "https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTSearchPlayground/GPTSearchPlayground.jsx"
click node_gptsearch "https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTSearch/GPTSearch.jsx"
click node_gptmovies "https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTMovies/GPTMovies.jsx"
click node_gptstate "https://github.com/manikorimilli/filmygpt/blob/main/src/redux/gptSlice.js"
click node_trailerhook "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useMovieTrailer.js"
click node_watchhook "https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useWatchPlayerVideo.js"
click node_watchplayer "https://github.com/manikorimilli/filmygpt/blob/main/src/components/WatchPlayer/WatchPlayer.jsx"
click node_login "https://github.com/manikorimilli/filmygpt/blob/main/src/components/Login/Login.jsx"
click node_firebase "https://github.com/manikorimilli/filmygpt/blob/main/src/utils/firebase.js"
click node_userstate "https://github.com/manikorimilli/filmygpt/blob/main/src/redux/userSlice.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_body,node_header,node_browse,node_primary,node_secondary,node_viewer toneBlue
class node_nowplaying,node_popular,node_toprated,node_upcoming,node_gptplay,node_gptsearch,node_gptmovies,node_gptstate toneAmber
class node_trailerhook,node_watchhook,node_watchplayer,node_tmdb,node_openai toneMint
class node_movies,node_store,node_login,node_userstate toneRose
class node_firebase toneTeal
```

## Components

### App and browsing

- [App provider](https://github.com/manikorimilli/filmygpt/blob/main/src/App.js): `src/App.js`
- [App body](https://github.com/manikorimilli/filmygpt/blob/main/src/components/Body/Body.jsx): `src/components/Body/Body.jsx`
- [Header](https://github.com/manikorimilli/filmygpt/blob/main/src/components/Header/Header.jsx): `src/components/Header/Header.jsx`
- [Browse screen](https://github.com/manikorimilli/filmygpt/blob/main/src/components/Browse/Browse.jsx): `src/components/Browse/Browse.jsx`
- [Featured browse](https://github.com/manikorimilli/filmygpt/blob/main/src/components/PrimaryBrowse/PrimaryBrowse.jsx): `src/components/PrimaryBrowse/PrimaryBrowse.jsx`
- [Category browse](https://github.com/manikorimilli/filmygpt/blob/main/src/components/SecondaryBrowse/SecondaryBrowse.jsx): `src/components/SecondaryBrowse/SecondaryBrowse.jsx`

### Movie discovery

- [Now playing fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useNowPlayingMovies.js): `src/hooks/useNowPlayingMovies.js`
- [Popular fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/usePopularMovies.js): `src/hooks/usePopularMovies.js`
- [Top rated fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useTopRatedMovies.js): `src/hooks/useTopRatedMovies.js`
- [Upcoming fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useUpComingMovies.js): `src/hooks/useUpComingMovies.js`
- [AI search view](https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTSearchPlayground/GPTSearchPlayground.jsx): `src/components/GPTSearchPlayground/GPTSearchPlayground.jsx`
- [AI search](https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTSearch/GPTSearch.jsx): `src/components/GPTSearch/GPTSearch.jsx`
- [AI results](https://github.com/manikorimilli/filmygpt/blob/main/src/components/GPTMovies/GPTMovies.jsx): `src/components/GPTMovies/GPTMovies.jsx`
- [Search state](https://github.com/manikorimilli/filmygpt/blob/main/src/redux/gptSlice.js): `src/redux/gptSlice.js`

### Movie playback

- [Trailer fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useMovieTrailer.js): `src/hooks/useMovieTrailer.js`
- [Watch video fetch](https://github.com/manikorimilli/filmygpt/blob/main/src/hooks/useWatchPlayerVideo.js): `src/hooks/useWatchPlayerVideo.js`
- [Watch player](https://github.com/manikorimilli/filmygpt/blob/main/src/components/WatchPlayer/WatchPlayer.jsx): `src/components/WatchPlayer/WatchPlayer.jsx`

### Identity and state

- [Movie catalog state](https://github.com/manikorimilli/filmygpt/blob/main/src/redux/moviesSlice.js): `src/redux/moviesSlice.js`
- [Redux store](https://github.com/manikorimilli/filmygpt/blob/main/src/redux/appStore.js): `src/redux/appStore.js`
- [Sign-in UI](https://github.com/manikorimilli/filmygpt/blob/main/src/components/Login/Login.jsx): `src/components/Login/Login.jsx`
- [User state](https://github.com/manikorimilli/filmygpt/blob/main/src/redux/userSlice.js): `src/redux/userSlice.js`

### Other components

- **Viewer**
- **TMDB API**
- **OpenAI API**
- [Firebase auth](https://github.com/manikorimilli/filmygpt/blob/main/src/utils/firebase.js): `src/utils/firebase.js`

## Connections

- Viewer → App provider: opens
- App provider → App body: renders
- App provider → Redux store: provides state
- AI search view → AI search: renders
- AI search view → AI results: renders
- AI search → OpenAI API: requests suggestions
- AI search → TMDB API: searches titles
- AI search → Search state: dispatches results
- Now playing fetch → TMDB API: fetches movies
- Now playing fetch → Movie catalog state: dispatches results
- Popular fetch → TMDB API: fetches movies
- Popular fetch → Movie catalog state: dispatches results
- Top rated fetch → TMDB API: fetches movies
- Top rated fetch → Movie catalog state: dispatches results
- Upcoming fetch → TMDB API: fetches movies
- Upcoming fetch → Movie catalog state: dispatches results
- Trailer fetch → TMDB API: fetches video
- Trailer fetch → Movie catalog state: stores trailer
- Watch video fetch → TMDB API: fetches video
- Watch video fetch → Movie catalog state: stores video
- Sign-in UI → Firebase auth: authenticates