# medelbou3/netflix architecture

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

- Interactive diagram: https://gitdiagram.com/medelbou3/netflix
- Repository: https://github.com/medelbou3/netflix
- Video tour (about a minute): https://gitdiagram.com/medelbou3/netflix/video

## Overview

This is an Electron-hosted movie and TV streaming application. The main user journey is browsing a TMDb-backed catalog, opening title details, and watching selected media; account sign-in and synced watch progress/watchlists support that journey. The tree also shows live TV, community discussions and lists, and settings. Edges reflect calls visible in sampled excerpts or direct service use; wiring among unsampled screens is intentionally omitted, and the README provides no additional architecture evidence.

Main entry points: [`js/firebase/firebase-auth.js`](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-auth.js) (Firebase authentication), [`js/components/liveTvView.js`](https://github.com/medelbou3/netflix/blob/main/js/components/liveTvView.js) (Live TV interface), [`js/firebase/firebase-firestore.js`](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-firestore.js) (Firestore services), [`js/app.js`](https://github.com/medelbou3/netflix/blob/main/js/app.js) (App orchestrator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog and discovery"]
  node_app["App orchestrator<br/>[app.js]"]
  node_tmdb["TMDb service<br/>[tmdb.js]"]
  node_mock["Fallback catalog<br/>[mockData.js]"]
  node_detail["Title details<br/>[detailView.js]"]
  node_media["Media cards and grid<br/>[mediaGrid.js]"]
  node_filter["Catalog filters<br/>[filterBar.js]"]
end

subgraph group_playback["Viewing and live TV"]
  node_player["Video playback<br/>[playerView.js]"]
  node_video["Player component<br/>[videoPlayer.js]"]
  node_episodes["TV episodes<br/>[tvEpisodes.js]"]
  node_liveview["Live TV interface<br/>[liveTvView.js]"]
  node_playlist["M3U parser<br/>[m3uParser.js]"]
  node_liveplayer["Live stream player<br/>[liveTvPlayer.js]"]
  node_livestore["Playlist and favorites<br/>[liveTvStore.js]"]
end

subgraph group_account["Accounts and saved state"]
  node_authview["Authentication UI<br/>[AuthView.js]"]
  node_auth["Firebase authentication<br/>[firebase-auth.js]"]
  node_storage["Watch progress and lists<br/>[storage.js]"]
  node_firestore[("Firestore services")]
  node_settings["Account settings<br/>[settingsView.js]"]
  node_firebase["Firebase platform<br/>[firebase-app.js]"]
end

subgraph group_community["Community and engagement"]
  node_communityview["Community discussions<br/>[CommunityView.js]"]
  node_community["Community data service"]
end

node_user(("Viewer"))
node_tmdbexternal(("TMDb API"))
node_firebaseexternal(("Firebase services"))

node_user -->|"uses"| node_app
node_app -->|"requests catalog data"| node_tmdb
node_tmdb -->|"uses fallback data"| node_mock
node_tmdb -->|"fetches metadata"| node_tmdbexternal
node_app -->|"uses saved state"| node_storage
node_user -->|"submits credentials"| node_authview
node_authview -->|"authenticates"| node_auth
node_settings -->|"observes and changes auth"| node_auth
node_storage -->|"observes current user"| node_auth
node_storage -->|"syncs saved state"| node_firestore
node_auth -->|"syncs profile"| node_firestore
node_firestore -->|"uses platform"| node_firebase
node_auth -->|"uses platform"| node_firebase
node_firestore -->|"reads and writes"| node_firebaseexternal
node_auth -->|"authenticates"| node_firebaseexternal
node_user -->|"loads channels"| node_liveview
node_liveview -->|"parses playlists"| node_playlist
node_liveview -->|"controls playback"| node_liveplayer
node_liveview -->|"loads and saves preferences"| node_livestore
node_user -->|"posts and discusses"| node_communityview
node_communityview -->|"manages posts and comments"| node_community
node_community -->|"uses platform"| node_firebase

click node_app "https://github.com/medelbou3/netflix/blob/main/js/app.js"
click node_tmdb "https://github.com/medelbou3/netflix/blob/main/js/api/tmdb.js"
click node_mock "https://github.com/medelbou3/netflix/blob/main/js/api/mockData.js"
click node_detail "https://github.com/medelbou3/netflix/blob/main/js/components/detailView.js"
click node_media "https://github.com/medelbou3/netflix/blob/main/js/components/mediaGrid.js"
click node_filter "https://github.com/medelbou3/netflix/blob/main/js/components/filterBar.js"
click node_player "https://github.com/medelbou3/netflix/blob/main/js/components/playerView.js"
click node_video "https://github.com/medelbou3/netflix/blob/main/js/components/videoPlayer.js"
click node_episodes "https://github.com/medelbou3/netflix/blob/main/js/components/tvEpisodes.js"
click node_liveview "https://github.com/medelbou3/netflix/blob/main/js/components/liveTvView.js"
click node_playlist "https://github.com/medelbou3/netflix/blob/main/js/live-tv/m3uParser.js"
click node_liveplayer "https://github.com/medelbou3/netflix/blob/main/js/live-tv/liveTvPlayer.js"
click node_livestore "https://github.com/medelbou3/netflix/blob/main/js/live-tv/liveTvStore.js"
click node_authview "https://github.com/medelbou3/netflix/blob/main/js/components/auth/AuthView.js"
click node_auth "https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-auth.js"
click node_storage "https://github.com/medelbou3/netflix/blob/main/js/utils/storage.js"
click node_firestore "https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-firestore.js"
click node_settings "https://github.com/medelbou3/netflix/blob/main/js/components/settingsView.js"
click node_communityview "https://github.com/medelbou3/netflix/blob/main/js/components/community/CommunityView.js"
click node_community "https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-community.js"
click node_firebase "https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-app.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_mock,node_detail,node_media,node_filter,node_user toneBlue
class node_player,node_video,node_episodes,node_liveview,node_playlist,node_liveplayer,node_livestore toneAmber
class node_authview,node_auth,node_storage,node_firestore,node_settings,node_firebase,node_tmdbexternal toneMint
class node_communityview,node_community toneRose
class node_firebaseexternal toneIndigo
```

## Components

### Catalog and discovery

- [App orchestrator](https://github.com/medelbou3/netflix/blob/main/js/app.js): `js/app.js`
- [TMDb service](https://github.com/medelbou3/netflix/blob/main/js/api/tmdb.js): `js/api/tmdb.js`
- [Fallback catalog](https://github.com/medelbou3/netflix/blob/main/js/api/mockData.js): `js/api/mockData.js`
- [Title details](https://github.com/medelbou3/netflix/blob/main/js/components/detailView.js): `js/components/detailView.js`
- [Media cards and grid](https://github.com/medelbou3/netflix/blob/main/js/components/mediaGrid.js): `js/components/mediaGrid.js`
- [Catalog filters](https://github.com/medelbou3/netflix/blob/main/js/components/filterBar.js): `js/components/filterBar.js`

### Viewing and live TV

- [Video playback](https://github.com/medelbou3/netflix/blob/main/js/components/playerView.js): `js/components/playerView.js`
- [Player component](https://github.com/medelbou3/netflix/blob/main/js/components/videoPlayer.js): `js/components/videoPlayer.js`
- [TV episodes](https://github.com/medelbou3/netflix/blob/main/js/components/tvEpisodes.js): `js/components/tvEpisodes.js`
- [Live TV interface](https://github.com/medelbou3/netflix/blob/main/js/components/liveTvView.js): `js/components/liveTvView.js`
- [M3U parser](https://github.com/medelbou3/netflix/blob/main/js/live-tv/m3uParser.js): `js/live-tv/m3uParser.js`
- [Live stream player](https://github.com/medelbou3/netflix/blob/main/js/live-tv/liveTvPlayer.js): `js/live-tv/liveTvPlayer.js`
- [Playlist and favorites](https://github.com/medelbou3/netflix/blob/main/js/live-tv/liveTvStore.js): `js/live-tv/liveTvStore.js`

### Accounts and saved state

- [Authentication UI](https://github.com/medelbou3/netflix/blob/main/js/components/auth/AuthView.js): `js/components/auth/AuthView.js`
- [Firebase authentication](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-auth.js): `js/firebase/firebase-auth.js`
- [Watch progress and lists](https://github.com/medelbou3/netflix/blob/main/js/utils/storage.js): `js/utils/storage.js`
- [Firestore services](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-firestore.js): `js/firebase/firebase-firestore.js`
- [Account settings](https://github.com/medelbou3/netflix/blob/main/js/components/settingsView.js): `js/components/settingsView.js`
- [Firebase platform](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-app.js): `js/firebase/firebase-app.js`

### Community and engagement

- [Community discussions](https://github.com/medelbou3/netflix/blob/main/js/components/community/CommunityView.js): `js/components/community/CommunityView.js`
- [Community data service](https://github.com/medelbou3/netflix/blob/main/js/firebase/firebase-community.js): `js/firebase/firebase-community.js`

### Other components

- **Viewer**
- **TMDb API**
- **Firebase services**

## Connections

- Viewer → App orchestrator: uses
- App orchestrator → TMDb service: requests catalog data
- TMDb service → Fallback catalog: uses fallback data
- TMDb service → TMDb API: fetches metadata
- App orchestrator → Watch progress and lists: uses saved state
- Viewer → Authentication UI: submits credentials
- Authentication UI → Firebase authentication: authenticates
- Account settings → Firebase authentication: observes and changes auth
- Watch progress and lists → Firebase authentication: observes current user
- Watch progress and lists → Firestore services: syncs saved state
- Firebase authentication → Firestore services: syncs profile
- Firestore services → Firebase platform: uses platform
- Firebase authentication → Firebase platform: uses platform
- Firestore services → Firebase services: reads and writes
- Firebase authentication → Firebase services: authenticates
- Viewer → Live TV interface: loads channels
- Live TV interface → M3U parser: parses playlists
- Live TV interface → Live stream player: controls playback
- Live TV interface → Playlist and favorites: loads and saves preferences
- Viewer → Community discussions: posts and discusses
- Community discussions → Community data service: manages posts and comments
- Community data service → Firebase platform: uses platform