# udev4681-debug/cineplay architecture

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

- Interactive diagram: https://gitdiagram.com/udev4681-debug/cineplay
- Repository: https://github.com/udev4681-debug/cineplay

## Overview

CinePlay is a browser-based movie and game discovery portal. Users browse or search titles, filter and sort catalogs, and use a mood quiz to get scored recommendations; they can inspect trailers and save favorites. The runtime combines local catalog data with optional TMDB/Steam lookups and Firestore caching or account sync. The map covers these documented capabilities, but sampled excerpts do not establish every page-to-controller hookup or all proxy routing details.

Main entry points: [`js/cineplay-data-manager.js`](https://github.com/udev4681-debug/cineplay/blob/main/js/cineplay-data-manager.js) (Data manager), [`js/api-service.js`](https://github.com/udev4681-debug/cineplay/blob/main/js/api-service.js) (API client), [`js/app.js`](https://github.com/udev4681-debug/cineplay/blob/main/js/app.js) (App UI), [`js/firestore-service.js`](https://github.com/udev4681-debug/cineplay/blob/main/js/firestore-service.js) (Firestore service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Discovery experience"]
  node_app["App UI<br/>[app.js]"]
  node_movie_catalog["Movie browsing<br/>[movies.js]"]
  node_game_catalog["Game browsing<br/>[games.js]"]
  node_favorites_ui["Favorites page<br/>[favorites.js]"]
  node_auth["Sign-in and sync<br/>[auth.js]"]
  node_quiz["Quiz interface<br/>[recommendation.js]"]
end

subgraph group_catalog["Catalog and recommendations"]
  node_data_manager["Data manager"]
  node_local_catalog["Offline catalog<br/>[data.js]"]
  node_scoring["Recommendation scoring<br/>[app.js]"]
end

subgraph group_services["Data and persistence"]
  node_api_client["API client<br/>[api-service.js]"]
  node_firestore["Firestore service"]
  node_firebase["Firebase setup<br/>[firebase-config.js]"]
  node_dev_server["Local proxy server<br/>[run_server.py]"]
  node_tmdb_proxy["TMDB proxy<br/>[tmdb.js]"]
end

subgraph group_integrations["External integrations"]
  node_tmdb(("TMDB"))
  node_steam(("Steam services"))
  node_cloud_db[("Firestore")]
end

node_visitor(("Visitor"))

node_visitor -.->|"uses"| node_app
node_visitor -.->|"browses"| node_movie_catalog
node_visitor -.->|"browses"| node_game_catalog
node_visitor -.->|"answers"| node_quiz
node_app -->|"fetches movies"| node_data_manager
node_data_manager -->|"requests data"| node_api_client
node_data_manager -->|"checks cache"| node_firestore
node_data_manager -->|"falls back to"| node_local_catalog
node_data_manager -->|"requests matches"| node_scoring
node_quiz -.->|"submits preferences"| node_scoring
node_app -->|"loads trailers"| node_api_client
node_favorites_ui -->|"loads cached items"| node_firestore
node_auth -->|"syncs account data"| node_cloud_db
node_firestore -->|"reads and writes"| node_cloud_db
node_firebase -.->|"configures access"| node_cloud_db
node_api_client -->|"requests endpoint"| node_tmdb_proxy
node_tmdb_proxy -->|"forwards requests"| node_tmdb
node_api_client -->|"requests game data"| node_steam
node_api_client -.->|"uses local proxy"| node_dev_server

click node_app "https://github.com/udev4681-debug/cineplay/blob/main/js/app.js"
click node_movie_catalog "https://github.com/udev4681-debug/cineplay/blob/main/js/movies.js"
click node_game_catalog "https://github.com/udev4681-debug/cineplay/blob/main/js/games.js"
click node_favorites_ui "https://github.com/udev4681-debug/cineplay/blob/main/js/favorites.js"
click node_auth "https://github.com/udev4681-debug/cineplay/blob/main/js/auth.js"
click node_quiz "https://github.com/udev4681-debug/cineplay/blob/main/js/recommendation.js"
click node_data_manager "https://github.com/udev4681-debug/cineplay/blob/main/js/cineplay-data-manager.js"
click node_local_catalog "https://github.com/udev4681-debug/cineplay/blob/main/js/data.js"
click node_scoring "https://github.com/udev4681-debug/cineplay/blob/main/js/app.js"
click node_api_client "https://github.com/udev4681-debug/cineplay/blob/main/js/api-service.js"
click node_firestore "https://github.com/udev4681-debug/cineplay/blob/main/js/firestore-service.js"
click node_firebase "https://github.com/udev4681-debug/cineplay/blob/main/js/firebase-config.js"
click node_dev_server "https://github.com/udev4681-debug/cineplay/blob/main/run_server.py"
click node_tmdb_proxy "https://github.com/udev4681-debug/cineplay/blob/main/api/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_movie_catalog,node_game_catalog,node_favorites_ui,node_auth,node_quiz toneBlue
class node_data_manager,node_local_catalog,node_scoring toneAmber
class node_api_client,node_firestore,node_firebase,node_dev_server,node_tmdb_proxy toneMint
class node_tmdb,node_steam,node_cloud_db toneRose
class node_visitor toneIndigo
```

## Components

### Discovery experience

- [App UI](https://github.com/udev4681-debug/cineplay/blob/main/js/app.js): `js/app.js`
- [Movie browsing](https://github.com/udev4681-debug/cineplay/blob/main/js/movies.js): `js/movies.js`
- [Game browsing](https://github.com/udev4681-debug/cineplay/blob/main/js/games.js): `js/games.js`
- [Favorites page](https://github.com/udev4681-debug/cineplay/blob/main/js/favorites.js): `js/favorites.js`
- [Sign-in and sync](https://github.com/udev4681-debug/cineplay/blob/main/js/auth.js): `js/auth.js`
- [Quiz interface](https://github.com/udev4681-debug/cineplay/blob/main/js/recommendation.js): `js/recommendation.js`

### Catalog and recommendations

- [Data manager](https://github.com/udev4681-debug/cineplay/blob/main/js/cineplay-data-manager.js): `js/cineplay-data-manager.js`
- [Offline catalog](https://github.com/udev4681-debug/cineplay/blob/main/js/data.js): `js/data.js`
- [Recommendation scoring](https://github.com/udev4681-debug/cineplay/blob/main/js/app.js): `js/app.js`

### Data and persistence

- [API client](https://github.com/udev4681-debug/cineplay/blob/main/js/api-service.js): `js/api-service.js`
- [Firestore service](https://github.com/udev4681-debug/cineplay/blob/main/js/firestore-service.js): `js/firestore-service.js`
- [Firebase setup](https://github.com/udev4681-debug/cineplay/blob/main/js/firebase-config.js): `js/firebase-config.js`
- [Local proxy server](https://github.com/udev4681-debug/cineplay/blob/main/run_server.py): `run_server.py`
- [TMDB proxy](https://github.com/udev4681-debug/cineplay/blob/main/api/tmdb.js): `api/tmdb.js`

### External integrations

- **TMDB**
- **Steam services**
- **Firestore**

### Other components

- **Visitor**

## Connections

- Visitor → App UI: uses (evidence: `README.md`)
- Visitor → Movie browsing: browses (evidence: `README.md`)
- Visitor → Game browsing: browses (evidence: `README.md`)
- Visitor → Quiz interface: answers (evidence: `README.md`)
- App UI → Data manager: fetches movies (evidence: `js/app.js`)
- Data manager → API client: requests data (evidence: `js/cineplay-data-manager.js`)
- Data manager → Firestore service: checks cache (evidence: `js/cineplay-data-manager.js`)
- Data manager → Offline catalog: falls back to (evidence: `js/cineplay-data-manager.js`)
- Data manager → Recommendation scoring: requests matches (evidence: `js/cineplay-data-manager.js`)
- Quiz interface → Recommendation scoring: submits preferences
- App UI → API client: loads trailers (evidence: `js/app.js`)
- Favorites page → Firestore service: loads cached items (evidence: `js/favorites.js`)
- Sign-in and sync → Firestore: syncs account data (evidence: `js/auth.js`)
- Firestore service → Firestore: reads and writes (evidence: `js/firestore-service.js`)
- Firebase setup → Firestore: configures access
- API client → TMDB proxy: requests endpoint (evidence: `js/api-service.js`)
- TMDB proxy → TMDB: forwards requests (evidence: `api/tmdb.js`)
- API client → Steam services: requests game data (evidence: `js/api-service.js`)
- API client → Local proxy server: uses local proxy