# amanpathak-devops/netflix-clone-k8s-end-to-end-project architecture
> Architecture diagram of the GitHub repository amanpathak-devops/netflix-clone-k8s-end-to-end-project, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-02). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project
- Repository: https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project
## Overview
This repository tree covers the React/Vite Netflix-style frontend, not the infrastructure and CI/CD components described elsewhere in the README. Its user workflow is to enter the app, browse movie and genre collections, open a title’s details and related titles, then watch a video. The source excerpts show app initialization, TMDB query construction, and detail-modal behavior; other page and integration relationships are only represented where documented, so unsampled links are omitted or marked unverified.
Main entry points: [`Application-Code/src/components/DetailModal.tsx`](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/DetailModal.tsx) (Title detail modal), [`Application-Code/src/main.tsx`](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/main.tsx) (React entry), [`Application-Code/src/routes/index.tsx`](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/routes/index.tsx) (Route setup), [`Application-Code/src/store/slices/discover.ts`](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/store/slices/discover.ts) (Discovery queries)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_app["App shell"]
node_entry["React entry
[main.tsx]"]
node_routing["Route setup
[index.tsx]"]
node_header["Navigation header
[MainHeader.tsx]"]
node_theme["Dark theme
[palette.ts]"]
node_core_ui["Shared UI components"]
end
subgraph group_browse["Browse and discover"]
node_home["Home page
[HomePage.tsx]"]
node_genre["Genre explore
[GenreExplore.tsx]"]
node_search["Search control
[SearchBox.tsx]"]
node_carousel["Video carousel
[SlickSlider.tsx]"]
node_video_cards["Video cards"]
node_pagination["Pagination helper
[withPagination.tsx]"]
node_discover_state["Discovery queries
[discover.ts]"]
node_api_base["TMDB API base
[apiSlice.ts]"]
node_genre_types["Genre data types
[Genre.ts]"]
end
subgraph group_detail["Title details"]
node_detail_provider["Detail modal state"]
node_detail_modal["Title detail modal
[DetailModal.tsx]"]
node_similar_cards["Similar titles"]
node_movie_types["Movie data types
[Movie.ts]"]
end
subgraph group_playback["Video playback"]
node_watch_page["Watch page
[WatchPage.tsx]"]
node_player["Video.js player
[VideoJSPlayer.tsx]"]
node_player_controls["Player controls"]
end
node_viewer(("Viewer"))
node_tmdb["TMDB service"]
node_viewer -->|"opens app"| node_entry
node_entry -->|"mounts routes"| node_routing
node_entry -->|"configures theme"| node_theme
node_entry -->|"starts configuration query"| node_discover_state
node_header -->|"renders"| node_search
node_carousel -->|"renders"| node_video_cards
node_carousel -->|"links to genre"| node_genre
node_discover_state -->|"injects queries"| node_api_base
node_api_base -.->|"requests data"| node_tmdb
node_detail_modal -->|"requests similar titles"| node_discover_state
node_detail_modal -->|"reads modal state"| node_detail_provider
node_detail_modal -->|"renders results"| node_similar_cards
node_detail_modal -->|"renders preview"| node_player
node_watch_page -.->|"uses player"| node_player
node_player -.->|"uses controls"| node_player_controls
node_routing -.->|"routes to"| node_home
node_routing -.->|"routes to"| node_genre
node_routing -.->|"routes to"| node_watch_page
click node_entry "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/main.tsx"
click node_routing "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/routes/index.tsx"
click node_header "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/layouts/MainHeader.tsx"
click node_theme "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/theme/palette.ts"
click node_home "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/HomePage.tsx"
click node_genre "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/GenreExplore.tsx"
click node_search "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/SearchBox.tsx"
click node_carousel "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/slick-slider/SlickSlider.tsx"
click node_video_cards "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/VideoItemWithHover.tsx"
click node_pagination "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/hoc/withPagination.tsx"
click node_discover_state "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/store/slices/discover.ts"
click node_api_base "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/store/slices/apiSlice.ts"
click node_detail_provider "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/providers/DetailModalProvider.tsx"
click node_detail_modal "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/DetailModal.tsx"
click node_similar_cards "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/SimilarVideoCard.tsx"
click node_movie_types "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/types/Movie.ts"
click node_watch_page "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/WatchPage.tsx"
click node_player "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/watch/VideoJSPlayer.tsx"
click node_player_controls "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/watch/PlayerControlButton.tsx"
click node_core_ui "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/tree/master/Application-Code/src/components"
click node_genre_types "https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/types/Genre.ts"
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_entry,node_routing,node_header,node_theme,node_core_ui,node_viewer toneBlue
class node_home,node_genre,node_search,node_carousel,node_video_cards,node_pagination,node_discover_state,node_api_base,node_genre_types toneAmber
class node_detail_provider,node_detail_modal,node_similar_cards,node_movie_types toneMint
class node_watch_page,node_player,node_player_controls toneRose
class node_tmdb toneIndigo
```
## Components
### App shell
- [React entry](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/main.tsx): `Application-Code/src/main.tsx`
- [Route setup](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/routes/index.tsx): `Application-Code/src/routes/index.tsx`
- [Navigation header](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/layouts/MainHeader.tsx): `Application-Code/src/components/layouts/MainHeader.tsx`
- [Dark theme](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/theme/palette.ts): `Application-Code/src/theme/palette.ts`
- [Shared UI components](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/tree/master/Application-Code/src/components): `Application-Code/src/components`
### Browse and discover
- [Home page](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/HomePage.tsx): `Application-Code/src/pages/HomePage.tsx`
- [Genre explore](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/GenreExplore.tsx): `Application-Code/src/pages/GenreExplore.tsx`
- [Search control](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/SearchBox.tsx): `Application-Code/src/components/SearchBox.tsx`
- [Video carousel](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/slick-slider/SlickSlider.tsx): `Application-Code/src/components/slick-slider/SlickSlider.tsx`
- [Video cards](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/VideoItemWithHover.tsx): `Application-Code/src/components/VideoItemWithHover.tsx`
- [Pagination helper](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/hoc/withPagination.tsx): `Application-Code/src/hoc/withPagination.tsx`
- [Discovery queries](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/store/slices/discover.ts): `Application-Code/src/store/slices/discover.ts`
- [TMDB API base](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/store/slices/apiSlice.ts): `Application-Code/src/store/slices/apiSlice.ts`
- [Genre data types](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/types/Genre.ts): `Application-Code/src/types/Genre.ts`
### Title details
- [Detail modal state](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/providers/DetailModalProvider.tsx): `Application-Code/src/providers/DetailModalProvider.tsx`
- [Title detail modal](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/DetailModal.tsx): `Application-Code/src/components/DetailModal.tsx`
- [Similar titles](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/SimilarVideoCard.tsx): `Application-Code/src/components/SimilarVideoCard.tsx`
- [Movie data types](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/types/Movie.ts): `Application-Code/src/types/Movie.ts`
### Video playback
- [Watch page](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/pages/WatchPage.tsx): `Application-Code/src/pages/WatchPage.tsx`
- [Video.js player](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/watch/VideoJSPlayer.tsx): `Application-Code/src/components/watch/VideoJSPlayer.tsx`
- [Player controls](https://github.com/amanpathak-devops/netflix-clone-k8s-end-to-end-project/blob/master/Application-Code/src/components/watch/PlayerControlButton.tsx): `Application-Code/src/components/watch/PlayerControlButton.tsx`
### Other components
- **Viewer**
- **TMDB service**
## Connections
- Viewer → React entry: opens app
- React entry → Route setup: mounts routes (evidence: `Application-Code/src/main.tsx`)
- React entry → Dark theme: configures theme (evidence: `Application-Code/src/main.tsx`)
- React entry → Discovery queries: starts configuration query (evidence: `Application-Code/src/main.tsx`)
- Navigation header → Search control: renders (evidence: `Application-Code/src/components/layouts/MainHeader.tsx`)
- Video carousel → Video cards: renders (evidence: `Application-Code/src/components/slick-slider/SlickSlider.tsx`)
- Video carousel → Genre explore: links to genre (evidence: `Application-Code/src/components/slick-slider/SlickSlider.tsx`)
- Discovery queries → TMDB API base: injects queries (evidence: `Application-Code/src/store/slices/discover.ts`)
- TMDB API base → TMDB service: requests data
- Title detail modal → Discovery queries: requests similar titles (evidence: `Application-Code/src/components/DetailModal.tsx`)
- Title detail modal → Detail modal state: reads modal state (evidence: `Application-Code/src/components/DetailModal.tsx`)
- Title detail modal → Similar titles: renders results (evidence: `Application-Code/src/components/DetailModal.tsx`)
- Title detail modal → Video.js player: renders preview (evidence: `Application-Code/src/components/DetailModal.tsx`)
- Watch page → Video.js player: uses player
- Video.js player → Player controls: uses controls
- Route setup → Home page: routes to
- Route setup → Genre explore: routes to
- Route setup → Watch page: routes to