# raytheman101/tv-blog-website architecture

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

- Interactive diagram: https://gitdiagram.com/raytheman101/tv-blog-website
- Repository: https://github.com/raytheman101/tv-blog-website

## Overview

This is a responsive digital-signage website: an administrator manages content and TV connections, while remote viewers display synchronized media. The graph separates account access, content management, connection/state APIs, and viewer playback. The sampled files show account requests, session persistence, and viewer heartbeats; several dashboard-to-API links and slideshow interactions are not visible in the excerpts, so those relationships are omitted rather than inferred.

Main entry points: [`tvweb/tv-management.js`](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-management.js) (TV management dashboard), [`tvweb/tv-viewer.js`](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-viewer.js) (Viewer playback), [`tvweb/database_setup.sql`](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/database_setup.sql) (TV session database), [`tvweb/script.js`](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/script.js) (Login and signup UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_accounts["Accounts"]
  node_login_ui["Login and signup UI<br/>[script.js]"]
  node_auth_api["Account endpoints<br/>[login.php]"]
  node_registration["Registration endpoint<br/>[signup.php]"]
  node_user_store[("User database")]
end

subgraph group_content["Content management"]
  node_dashboard["TV management dashboard<br/>[tv-management.js]"]
  node_media_api["Media upload and listing"]
  node_slideshow_api["Slideshow operations"]
  node_session_cleanup["Content session cleanup"]
end

subgraph group_sync["TV connections and sync"]
  node_connection_api["Connection-code endpoint<br/>[connect.php]"]
  node_viewer_code_api["Viewer code lookup"]
  node_sync_write["Session state updates<br/>[sync.php]"]
  node_sync_read["Session state lookup<br/>[get-sync.php]"]
  node_heartbeat_api["Viewer heartbeat"]
  node_session_store[("TV session database<br/>[database_setup.sql]")]
  node_heartbeat_store[("Heartbeat file")]
end

subgraph group_viewer["Viewer playback"]
  node_viewer_ui["Viewer playback<br/>[tv-viewer.js]"]
end

node_admin(("Administrator"))
node_viewer_actor(("TV viewer"))

node_admin -->|"uses"| node_login_ui
node_login_ui -->|"submits credentials"| node_auth_api
node_login_ui -->|"creates account"| node_registration
node_auth_api -->|"queries users"| node_user_store
node_registration -->|"inserts users"| node_user_store
node_admin -->|"manages TVs"| node_dashboard
node_dashboard -.->|"uploads media"| node_media_api
node_dashboard -.->|"manages slideshows"| node_slideshow_api
node_dashboard -.->|"clears deleted media"| node_session_cleanup
node_viewer_actor -->|"views signage"| node_viewer_ui
node_viewer_ui -->|"sends heartbeat"| node_heartbeat_api
node_connection_api -->|"checks activity"| node_heartbeat_store
node_connection_api -->|"creates or refreshes sessions"| node_session_store
node_sync_write -->|"updates state"| node_session_store
node_sync_read -->|"reads state"| node_session_store
node_heartbeat_api -->|"writes heartbeat"| node_heartbeat_store
node_heartbeat_api -->|"deletes closed session"| node_session_store
node_viewer_ui -.->|"requests connection code"| node_viewer_code_api
node_viewer_ui -.->|"polls playback state"| node_sync_read
node_dashboard -.->|"requests connection"| node_connection_api
node_dashboard -.->|"updates playback state"| node_sync_write

click node_login_ui "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/script.js"
click node_auth_api "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/login.php"
click node_registration "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/signup.php"
click node_user_store "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/bbccc_tv_account.sql"
click node_dashboard "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-management.js"
click node_media_api "https://github.com/raytheman101/tv-blog-website/tree/main/tvweb"
click node_slideshow_api "https://github.com/raytheman101/tv-blog-website/tree/main/tvweb"
click node_session_cleanup "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/delete-from-sessions.php"
click node_viewer_ui "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-viewer.js"
click node_connection_api "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/connect.php"
click node_viewer_code_api "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/get-viewer-code.php"
click node_sync_write "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/sync.php"
click node_sync_read "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/get-sync.php"
click node_heartbeat_api "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/viewer-heartbeat.php"
click node_session_store "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/database_setup.sql"
click node_heartbeat_store "https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/viewer-heartbeats.json"

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_login_ui,node_auth_api,node_registration,node_user_store,node_viewer_actor toneBlue
class node_dashboard,node_media_api,node_slideshow_api,node_session_cleanup toneAmber
class node_connection_api,node_viewer_code_api,node_sync_write,node_sync_read,node_heartbeat_api,node_session_store,node_heartbeat_store toneMint
class node_viewer_ui toneRose
class node_admin toneIndigo
```

## Components

### Accounts

- [Login and signup UI](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/script.js): `tvweb/script.js`
- [Account endpoints](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/login.php): `tvweb/login.php`
- [Registration endpoint](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/signup.php): `tvweb/signup.php`
- [User database](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/bbccc_tv_account.sql): `tvweb/bbccc_tv_account.sql`

### Content management

- [TV management dashboard](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-management.js): `tvweb/tv-management.js`
- [Media upload and listing](https://github.com/raytheman101/tv-blog-website/tree/main/tvweb): `tvweb`
- [Slideshow operations](https://github.com/raytheman101/tv-blog-website/tree/main/tvweb): `tvweb`
- [Content session cleanup](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/delete-from-sessions.php): `tvweb/delete-from-sessions.php`

### TV connections and sync

- [Connection-code endpoint](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/connect.php): `tvweb/connect.php`
- [Viewer code lookup](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/get-viewer-code.php): `tvweb/get-viewer-code.php`
- [Session state updates](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/sync.php): `tvweb/sync.php`
- [Session state lookup](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/get-sync.php): `tvweb/get-sync.php`
- [Viewer heartbeat](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/viewer-heartbeat.php): `tvweb/viewer-heartbeat.php`
- [TV session database](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/database_setup.sql): `tvweb/database_setup.sql`
- [Heartbeat file](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/viewer-heartbeats.json): `tvweb/viewer-heartbeats.json`

### Viewer playback

- [Viewer playback](https://github.com/raytheman101/tv-blog-website/blob/main/tvweb/tv-viewer.js): `tvweb/tv-viewer.js`

### Other components

- **Administrator**
- **TV viewer**

## Connections

- Administrator → Login and signup UI: uses (evidence: `tvweb/script.js`)
- Login and signup UI → Account endpoints: submits credentials (evidence: `tvweb/script.js`)
- Login and signup UI → Registration endpoint: creates account (evidence: `tvweb/script.js`)
- Account endpoints → User database: queries users (evidence: `tvweb/login.php`)
- Registration endpoint → User database: inserts users (evidence: `tvweb/signup.php`)
- Administrator → TV management dashboard: manages TVs (evidence: `tvweb/tv-management.js`)
- TV management dashboard → Media upload and listing: uploads media
- TV management dashboard → Slideshow operations: manages slideshows
- TV management dashboard → Content session cleanup: clears deleted media
- TV viewer → Viewer playback: views signage (evidence: `tvweb/tv-viewer.js`)
- Viewer playback → Viewer heartbeat: sends heartbeat (evidence: `tvweb/tv-viewer.js`)
- Connection-code endpoint → Heartbeat file: checks activity (evidence: `tvweb/connect.php`)
- Connection-code endpoint → TV session database: creates or refreshes sessions (evidence: `tvweb/connect.php`)
- Session state updates → TV session database: updates state (evidence: `tvweb/sync.php`)
- Session state lookup → TV session database: reads state (evidence: `tvweb/get-sync.php`)
- Viewer heartbeat → Heartbeat file: writes heartbeat (evidence: `tvweb/viewer-heartbeat.php`)
- Viewer heartbeat → TV session database: deletes closed session (evidence: `tvweb/viewer-heartbeat.php`)
- Viewer playback → Viewer code lookup: requests connection code
- Viewer playback → Session state lookup: polls playback state
- TV management dashboard → Connection-code endpoint: requests connection
- TV management dashboard → Session state updates: updates playback state