# argieee/esport_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/argieee/esport_frontend
- Repository: https://github.com/argieee/esport_frontend

## Overview

This repository is an esports tournament and team-management application: visitors enter through a public landing site, log in, and reach a dashboard with tournament, roster, match-entry, and analytics areas. The sampled match-entry screen fetches teams and players and submits match and statistics data through the shared API utility; the backend handles API requests and accesses Supabase. The tree also shows bracket, rankings, prediction, administration, and audit capabilities. Their individual wiring is not established by the excerpts, and no README was provided, so those links are omitted where uncertain.

Main entry points: [`esports_backend/server.js`](https://github.com/argieee/esport_frontend/blob/main/esports_backend/server.js) (Backend API server), [`esport_frontend/src/App.jsx`](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/App.jsx) (Route and session app), [`esport_frontend/src/screens/main/DataEntry.jsx`](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/DataEntry.jsx) (Match data entry), [`esport_frontend/src/screens/landing/Home.jsx`](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/landing/Home.jsx) (Public landing pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web entry"]
  node_app["Route and session app<br/>[App.jsx]"]
  node_landing["Public landing pages<br/>[Home.jsx]"]
  node_login["Login screen<br/>[LoginScreen.jsx]"]
  node_mainui["Dashboard shell<br/>[MainUIScreen.jsx]"]
end

subgraph group_tournaments["Tournament operations"]
  node_tournament["Tournament management<br/>[Tournament.jsx]"]
  node_bracket["Bracket management<br/>[Bracket.jsx]"]
  node_dataentry["Match data entry<br/>[DataEntry.jsx]"]
  node_standings["Standings calculation"]
  node_summary["Match summaries<br/>[EntrySummary.jsx]"]
end

subgraph group_analytics["Stats and insights"]
  node_analytics["Analytics dashboard<br/>[Analytics.jsx]"]
  node_rankings["Player rankings<br/>[PlayerRankings.jsx]"]
  node_predictions["Match predictions<br/>[Predictions.jsx]"]
  node_statscalc["Player stats calculations<br/>[statsCalculator.js]"]
end

subgraph group_management["Admin and rosters"]
  node_players["Player management"]
  node_admin["Admin and audit<br/>[Admin.jsx]"]
end

subgraph group_backend["API and persistence"]
  node_apiutil["Frontend API utility<br/>[api.js]"]
  node_server["Backend API server<br/>[server.js]"]
  node_predictor["Prediction logic<br/>[predictor.js]"]
end

node_visitor(("Visitor or user"))
node_supabase[("Supabase")]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_landing -->|"opens login"| node_login
node_app -->|"routes after login"| node_mainui
node_tournament -->|"renders"| node_bracket
node_dataentry -->|"calls"| node_apiutil
node_apiutil -->|"sends API requests"| node_server
node_server -->|"queries and updates"| node_supabase
node_dataentry -->|"submits match data"| node_server
node_server -.->|"calculates statistics"| node_statscalc
node_server -.->|"generates predictions"| node_predictor
node_predictor -->|"reads match records"| node_supabase

click node_app "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/App.jsx"
click node_landing "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/landing/Home.jsx"
click node_login "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/landing/LoginScreen.jsx"
click node_mainui "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/MainUIScreen.jsx"
click node_tournament "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Tournament.jsx"
click node_bracket "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Bracket.jsx"
click node_dataentry "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/DataEntry.jsx"
click node_standings "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/utils/calculateStandings.js"
click node_summary "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/EntrySummary.jsx"
click node_analytics "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Analytics.jsx"
click node_rankings "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/PlayerRankings.jsx"
click node_predictions "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Predictions.jsx"
click node_statscalc "https://github.com/argieee/esport_frontend/blob/main/esports_backend/utils/statsCalculator.js"
click node_players "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/PlayerManagement.jsx"
click node_admin "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Admin.jsx"
click node_apiutil "https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/utils/api.js"
click node_server "https://github.com/argieee/esport_frontend/blob/main/esports_backend/server.js"
click node_predictor "https://github.com/argieee/esport_frontend/blob/main/esports_backend/utils/predictor.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_mainui,node_visitor toneBlue
class node_tournament,node_bracket,node_dataentry,node_standings,node_summary,node_supabase toneAmber
class node_analytics,node_rankings,node_predictions,node_statscalc toneMint
class node_players,node_admin toneRose
class node_apiutil,node_server,node_predictor toneIndigo
```

## Components

### Web entry

- [Route and session app](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/App.jsx): `esport_frontend/src/App.jsx`
- [Public landing pages](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/landing/Home.jsx): `esport_frontend/src/screens/landing/Home.jsx`
- [Login screen](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/landing/LoginScreen.jsx): `esport_frontend/src/screens/landing/LoginScreen.jsx`
- [Dashboard shell](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/MainUIScreen.jsx): `esport_frontend/src/screens/main/MainUIScreen.jsx`

### Tournament operations

- [Tournament management](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Tournament.jsx): `esport_frontend/src/screens/main/Tournament.jsx`
- [Bracket management](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Bracket.jsx): `esport_frontend/src/screens/main/Bracket.jsx`
- [Match data entry](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/DataEntry.jsx): `esport_frontend/src/screens/main/DataEntry.jsx`
- [Standings calculation](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/utils/calculateStandings.js): `esport_frontend/src/utils/calculateStandings.js`
- [Match summaries](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/EntrySummary.jsx): `esport_frontend/src/screens/main/EntrySummary.jsx`

### Stats and insights

- [Analytics dashboard](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Analytics.jsx): `esport_frontend/src/screens/main/Analytics.jsx`
- [Player rankings](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/PlayerRankings.jsx): `esport_frontend/src/screens/main/PlayerRankings.jsx`
- [Match predictions](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Predictions.jsx): `esport_frontend/src/screens/main/Predictions.jsx`
- [Player stats calculations](https://github.com/argieee/esport_frontend/blob/main/esports_backend/utils/statsCalculator.js): `esports_backend/utils/statsCalculator.js`

### Admin and rosters

- [Player management](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/PlayerManagement.jsx): `esport_frontend/src/screens/main/PlayerManagement.jsx`
- [Admin and audit](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/screens/main/Admin.jsx): `esport_frontend/src/screens/main/Admin.jsx`

### API and persistence

- [Frontend API utility](https://github.com/argieee/esport_frontend/blob/main/esport_frontend/src/utils/api.js): `esport_frontend/src/utils/api.js`
- [Backend API server](https://github.com/argieee/esport_frontend/blob/main/esports_backend/server.js): `esports_backend/server.js`
- [Prediction logic](https://github.com/argieee/esport_frontend/blob/main/esports_backend/utils/predictor.js): `esports_backend/utils/predictor.js`

### Other components

- **Visitor or user**
- **Supabase**

## Connections

- Visitor or user → Route and session app: opens
- Route and session app → Public landing pages: routes to
- Public landing pages → Login screen: opens login
- Route and session app → Dashboard shell: routes after login
- Tournament management → Bracket management: renders
- Match data entry → Frontend API utility: calls
- Frontend API utility → Backend API server: sends API requests
- Backend API server → Supabase: queries and updates
- Match data entry → Backend API server: submits match data
- Backend API server → Player stats calculations: calculates statistics
- Backend API server → Prediction logic: generates predictions
- Prediction logic → Supabase: reads match records