# kzografos/trending-app architecture

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

- Interactive diagram: https://gitdiagram.com/kzografos/trending-app
- Repository: https://github.com/kzografos/trending-app

## Overview

ZenithFlix is a small streaming-catalog demo. The main workflow loads trending titles, lets visitors search and filter them, opens a title’s detail modal and video player, and saves playback progress for the Recently Watched row. A separate sign-in flow uses server actions and a signed, HTTP-only session cookie. The graph also preserves the documented review page. Relationships for unsampled modules are limited to those supported by the README or SOURCE INDEX; the review page’s internal behavior is not expanded.

Main entry points: [`src/components/browse/Browse.tsx`](https://github.com/kzografos/trending-app/blob/main/src/components/browse/Browse.tsx) (Browse coordinator), [`src/app/login/actions.ts`](https://github.com/kzografos/trending-app/blob/main/src/app/login/actions.ts) (Login actions), [`src/components/content-modal/ContentModal.tsx`](https://github.com/kzografos/trending-app/blob/main/src/components/content-modal/ContentModal.tsx) (Detail modal), [`src/hooks/useWatchHistory.ts`](https://github.com/kzografos/trending-app/blob/main/src/hooks/useWatchHistory.ts) (History hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog browsing"]
  node_home["Home page<br/>[page.tsx]"]
  node_browse["Browse coordinator<br/>[Browse.tsx]"]
  node_trending["Trending loader<br/>[useTrending.ts]"]
  node_api_client["Content API client<br/>[api.ts]"]
  node_content_route["Content route<br/>[route.ts]"]
  node_content_data["Mock catalog data<br/>[content.ts]"]
  node_filters["Search and filters<br/>[filterContent.ts]"]
  node_toolbar["Browse toolbar<br/>[BrowseToolbar.tsx]"]
  node_trending_row["Trending row<br/>[TrendingRow.tsx]"]
  node_content_tile["Content tile<br/>[ContentTile.tsx]"]
end

subgraph group_playback["Playback and history"]
  node_modal["Detail modal<br/>[ContentModal.tsx]"]
  node_player["Video player<br/>[VideoPlayer.tsx]"]
  node_history_hook["History hook<br/>[useWatchHistory.ts]"]
  node_history_store["History store"]
  node_browser_storage[("Browser localStorage")]
  node_history_row["Recently watched<br/>[HistoryRow.tsx]"]
end

subgraph group_identity["Sign-in and session"]
  node_login_page["Login page<br/>[page.tsx]"]
  node_login_form["Login form<br/>[LoginForm.tsx]"]
  node_login_actions["Login actions<br/>[actions.ts]"]
  node_validation["Login validation<br/>[validateLogin.ts]"]
  node_session["JWT session<br/>[session.ts]"]
  node_header["Account header<br/>[Header.tsx]"]
end

subgraph group_review["Review page"]
  node_review_page["Review page<br/>[page.tsx]"]
  node_content_browser["ContentBrowser<br/>[ContentBrowser.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_browse
node_browse -->|"loads via"| node_trending
node_trending -->|"fetches through"| node_api_client
node_api_client -->|"requests"| node_content_route
node_content_route -->|"serves"| node_content_data
node_browse -->|"filters with"| node_filters
node_browse -->|"renders"| node_toolbar
node_browse -->|"renders"| node_trending_row
node_trending_row -->|"renders"| node_content_tile
node_browse -->|"renders"| node_history_row
node_browse -->|"renders"| node_modal
node_modal -->|"renders"| node_player
node_modal -->|"records progress via"| node_history_hook
node_browse -->|"reads history via"| node_history_hook
node_history_hook -->|"uses"| node_history_store
node_history_store -->|"reads and writes"| node_browser_storage
node_visitor -->|"opens"| node_login_page
node_login_page -->|"renders"| node_login_form
node_login_form -->|"submits to"| node_login_actions
node_login_actions -->|"validates with"| node_validation
node_login_actions -->|"creates or deletes"| node_session
node_header -->|"reads"| node_session
node_header -->|"uses logout"| node_login_actions
node_visitor -->|"opens"| node_review_page
node_review_page -->|"renders"| node_content_browser

click node_home "https://github.com/kzografos/trending-app/blob/main/src/app/page.tsx"
click node_browse "https://github.com/kzografos/trending-app/blob/main/src/components/browse/Browse.tsx"
click node_trending "https://github.com/kzografos/trending-app/blob/main/src/hooks/useTrending.ts"
click node_api_client "https://github.com/kzografos/trending-app/blob/main/src/lib/api.ts"
click node_content_route "https://github.com/kzografos/trending-app/blob/main/src/app/api/content/route.ts"
click node_content_data "https://github.com/kzografos/trending-app/blob/main/src/data/content.ts"
click node_filters "https://github.com/kzografos/trending-app/blob/main/src/lib/filterContent.ts"
click node_toolbar "https://github.com/kzografos/trending-app/blob/main/src/components/browse/BrowseToolbar.tsx"
click node_trending_row "https://github.com/kzografos/trending-app/blob/main/src/components/browse/TrendingRow.tsx"
click node_content_tile "https://github.com/kzografos/trending-app/blob/main/src/components/browse/ContentTile.tsx"
click node_modal "https://github.com/kzografos/trending-app/blob/main/src/components/content-modal/ContentModal.tsx"
click node_player "https://github.com/kzografos/trending-app/blob/main/src/components/content-modal/VideoPlayer.tsx"
click node_history_hook "https://github.com/kzografos/trending-app/blob/main/src/hooks/useWatchHistory.ts"
click node_history_store "https://github.com/kzografos/trending-app/blob/main/src/lib/watchHistoryStore.ts"
click node_history_row "https://github.com/kzografos/trending-app/blob/main/src/components/browse/HistoryRow.tsx"
click node_login_page "https://github.com/kzografos/trending-app/blob/main/src/app/login/page.tsx"
click node_login_form "https://github.com/kzografos/trending-app/blob/main/src/app/login/LoginForm.tsx"
click node_login_actions "https://github.com/kzografos/trending-app/blob/main/src/app/login/actions.ts"
click node_validation "https://github.com/kzografos/trending-app/blob/main/src/lib/validateLogin.ts"
click node_session "https://github.com/kzografos/trending-app/blob/main/src/lib/session.ts"
click node_header "https://github.com/kzografos/trending-app/blob/main/src/components/layout/Header.tsx"
click node_review_page "https://github.com/kzografos/trending-app/blob/main/src/app/review/page.tsx"
click node_content_browser "https://github.com/kzografos/trending-app/blob/main/src/app/review/ContentBrowser.tsx"

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_home,node_browse,node_trending,node_api_client,node_content_route,node_content_data,node_filters,node_toolbar,node_trending_row,node_content_tile toneBlue
class node_modal,node_player,node_history_hook,node_history_store,node_browser_storage,node_history_row toneAmber
class node_login_page,node_login_form,node_login_actions,node_validation,node_session,node_header toneMint
class node_review_page,node_content_browser toneRose
class node_visitor toneIndigo
```

## Components

### Catalog browsing

- [Home page](https://github.com/kzografos/trending-app/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Browse coordinator](https://github.com/kzografos/trending-app/blob/main/src/components/browse/Browse.tsx): `src/components/browse/Browse.tsx`
- [Trending loader](https://github.com/kzografos/trending-app/blob/main/src/hooks/useTrending.ts): `src/hooks/useTrending.ts`
- [Content API client](https://github.com/kzografos/trending-app/blob/main/src/lib/api.ts): `src/lib/api.ts`
- [Content route](https://github.com/kzografos/trending-app/blob/main/src/app/api/content/route.ts): `src/app/api/content/route.ts`
- [Mock catalog data](https://github.com/kzografos/trending-app/blob/main/src/data/content.ts): `src/data/content.ts`
- [Search and filters](https://github.com/kzografos/trending-app/blob/main/src/lib/filterContent.ts): `src/lib/filterContent.ts`
- [Browse toolbar](https://github.com/kzografos/trending-app/blob/main/src/components/browse/BrowseToolbar.tsx): `src/components/browse/BrowseToolbar.tsx`
- [Trending row](https://github.com/kzografos/trending-app/blob/main/src/components/browse/TrendingRow.tsx): `src/components/browse/TrendingRow.tsx`
- [Content tile](https://github.com/kzografos/trending-app/blob/main/src/components/browse/ContentTile.tsx): `src/components/browse/ContentTile.tsx`

### Playback and history

- [Detail modal](https://github.com/kzografos/trending-app/blob/main/src/components/content-modal/ContentModal.tsx): `src/components/content-modal/ContentModal.tsx`
- [Video player](https://github.com/kzografos/trending-app/blob/main/src/components/content-modal/VideoPlayer.tsx): `src/components/content-modal/VideoPlayer.tsx`
- [History hook](https://github.com/kzografos/trending-app/blob/main/src/hooks/useWatchHistory.ts): `src/hooks/useWatchHistory.ts`
- [History store](https://github.com/kzografos/trending-app/blob/main/src/lib/watchHistoryStore.ts): `src/lib/watchHistoryStore.ts`
- **Browser localStorage**
- [Recently watched](https://github.com/kzografos/trending-app/blob/main/src/components/browse/HistoryRow.tsx): `src/components/browse/HistoryRow.tsx`

### Sign-in and session

- [Login page](https://github.com/kzografos/trending-app/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Login form](https://github.com/kzografos/trending-app/blob/main/src/app/login/LoginForm.tsx): `src/app/login/LoginForm.tsx`
- [Login actions](https://github.com/kzografos/trending-app/blob/main/src/app/login/actions.ts): `src/app/login/actions.ts`
- [Login validation](https://github.com/kzografos/trending-app/blob/main/src/lib/validateLogin.ts): `src/lib/validateLogin.ts`
- [JWT session](https://github.com/kzografos/trending-app/blob/main/src/lib/session.ts): `src/lib/session.ts`
- [Account header](https://github.com/kzografos/trending-app/blob/main/src/components/layout/Header.tsx): `src/components/layout/Header.tsx`

### Review page

- [Review page](https://github.com/kzografos/trending-app/blob/main/src/app/review/page.tsx): `src/app/review/page.tsx`
- [ContentBrowser](https://github.com/kzografos/trending-app/blob/main/src/app/review/ContentBrowser.tsx): `src/app/review/ContentBrowser.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → Browse coordinator: renders (evidence: `src/app/page.tsx`)
- Browse coordinator → Trending loader: loads via (evidence: `src/components/browse/Browse.tsx`)
- Trending loader → Content API client: fetches through (evidence: `src/hooks/useTrending.ts`)
- Content API client → Content route: requests (evidence: `README.md`)
- Content route → Mock catalog data: serves (evidence: `src/app/api/content/route.ts`)
- Browse coordinator → Search and filters: filters with (evidence: `src/components/browse/Browse.tsx`)
- Browse coordinator → Browse toolbar: renders (evidence: `src/components/browse/Browse.tsx`)
- Browse coordinator → Trending row: renders (evidence: `src/components/browse/Browse.tsx`)
- Trending row → Content tile: renders (evidence: `src/components/browse/TrendingRow.tsx`)
- Browse coordinator → Recently watched: renders (evidence: `src/components/browse/Browse.tsx`)
- Browse coordinator → Detail modal: renders (evidence: `src/components/browse/Browse.tsx`)
- Detail modal → Video player: renders (evidence: `src/components/content-modal/ContentModal.tsx`)
- Detail modal → History hook: records progress via (evidence: `src/components/content-modal/ContentModal.tsx`)
- Browse coordinator → History hook: reads history via (evidence: `src/components/browse/Browse.tsx`)
- History hook → History store: uses (evidence: `src/hooks/useWatchHistory.ts`)
- History store → Browser localStorage: reads and writes (evidence: `src/lib/watchHistoryStore.ts`)
- Visitor → Login page: opens (evidence: `README.md`)
- Login page → Login form: renders (evidence: `src/app/login/page.tsx`)
- Login form → Login actions: submits to (evidence: `src/app/login/LoginForm.tsx`)
- Login actions → Login validation: validates with (evidence: `src/app/login/actions.ts`)
- Login actions → JWT session: creates or deletes (evidence: `src/app/login/actions.ts`)
- Account header → JWT session: reads (evidence: `src/components/layout/Header.tsx`)
- Account header → Login actions: uses logout (evidence: `src/components/layout/Header.tsx`)
- Visitor → Review page: opens (evidence: `README.md`)
- Review page → ContentBrowser: renders (evidence: `src/app/review/page.tsx`)