# askhan963/netflix-clone-mern architecture

> Architecture diagram of the GitHub repository askhan963/netflix-clone-mern, 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/askhan963/netflix-clone-mern
- Repository: https://github.com/askhan963/netflix-clone-mern

## Overview

This is a Netflix-style streaming discovery clone: users authenticate, browse movie and TV content, inspect titles, and open a player; signed-in users can also maintain a liked-movies list. The sampled home page and Redux store show TMDB discovery, while the card and backend sources show liked-list operations. Login/signup, detail, playback, genre, and list screens are represented from the tree and README, but their internal wiring was not sampled.

Main entry points: [`netflix-ui/src/App.js`](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/App.js) (React app routes), [`netflix-ui/src/components/Card.jsx`](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/Card.jsx) (Title card), [`netflix-ui/src/store/index.js`](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/store/index.js) (Catalog state), [`netflix-ui/src/pages/Netflix.jsx`](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Netflix.jsx) (Home discovery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client navigation"]
  node_app["React app routes<br/>[App.js]"]
  node_entry["Client entry<br/>[index.js]"]
  node_login["Login<br/>[Login.jsx]"]
  node_signup["Signup<br/>[Signup.jsx]"]
end

subgraph group_catalog["Catalog and playback"]
  node_home["Home discovery<br/>[Netflix.jsx]"]
  node_movies["Movies<br/>[Movies.jsx]"]
  node_tv["TV shows<br/>[TVShows.jsx]"]
  node_genres["Genre selector<br/>[SelectGenre.jsx]"]
  node_slider["Title slider<br/>[Slider.jsx]"]
  node_card["Title card<br/>[Card.jsx]"]
  node_info["Title details<br/>[Info.jsx]"]
  node_player["Player<br/>[Player.jsx]"]
  node_store["Catalog state<br/>[index.js]"]
end

subgraph group_favorites["Liked movies"]
  node_mylist["My list"]
end

subgraph group_backend["Backend persistence"]
  node_api["User API server<br/>[server.js]"]
  node_routes["User routes<br/>[UserRoutes.js]"]
  node_controller["Liked-list logic<br/>[UserController.js]"]
  node_model["User model<br/>[UserModel.js]"]
  node_dbconn["Database connector<br/>[db.js]"]
end

node_viewer(("Viewer"))
node_firebase{{"Firebase Auth"}}
node_tmdb{{"TMDB API"}}
node_mongo[("MongoDB")]

node_viewer -->|"opens"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_signup
node_app -->|"routes"| node_home
node_app -->|"routes"| node_movies
node_app -->|"routes"| node_tv
node_app -->|"routes"| node_info
node_app -->|"routes"| node_player
node_app -->|"routes"| node_mylist
node_login -.->|"authenticates"| node_firebase
node_signup -.->|"authenticates"| node_firebase
node_home -.->|"checks session"| node_firebase
node_home -->|"dispatches discovery"| node_store
node_home -->|"renders titles"| node_slider
node_movies -->|"offers filtering"| node_genres
node_tv -->|"offers filtering"| node_genres
node_slider -->|"renders titles"| node_card
node_card -->|"opens details"| node_info
node_card -->|"opens playback"| node_player
node_store -.->|"fetches catalog"| node_tmdb
node_card -.->|"adds title"| node_api
node_card -->|"dispatches removal"| node_store
node_mylist -->|"loads liked titles"| node_store
node_store -.->|"reads or removes"| node_api
node_api -->|"connects"| node_dbconn
node_api -->|"mounts routes"| node_routes
node_routes -->|"dispatches requests"| node_controller
node_controller -->|"queries or updates"| node_model
node_dbconn -->|"connects"| node_mongo

click node_app "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/App.js"
click node_entry "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/index.js"
click node_login "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Login.jsx"
click node_signup "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Signup.jsx"
click node_home "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Netflix.jsx"
click node_movies "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Movies.jsx"
click node_tv "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/TVShows.jsx"
click node_genres "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/SelectGenre.jsx"
click node_slider "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/Slider.jsx"
click node_card "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/Card.jsx"
click node_info "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Info.jsx"
click node_player "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Player.jsx"
click node_store "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/store/index.js"
click node_mylist "https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/UserListedMovies.jsx"
click node_api "https://github.com/askhan963/netflix-clone-mern/blob/main/backend/server.js"
click node_routes "https://github.com/askhan963/netflix-clone-mern/blob/main/backend/routes/UserRoutes.js"
click node_controller "https://github.com/askhan963/netflix-clone-mern/blob/main/backend/controllers/UserController.js"
click node_model "https://github.com/askhan963/netflix-clone-mern/blob/main/backend/models/UserModel.js"
click node_dbconn "https://github.com/askhan963/netflix-clone-mern/blob/main/backend/db.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_entry,node_login,node_signup,node_viewer toneBlue
class node_home,node_movies,node_tv,node_genres,node_slider,node_card,node_info,node_player,node_store,node_mongo toneAmber
class node_mylist,node_tmdb toneMint
class node_api,node_routes,node_controller,node_model,node_dbconn toneRose
class node_firebase toneIndigo
```

## Components

### Client navigation

- [React app routes](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/App.js): `netflix-ui/src/App.js`
- [Client entry](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/index.js): `netflix-ui/src/index.js`
- [Login](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Login.jsx): `netflix-ui/src/pages/Login.jsx`
- [Signup](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Signup.jsx): `netflix-ui/src/pages/Signup.jsx`

### Catalog and playback

- [Home discovery](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Netflix.jsx): `netflix-ui/src/pages/Netflix.jsx`
- [Movies](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Movies.jsx): `netflix-ui/src/pages/Movies.jsx`
- [TV shows](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/TVShows.jsx): `netflix-ui/src/pages/TVShows.jsx`
- [Genre selector](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/SelectGenre.jsx): `netflix-ui/src/components/SelectGenre.jsx`
- [Title slider](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/Slider.jsx): `netflix-ui/src/components/Slider.jsx`
- [Title card](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/components/Card.jsx): `netflix-ui/src/components/Card.jsx`
- [Title details](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Info.jsx): `netflix-ui/src/pages/Info.jsx`
- [Player](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/Player.jsx): `netflix-ui/src/pages/Player.jsx`
- [Catalog state](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/store/index.js): `netflix-ui/src/store/index.js`

### Liked movies

- [My list](https://github.com/askhan963/netflix-clone-mern/blob/main/netflix-ui/src/pages/UserListedMovies.jsx): `netflix-ui/src/pages/UserListedMovies.jsx`

### Backend persistence

- [User API server](https://github.com/askhan963/netflix-clone-mern/blob/main/backend/server.js): `backend/server.js`
- [User routes](https://github.com/askhan963/netflix-clone-mern/blob/main/backend/routes/UserRoutes.js): `backend/routes/UserRoutes.js`
- [Liked-list logic](https://github.com/askhan963/netflix-clone-mern/blob/main/backend/controllers/UserController.js): `backend/controllers/UserController.js`
- [User model](https://github.com/askhan963/netflix-clone-mern/blob/main/backend/models/UserModel.js): `backend/models/UserModel.js`
- [Database connector](https://github.com/askhan963/netflix-clone-mern/blob/main/backend/db.js): `backend/db.js`

### Other components

- **Viewer**
- **Firebase Auth**
- **TMDB API**
- **MongoDB**

## Connections

- Viewer → Client entry: opens
- Client entry → React app routes: renders
- React app routes → Login: routes
- React app routes → Signup: routes
- React app routes → Home discovery: routes
- React app routes → Movies: routes
- React app routes → TV shows: routes
- React app routes → Title details: routes
- React app routes → Player: routes
- React app routes → My list: routes
- Login → Firebase Auth: authenticates
- Signup → Firebase Auth: authenticates
- Home discovery → Firebase Auth: checks session
- Home discovery → Catalog state: dispatches discovery
- Home discovery → Title slider: renders titles
- Movies → Genre selector: offers filtering
- TV shows → Genre selector: offers filtering
- Title slider → Title card: renders titles
- Title card → Title details: opens details
- Title card → Player: opens playback
- Catalog state → TMDB API: fetches catalog
- Title card → User API server: adds title
- Title card → Catalog state: dispatches removal
- My list → Catalog state: loads liked titles
- Catalog state → User API server: reads or removes
- User API server → Database connector: connects
- User API server → User routes: mounts routes
- User routes → Liked-list logic: dispatches requests
- Liked-list logic → User model: queries or updates
- Database connector → MongoDB: connects