# base0005/mad9014-final-project architecture

> Architecture diagram of the GitHub repository base0005/mad9014-final-project, 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/base0005/mad9014-final-project
- Repository: https://github.com/base0005/mad9014-final-project

## Overview

This is a small browser app for searching TMDB movies or TV shows and viewing cast credits. The main workflow is search, render results, open a result’s credit page, and fetch and display its cast. The available source shows the runtime logic, but not the HTML, so page wiring is inferred only from the DOM elements and links referenced in main.js.

Main entry points: [`main.js`](https://github.com/base0005/mad9014-final-project/blob/main/main.js) (App controller), [`credit.html`](https://github.com/base0005/mad9014-final-project/blob/main/credit.html) (Credit page), [`index.html`](https://github.com/base0005/mad9014-final-project/blob/main/index.html) (Search page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_search["Media search"]
  node_search_page["Search page<br/>[index.html]"]
  node_app["App controller<br/>[main.js]"]
  node_search_results["Search results<br/>[main.js]"]
end

subgraph group_credits["Cast credits"]
  node_credit_page["Credit page<br/>[credit.html]"]
  node_credit_loader["Credit loader<br/>[main.js]"]
end

node_user(("User"))
node_tmdb["TMDB API"]
node_images["TMDB images"]

node_user -->|"searches"| node_search_page
node_search_page -->|"submits to"| node_app
node_app -->|"requests results"| node_tmdb
node_tmdb -->|"returns results"| node_app
node_app -->|"renders results"| node_search_results
node_search_results -->|"loads posters"| node_images
node_user -->|"opens result"| node_credit_page
node_credit_page -->|"loads credits"| node_credit_loader
node_credit_loader -->|"requests cast"| node_tmdb
node_tmdb -->|"returns cast"| node_credit_loader
node_credit_loader -->|"renders cast"| node_credit_page

click node_search_page "https://github.com/base0005/mad9014-final-project/blob/main/index.html"
click node_app "https://github.com/base0005/mad9014-final-project/blob/main/main.js"
click node_search_results "https://github.com/base0005/mad9014-final-project/blob/main/main.js"
click node_credit_page "https://github.com/base0005/mad9014-final-project/blob/main/credit.html"
click node_credit_loader "https://github.com/base0005/mad9014-final-project/blob/main/main.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_search_page,node_app,node_search_results,node_user toneBlue
class node_credit_page,node_credit_loader toneAmber
class node_tmdb toneMint
class node_images toneIndigo
```

## Components

### Media search

- [Search page](https://github.com/base0005/mad9014-final-project/blob/main/index.html): `index.html`
- [App controller](https://github.com/base0005/mad9014-final-project/blob/main/main.js): `main.js`
- [Search results](https://github.com/base0005/mad9014-final-project/blob/main/main.js): `main.js`

### Cast credits

- [Credit page](https://github.com/base0005/mad9014-final-project/blob/main/credit.html): `credit.html`
- [Credit loader](https://github.com/base0005/mad9014-final-project/blob/main/main.js): `main.js`

### Other components

- **User**
- **TMDB API**
- **TMDB images**

## Connections

- User → Search page: searches
- Search page → App controller: submits to
- App controller → TMDB API: requests results
- TMDB API → App controller: returns results
- App controller → Search results: renders results
- Search results → TMDB images: loads posters
- User → Credit page: opens result
- Credit page → Credit loader: loads credits
- Credit loader → TMDB API: requests cast
- TMDB API → Credit loader: returns cast
- Credit loader → Credit page: renders cast