# adcident12/fpl-dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/adcident12/fpl-dashboard
- Repository: https://github.com/adcident12/fpl-dashboard

## Overview

FPL Dashboard is a Fantasy Premier League decision-support web app: users inspect public FPL data and can enter team IDs for squad, transfer, captain, chip, and rivalry analysis. The main path is React app → API client → Express routes → FPL data and analysis → displayed views. The tree and excerpts establish the major views and backend capabilities, but do not show every view’s API calls or every analysis implementation, so those specific links are omitted.

Main entry points: [`client/src/App.jsx`](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/App.jsx) (App navigation), [`client/src/api.js`](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/api.js) (API client), [`client/src/RivalryView.jsx`](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/RivalryView.jsx) (Rivalry view), [`server/fpl.js`](https://github.com/adcident12/fpl-dashboard/blob/main/server/fpl.js) (FPL data and analysis)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Dashboard client"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App navigation<br/>[App.jsx]"]
  node_players["Player table<br/>[TableView.jsx]"]
  node_fixtures["Fixture views<br/>[FixtureGrid.jsx]"]
  node_squad["Squad view<br/>[SquadView.jsx]"]
  node_suggestions["Recommendations"]
  node_chips["Chip planner<br/>[ChipsView.jsx]"]
  node_bonus["Live bonus<br/>[BonusView.jsx]"]
  node_rivalry["Rivalry view<br/>[RivalryView.jsx]"]
  node_setpieces["Set-piece view<br/>[SetPiecesView.jsx]"]
  node_dreamteam["Dream Team view<br/>[DreamTeamView.jsx]"]
  node_team_id["Saved team IDs<br/>[useTeamId.js]"]
end

subgraph group_api["HTTP API"]
  node_api_client["API client<br/>[api.js]"]
  node_routes["Express routes<br/>[index.js]"]
end

subgraph group_domain["FPL data and analysis"]
  node_fpl["FPL data and analysis<br/>[fpl.js]"]
end

subgraph group_state["Cached state"]
  node_cache[("Disk cache<br/>[cache.js]")]
end

node_user(("Dashboard user"))
node_fpl_service["Public FPL API"]
node_disk[("Cache files")]

node_user -->|"opens dashboard"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"selects view"| node_players
node_app -->|"selects view"| node_fixtures
node_app -->|"selects view"| node_squad
node_app -->|"selects view"| node_suggestions
node_app -->|"selects view"| node_chips
node_app -->|"selects view"| node_bonus
node_app -->|"selects view"| node_rivalry
node_app -->|"selects view"| node_setpieces
node_app -->|"selects view"| node_dreamteam
node_app -->|"fetches players"| node_api_client
node_suggestions -->|"requests analysis"| node_api_client
node_rivalry -->|"requests squads"| node_api_client
node_api_client -->|"HTTP requests"| node_routes
node_routes -->|"dispatches data and analysis"| node_fpl
node_fpl -->|"fetches FPL data"| node_fpl_service
node_fpl -->|"reads and writes"| node_cache
node_cache -->|"persists entries"| node_disk
node_rivalry -->|"saves team IDs"| node_team_id

click node_entry "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/main.jsx"
click node_app "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/App.jsx"
click node_players "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/TableView.jsx"
click node_fixtures "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/FixtureGrid.jsx"
click node_squad "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SquadView.jsx"
click node_suggestions "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SuggestionsView.jsx"
click node_chips "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/ChipsView.jsx"
click node_bonus "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/BonusView.jsx"
click node_rivalry "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/RivalryView.jsx"
click node_setpieces "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SetPiecesView.jsx"
click node_dreamteam "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/DreamTeamView.jsx"
click node_api_client "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/api.js"
click node_routes "https://github.com/adcident12/fpl-dashboard/blob/main/server/index.js"
click node_fpl "https://github.com/adcident12/fpl-dashboard/blob/main/server/fpl.js"
click node_cache "https://github.com/adcident12/fpl-dashboard/blob/main/server/cache.js"
click node_team_id "https://github.com/adcident12/fpl-dashboard/blob/main/client/src/useTeamId.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_entry,node_app,node_players,node_fixtures,node_squad,node_suggestions,node_chips,node_bonus,node_rivalry,node_setpieces,node_dreamteam,node_team_id,node_user toneBlue
class node_api_client,node_routes,node_disk toneAmber
class node_fpl,node_fpl_service toneMint
class node_cache toneRose
```

## Components

### Dashboard client

- [React entry](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/main.jsx): `client/src/main.jsx`
- [App navigation](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Player table](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/TableView.jsx): `client/src/TableView.jsx`
- [Fixture views](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/FixtureGrid.jsx): `client/src/FixtureGrid.jsx`
- [Squad view](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SquadView.jsx): `client/src/SquadView.jsx`
- [Recommendations](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SuggestionsView.jsx): `client/src/SuggestionsView.jsx`
- [Chip planner](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/ChipsView.jsx): `client/src/ChipsView.jsx`
- [Live bonus](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/BonusView.jsx): `client/src/BonusView.jsx`
- [Rivalry view](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/RivalryView.jsx): `client/src/RivalryView.jsx`
- [Set-piece view](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/SetPiecesView.jsx): `client/src/SetPiecesView.jsx`
- [Dream Team view](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/DreamTeamView.jsx): `client/src/DreamTeamView.jsx`
- [Saved team IDs](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/useTeamId.js): `client/src/useTeamId.js`

### HTTP API

- [API client](https://github.com/adcident12/fpl-dashboard/blob/main/client/src/api.js): `client/src/api.js`
- [Express routes](https://github.com/adcident12/fpl-dashboard/blob/main/server/index.js): `server/index.js`

### FPL data and analysis

- [FPL data and analysis](https://github.com/adcident12/fpl-dashboard/blob/main/server/fpl.js): `server/fpl.js`

### Cached state

- [Disk cache](https://github.com/adcident12/fpl-dashboard/blob/main/server/cache.js): `server/cache.js`

### Other components

- **Dashboard user**
- **Public FPL API**
- **Cache files**

## Connections

- Dashboard user → React entry: opens dashboard
- React entry → App navigation: renders
- App navigation → Player table: selects view
- App navigation → Fixture views: selects view
- App navigation → Squad view: selects view
- App navigation → Recommendations: selects view
- App navigation → Chip planner: selects view
- App navigation → Live bonus: selects view
- App navigation → Rivalry view: selects view
- App navigation → Set-piece view: selects view
- App navigation → Dream Team view: selects view
- App navigation → API client: fetches players
- Recommendations → API client: requests analysis
- Rivalry view → API client: requests squads
- API client → Express routes: HTTP requests
- Express routes → FPL data and analysis: dispatches data and analysis
- FPL data and analysis → Public FPL API: fetches FPL data
- FPL data and analysis → Disk cache: reads and writes
- Disk cache → Cache files: persists entries
- Rivalry view → Saved team IDs: saves team IDs