# sakusanpuwan/fantasy_league_full_stack architecture

> Architecture diagram of the GitHub repository sakusanpuwan/fantasy_league_full_stack, 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/sakusanpuwan/fantasy_league_full_stack
- Repository: https://github.com/sakusanpuwan/fantasy_league_full_stack
- Video tour (about a minute): https://gitdiagram.com/sakusanpuwan/fantasy_league_full_stack/video

## Overview

Bright Football League is a fantasy-football web app: users register, select a budget-limited player team, and view scores, rankings, fixtures, and player statistics. The React home container coordinates page data and calls the Spring REST API; authentication is handled through the API’s JWT endpoints. The README documents PostgreSQL persistence and Fantasy Premier League data sourcing. Backend implementation details were not sampled, so internal controller-to-service and service-to-repository wiring is not inferred.

Main entry points: [`frontend/fantasy-league/src/containers/HomeContainer.js`](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/containers/HomeContainer.js) (Home and routing), [`frontend/fantasy-league/src/services/auth.service.js`](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/services/auth.service.js) (Auth client), [`frontend/fantasy-league/src/App.js`](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/App.js) (React app), [`frontend/fantasy-league/src/components/Login.js`](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Login.js) (Login and signup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["React website"]
  node_app["React app<br/>[App.js]"]
  node_home["Home and routing<br/>[HomeContainer.js]"]
end

subgraph group_identity["Accounts and access"]
  node_login["Login and signup<br/>[Login.js]"]
  node_signup["Signup form<br/>[SignUp.js]"]
  node_authclient["Auth client<br/>[auth.service.js]"]
  node_authheader["JWT header<br/>[auth-header.js]"]
  node_authcontroller["Auth endpoints"]
  node_usercontroller["User endpoints"]
  node_jwt["JWT security"]
end

subgraph group_fantasy["Fantasy football"]
  node_fixtures["Fixtures view<br/>[Fixtures.jsx]"]
  node_team["Team view<br/>[Team.js]"]
  node_playersearch["Player search<br/>[TeamSearch.js]"]
  node_stats["Player statistics<br/>[Stats.js]"]
  node_leaderboard["Leaderboard<br/>[LeaderBoard.js]"]
  node_playercontroller["Player endpoints"]
end

subgraph group_backend["Spring API and data"]
  node_api["Spring REST API"]
  node_datacontroller["Football data endpoints"]
  node_database[("PostgreSQL")]
end

node_visitor(("Website user"))
node_fpl{{"Fantasy Premier League API"}}

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_home
node_home -->|"routes"| node_fixtures
node_home -->|"routes"| node_team
node_home -->|"routes"| node_stats
node_home -->|"routes"| node_leaderboard
node_home -->|"routes"| node_login
node_login -->|"authenticates"| node_authclient
node_signup -->|"registers"| node_authclient
node_authclient -->|"login request"| node_authcontroller
node_authclient -->|"signup request"| node_usercontroller
node_home -->|"fetches fixtures and data"| node_datacontroller
node_home -->|"fetches players"| node_playercontroller
node_home -->|"fetches users and updates teams"| node_usercontroller
node_team -->|"offers search"| node_playersearch
node_home -->|"persists users and players"| node_database
node_fpl -.->|"supplies football data"| node_api
node_jwt -->|"secures authentication"| node_authcontroller
node_authheader -->|"provides token"| node_jwt

click node_app "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/App.js"
click node_home "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/containers/HomeContainer.js"
click node_fixtures "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Fixtures.jsx"
click node_team "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Team.js"
click node_playersearch "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/TeamSearch.js"
click node_stats "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Stats.js"
click node_leaderboard "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/LeaderBoard.js"
click node_login "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Login.js"
click node_signup "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/SignUp.js"
click node_authclient "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/services/auth.service.js"
click node_authheader "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/services/auth-header.js"
click node_api "https://github.com/sakusanpuwan/fantasy_league_full_stack/tree/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi"
click node_authcontroller "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/AuthController.java"
click node_usercontroller "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/UserController.java"
click node_playercontroller "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/PlayerController.java"
click node_datacontroller "https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/DataController.java"
click node_jwt "https://github.com/sakusanpuwan/fantasy_league_full_stack/tree/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/springSecurityJwt"

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_home,node_visitor toneBlue
class node_login,node_signup,node_authclient,node_authheader,node_authcontroller,node_usercontroller,node_jwt toneAmber
class node_fixtures,node_team,node_playersearch,node_stats,node_leaderboard,node_playercontroller,node_fpl toneMint
class node_api,node_datacontroller,node_database toneRose
```

## Components

### React website

- [React app](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/App.js): `frontend/fantasy-league/src/App.js`
- [Home and routing](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/containers/HomeContainer.js): `frontend/fantasy-league/src/containers/HomeContainer.js`

### Accounts and access

- [Login and signup](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Login.js): `frontend/fantasy-league/src/components/Login.js`
- [Signup form](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/SignUp.js): `frontend/fantasy-league/src/components/SignUp.js`
- [Auth client](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/services/auth.service.js): `frontend/fantasy-league/src/services/auth.service.js`
- [JWT header](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/services/auth-header.js): `frontend/fantasy-league/src/services/auth-header.js`
- [Auth endpoints](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/AuthController.java): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/AuthController.java`
- [User endpoints](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/UserController.java): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/UserController.java`
- [JWT security](https://github.com/sakusanpuwan/fantasy_league_full_stack/tree/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/springSecurityJwt): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/springSecurityJwt`

### Fantasy football

- [Fixtures view](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Fixtures.jsx): `frontend/fantasy-league/src/components/Fixtures.jsx`
- [Team view](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Team.js): `frontend/fantasy-league/src/components/Team.js`
- [Player search](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/TeamSearch.js): `frontend/fantasy-league/src/components/TeamSearch.js`
- [Player statistics](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/Stats.js): `frontend/fantasy-league/src/components/Stats.js`
- [Leaderboard](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/frontend/fantasy-league/src/components/LeaderBoard.js): `frontend/fantasy-league/src/components/LeaderBoard.js`
- [Player endpoints](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/PlayerController.java): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/PlayerController.java`

### Spring API and data

- [Spring REST API](https://github.com/sakusanpuwan/fantasy_league_full_stack/tree/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi`
- [Football data endpoints](https://github.com/sakusanpuwan/fantasy_league_full_stack/blob/main/backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/DataController.java): `backend/fantasy-league-api/src/main/java/com/example/fullstackproject/fantasyleagueapi/controllers/DataController.java`
- **PostgreSQL**

### Other components

- **Website user**
- **Fantasy Premier League API**

## Connections

- Website user → React app: opens
- React app → Home and routing: renders
- Home and routing → Fixtures view: routes
- Home and routing → Team view: routes
- Home and routing → Player statistics: routes
- Home and routing → Leaderboard: routes
- Home and routing → Login and signup: routes
- Login and signup → Auth client: authenticates
- Signup form → Auth client: registers
- Auth client → Auth endpoints: login request
- Auth client → User endpoints: signup request
- Home and routing → Football data endpoints: fetches fixtures and data
- Home and routing → Player endpoints: fetches players
- Home and routing → User endpoints: fetches users and updates teams
- Team view → Player search: offers search
- Home and routing → PostgreSQL: persists users and players
- Fantasy Premier League API → Spring REST API: supplies football data
- JWT security → Auth endpoints: secures authentication
- JWT header → JWT security: provides token