# chronox24/esports architecture

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

- Interactive diagram: https://gitdiagram.com/chronox24/esports
- Repository: https://github.com/chronox24/esports

## Overview

This is an esports tournament and team-management web application. Users enter through the public landing pages, authenticate, then use a dashboard to manage tournaments, record match data, and view rankings and analytics. The frontend talks to an Express API, which reads and writes Supabase data; backend prediction, statistics, and YouTube-highlight capabilities are also represented. The README provides no usable product detail, and several feature files were not sampled, so some subsystem links are documented by the source index while the frontend-to-backend connection is shown as unverified.

Main entry points: [`esport_frontend/src/screens/main/MainUIScreen.jsx`](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/MainUIScreen.jsx) (Dashboard navigation), [`esport_frontend/src/screens/main/Tournament.jsx`](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Tournament.jsx) (Tournament hub), [`esports_backend/server.js`](https://github.com/chronox24/esports/blob/main/esports_backend/server.js) (Express API), [`esport_frontend/src/utils/api.js`](https://github.com/chronox24/esports/blob/main/esport_frontend/src/utils/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_app["Route and auth shell<br/>[App.jsx]"]
  node_landing["Landing pages<br/>[Home.jsx]"]
  node_login["Login and recovery<br/>[LoginScreen.jsx]"]
  node_hub["Dashboard navigation<br/>[MainUIScreen.jsx]"]
  node_api["API client<br/>[api.js]"]
end

subgraph group_tournament["Tournament operations"]
  node_tournaments["Tournament hub<br/>[Tournament.jsx]"]
  node_brackets["Brackets<br/>[Bracket.jsx]"]
  node_entry["Match data entry<br/>[DataEntry.jsx]"]
  node_prs["PRS entry<br/>[PRSEntry.jsx]"]
  node_mapping["Map and veto mapping<br/>[Mapping.jsx]"]
  node_history["Tournament history"]
  node_entrysummary["Entry summaries<br/>[EntrySummary.jsx]"]
end

subgraph group_insights["Player insights"]
  node_insightsdash["Analytics dashboard<br/>[Analytics.jsx]"]
  node_leaderboards["Leaderboards<br/>[Leaderboards.jsx]"]
  node_rankings["Player rankings<br/>[PlayerRankings.jsx]"]
  node_playerstats["Player statistics<br/>[PlayerStatsTab.jsx]"]
  node_predictions["Match predictions<br/>[Predictions.jsx]"]
  node_records["Raw records<br/>[RawRecords.jsx]"]
  node_agentbadge["Agent display helper<br/>[agentHelper.jsx]"]
end

subgraph group_backend["API and services"]
  node_backend["Express API<br/>[server.js]"]
  node_store[("Supabase data store")]
  node_stats["Statistics calculator<br/>[statsCalculator.js]"]
  node_predictor["Prediction engine<br/>[predictor.js]"]
  node_scraper["YouTube highlight scraper<br/>[youtubeScraper.js]"]
end

node_visitor(("Visitor"))
node_youtube["YouTube"]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes after login"| node_hub
node_app -.->|"login flow"| node_login
node_landing -->|"loads highlights"| node_api
node_login -->|"sends auth requests"| node_api
node_hub -->|"renders feature"| node_tournaments
node_hub -->|"renders feature"| node_entry
node_hub -->|"renders feature"| node_mapping
node_hub -->|"renders feature"| node_prs
node_hub -->|"renders feature"| node_leaderboards
node_hub -->|"renders feature"| node_insightsdash
node_hub -->|"renders feature"| node_rankings
node_hub -->|"renders feature"| node_playerstats
node_hub -->|"renders feature"| node_records
node_hub -->|"renders feature"| node_predictions
node_tournaments -->|"embeds"| node_brackets
node_tournaments -->|"embeds"| node_predictions
node_tournaments -->|"embeds"| node_mapping
node_tournaments -->|"embeds"| node_entry
node_entry -->|"reads and submits records"| node_api
node_entry -->|"renders agents"| node_agentbadge
node_tournaments -->|"loads matches and brackets"| node_api
node_api -.->|"sends HTTP requests"| node_backend
node_backend -->|"reads and writes"| node_store
node_backend -->|"uses calculator"| node_stats
node_backend -->|"uses engine"| node_predictor
node_backend -->|"uses scraper"| node_scraper
node_scraper -->|"fetches videos"| node_youtube

click node_app "https://github.com/chronox24/esports/blob/main/esport_frontend/src/App.jsx"
click node_landing "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/landing/Home.jsx"
click node_login "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/landing/LoginScreen.jsx"
click node_hub "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/MainUIScreen.jsx"
click node_api "https://github.com/chronox24/esports/blob/main/esport_frontend/src/utils/api.js"
click node_tournaments "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Tournament.jsx"
click node_brackets "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Bracket.jsx"
click node_entry "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/DataEntry.jsx"
click node_prs "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PRSEntry.jsx"
click node_mapping "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Mapping.jsx"
click node_history "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/TournamentHistory.jsx"
click node_entrysummary "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/EntrySummary.jsx"
click node_insightsdash "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Analytics.jsx"
click node_leaderboards "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Leaderboards.jsx"
click node_rankings "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PlayerRankings.jsx"
click node_playerstats "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PlayerStatsTab.jsx"
click node_predictions "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Predictions.jsx"
click node_records "https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/RawRecords.jsx"
click node_agentbadge "https://github.com/chronox24/esports/blob/main/esport_frontend/src/utils/agentHelper.jsx"
click node_backend "https://github.com/chronox24/esports/blob/main/esports_backend/server.js"
click node_stats "https://github.com/chronox24/esports/blob/main/esports_backend/utils/statsCalculator.js"
click node_predictor "https://github.com/chronox24/esports/blob/main/esports_backend/utils/predictor.js"
click node_scraper "https://github.com/chronox24/esports/blob/main/esports_backend/utils/youtubeScraper.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_landing,node_login,node_hub,node_api toneBlue
class node_tournaments,node_brackets,node_entry,node_prs,node_mapping,node_history,node_entrysummary toneAmber
class node_insightsdash,node_leaderboards,node_rankings,node_playerstats,node_predictions,node_records,node_agentbadge toneMint
class node_backend,node_store,node_stats,node_predictor,node_scraper toneRose
class node_visitor,node_youtube toneIndigo
```

## Components

### Web experience

- [Route and auth shell](https://github.com/chronox24/esports/blob/main/esport_frontend/src/App.jsx): `esport_frontend/src/App.jsx`
- [Landing pages](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/landing/Home.jsx): `esport_frontend/src/screens/landing/Home.jsx`
- [Login and recovery](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/landing/LoginScreen.jsx): `esport_frontend/src/screens/landing/LoginScreen.jsx`
- [Dashboard navigation](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/MainUIScreen.jsx): `esport_frontend/src/screens/main/MainUIScreen.jsx`
- [API client](https://github.com/chronox24/esports/blob/main/esport_frontend/src/utils/api.js): `esport_frontend/src/utils/api.js`

### Tournament operations

- [Tournament hub](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Tournament.jsx): `esport_frontend/src/screens/main/Tournament.jsx`
- [Brackets](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Bracket.jsx): `esport_frontend/src/screens/main/Bracket.jsx`
- [Match data entry](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/DataEntry.jsx): `esport_frontend/src/screens/main/DataEntry.jsx`
- [PRS entry](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PRSEntry.jsx): `esport_frontend/src/screens/main/PRSEntry.jsx`
- [Map and veto mapping](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Mapping.jsx): `esport_frontend/src/screens/main/Mapping.jsx`
- [Tournament history](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/TournamentHistory.jsx): `esport_frontend/src/screens/main/TournamentHistory.jsx`
- [Entry summaries](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/EntrySummary.jsx): `esport_frontend/src/screens/main/EntrySummary.jsx`

### Player insights

- [Analytics dashboard](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Analytics.jsx): `esport_frontend/src/screens/main/Analytics.jsx`
- [Leaderboards](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Leaderboards.jsx): `esport_frontend/src/screens/main/Leaderboards.jsx`
- [Player rankings](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PlayerRankings.jsx): `esport_frontend/src/screens/main/PlayerRankings.jsx`
- [Player statistics](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/PlayerStatsTab.jsx): `esport_frontend/src/screens/main/PlayerStatsTab.jsx`
- [Match predictions](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/Predictions.jsx): `esport_frontend/src/screens/main/Predictions.jsx`
- [Raw records](https://github.com/chronox24/esports/blob/main/esport_frontend/src/screens/main/RawRecords.jsx): `esport_frontend/src/screens/main/RawRecords.jsx`
- [Agent display helper](https://github.com/chronox24/esports/blob/main/esport_frontend/src/utils/agentHelper.jsx): `esport_frontend/src/utils/agentHelper.jsx`

### API and services

- [Express API](https://github.com/chronox24/esports/blob/main/esports_backend/server.js): `esports_backend/server.js`
- **Supabase data store**
- [Statistics calculator](https://github.com/chronox24/esports/blob/main/esports_backend/utils/statsCalculator.js): `esports_backend/utils/statsCalculator.js`
- [Prediction engine](https://github.com/chronox24/esports/blob/main/esports_backend/utils/predictor.js): `esports_backend/utils/predictor.js`
- [YouTube highlight scraper](https://github.com/chronox24/esports/blob/main/esports_backend/utils/youtubeScraper.js): `esports_backend/utils/youtubeScraper.js`

### Other components

- **Visitor**
- **YouTube**

## Connections

- Visitor → Route and auth shell: opens
- Route and auth shell → Landing pages: routes to (evidence: `esport_frontend/src/App.jsx`)
- Route and auth shell → Dashboard navigation: routes after login (evidence: `esport_frontend/src/App.jsx`)
- Route and auth shell → Login and recovery: login flow
- Landing pages → API client: loads highlights (evidence: `esport_frontend/src/screens/landing/Home.jsx`)
- Login and recovery → API client: sends auth requests (evidence: `esport_frontend/src/screens/landing/LoginScreen.jsx`)
- Dashboard navigation → Tournament hub: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Match data entry: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Map and veto mapping: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → PRS entry: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Leaderboards: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Analytics dashboard: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Player rankings: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Player statistics: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Raw records: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Dashboard navigation → Match predictions: renders feature (evidence: `esport_frontend/src/screens/main/MainUIScreen.jsx`)
- Tournament hub → Brackets: embeds (evidence: `esport_frontend/src/screens/main/Tournament.jsx`)
- Tournament hub → Match predictions: embeds (evidence: `esport_frontend/src/screens/main/Tournament.jsx`)
- Tournament hub → Map and veto mapping: embeds (evidence: `esport_frontend/src/screens/main/Tournament.jsx`)
- Tournament hub → Match data entry: embeds (evidence: `esport_frontend/src/screens/main/Tournament.jsx`)
- Match data entry → API client: reads and submits records (evidence: `esport_frontend/src/screens/main/DataEntry.jsx`)
- Match data entry → Agent display helper: renders agents (evidence: `esport_frontend/src/screens/main/DataEntry.jsx`)
- Tournament hub → API client: loads matches and brackets (evidence: `esport_frontend/src/screens/main/Tournament.jsx`)
- API client → Express API: sends HTTP requests
- Express API → Supabase data store: reads and writes (evidence: `esports_backend/server.js`)
- Express API → Statistics calculator: uses calculator (evidence: `esports_backend/server.js`)
- Express API → Prediction engine: uses engine (evidence: `esports_backend/server.js`)
- Express API → YouTube highlight scraper: uses scraper (evidence: `esports_backend/server.js`)
- YouTube highlight scraper → YouTube: fetches videos (evidence: `esports_backend/utils/youtubeScraper.js`)