# raihans-code/alkaran-bulls-tournament-client architecture

> Architecture diagram of the GitHub repository raihans-code/alkaran-bulls-tournament-client, 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/raihans-code/alkaran-bulls-tournament-client
- Repository: https://github.com/raihans-code/alkaran-bulls-tournament-client

## Overview

Alkaran Bulls is a React client for a cricket league, covering season selection, team and player management, live auctions, match viewing, standings, and administration. The main live workflow is a user selecting a season and bidding in its auction; administrators also record ball-by-ball scores, which feed match views and scoreboards. The route map and sampled auth, season, auction, and scoring code support the edges shown. Other feature pages are present in the tree, but their API wiring was not sampled, so it is left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/App.jsx) (Route application), [`src/services/api.js`](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/api.js) (REST client), [`src/services/socket.js`](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/socket.js) (Realtime client), [`src/context/AuthContext.jsx`](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/context/AuthContext.jsx) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App and access"]
  node_app["Route application<br/>[App.jsx]"]
  node_auth["Authentication state<br/>[AuthContext.jsx]"]
  node_protected["Access guard<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Dashboards<br/>[UserDashboard.jsx]"]
end

subgraph group_season["Season and squads"]
  node_seasons["Season management<br/>[Seasons.jsx]"]
  node_season_detail["Season details<br/>[SeasonDetail.jsx]"]
  node_season_state["Selected season<br/>[SeasonContext.jsx]"]
  node_teams["Teams and rosters<br/>[Teams.jsx]"]
  node_players["Player directory<br/>[Players.jsx]"]
  node_my_team["Owner team<br/>[MyTeam.jsx]"]
end

subgraph group_auction["Live auction"]
  node_auction_page["Auction screen<br/>[Auction.jsx]"]
  node_auction_hook["Auction state and bids<br/>[useAuction.js]"]
end

subgraph group_matches["Matches and scoring"]
  node_matches_page["Match listings<br/>[Matches.jsx]"]
  node_match_detail["Match details<br/>[MatchDetail.jsx]"]
  node_scoring["Scoring console<br/>[AdminScores.jsx]"]
  node_live_match["Live match polling<br/>[useLiveMatch.js]"]
  node_scoreboard["Match scoreboard<br/>[Scoreboard.jsx]"]
  node_standings["Points and history<br/>[PointsTable.jsx]"]
end

subgraph group_services["Client services"]
  node_api["REST client<br/>[api.js]"]
  node_socket_client["Realtime client<br/>[socket.js]"]
end

node_visitor(("League user"))
node_admin(("Administrator"))
node_backend{{"Application backend"}}
node_socket_server{{"Realtime server"}}

node_visitor -->|"opens"| node_app
node_admin -->|"opens"| node_app
node_app -->|"checks identity"| node_auth
node_app -->|"guards routes"| node_protected
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_seasons
node_app -->|"routes to"| node_season_detail
node_app -->|"routes to"| node_teams
node_app -->|"routes to"| node_players
node_app -->|"routes to"| node_my_team
node_app -->|"routes to"| node_auction_page
node_app -->|"routes to"| node_matches_page
node_app -->|"routes to"| node_match_detail
node_app -->|"routes to"| node_scoring
node_app -->|"routes to"| node_scoreboard
node_app -->|"routes to"| node_standings
node_auth -->|"authenticates"| node_api
node_auth -->|"resets connection"| node_socket_client
node_season_state -->|"loads seasons"| node_api
node_season_state -->|"joins season"| node_socket_client
node_auction_hook -->|"polls state; fallback bids"| node_api
node_auction_hook -->|"sends bids"| node_socket_client
node_auction_page -->|"uses auction state"| node_auction_hook
node_scoring -->|"records scoring"| node_api
node_scoring -->|"loads live match"| node_live_match
node_live_match -->|"polls match"| node_api
node_api -->|"REST requests"| node_backend
node_socket_client -->|"realtime events"| node_socket_server

click node_app "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/App.jsx"
click node_auth "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/context/AuthContext.jsx"
click node_protected "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/components/ProtectedRoute.jsx"
click node_dashboard "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/UserDashboard.jsx"
click node_seasons "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Seasons.jsx"
click node_season_detail "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/SeasonDetail.jsx"
click node_season_state "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/context/SeasonContext.jsx"
click node_teams "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Teams.jsx"
click node_players "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Players.jsx"
click node_my_team "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/MyTeam.jsx"
click node_auction_page "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Auction.jsx"
click node_auction_hook "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/hooks/useAuction.js"
click node_matches_page "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Matches.jsx"
click node_match_detail "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/MatchDetail.jsx"
click node_scoring "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/admin/AdminScores.jsx"
click node_live_match "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/hooks/useLiveMatch.js"
click node_scoreboard "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Scoreboard.jsx"
click node_standings "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/PointsTable.jsx"
click node_api "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/api.js"
click node_socket_client "https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/socket.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_auth,node_protected,node_dashboard,node_visitor toneBlue
class node_seasons,node_season_detail,node_season_state,node_teams,node_players,node_my_team toneAmber
class node_auction_page,node_auction_hook,node_socket_server toneMint
class node_matches_page,node_match_detail,node_scoring,node_live_match,node_scoreboard,node_standings toneRose
class node_api,node_socket_client,node_admin,node_backend toneIndigo
```

## Components

### App and access

- [Route application](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/App.jsx): `src/App.jsx`
- [Authentication state](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Access guard](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Dashboards](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/UserDashboard.jsx): `src/pages/UserDashboard.jsx`

### Season and squads

- [Season management](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Seasons.jsx): `src/pages/Seasons.jsx`
- [Season details](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/SeasonDetail.jsx): `src/pages/SeasonDetail.jsx`
- [Selected season](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/context/SeasonContext.jsx): `src/context/SeasonContext.jsx`
- [Teams and rosters](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Teams.jsx): `src/pages/Teams.jsx`
- [Player directory](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Players.jsx): `src/pages/Players.jsx`
- [Owner team](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/MyTeam.jsx): `src/pages/MyTeam.jsx`

### Live auction

- [Auction screen](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Auction.jsx): `src/pages/Auction.jsx`
- [Auction state and bids](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/hooks/useAuction.js): `src/hooks/useAuction.js`

### Matches and scoring

- [Match listings](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Matches.jsx): `src/pages/Matches.jsx`
- [Match details](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/MatchDetail.jsx): `src/pages/MatchDetail.jsx`
- [Scoring console](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/admin/AdminScores.jsx): `src/pages/admin/AdminScores.jsx`
- [Live match polling](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/hooks/useLiveMatch.js): `src/hooks/useLiveMatch.js`
- [Match scoreboard](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/Scoreboard.jsx): `src/pages/Scoreboard.jsx`
- [Points and history](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/pages/PointsTable.jsx): `src/pages/PointsTable.jsx`

### Client services

- [REST client](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/api.js): `src/services/api.js`
- [Realtime client](https://github.com/raihans-code/alkaran-bulls-tournament-client/blob/main/src/services/socket.js): `src/services/socket.js`

### Other components

- **League user**
- **Administrator**
- **Application backend**
- **Realtime server**

## Connections

- League user → Route application: opens
- Administrator → Route application: opens
- Route application → Authentication state: checks identity
- Route application → Access guard: guards routes
- Route application → Dashboards: routes to
- Route application → Season management: routes to
- Route application → Season details: routes to
- Route application → Teams and rosters: routes to
- Route application → Player directory: routes to
- Route application → Owner team: routes to
- Route application → Auction screen: routes to
- Route application → Match listings: routes to
- Route application → Match details: routes to
- Route application → Scoring console: routes to
- Route application → Match scoreboard: routes to
- Route application → Points and history: routes to
- Authentication state → REST client: authenticates
- Authentication state → Realtime client: resets connection
- Selected season → REST client: loads seasons
- Selected season → Realtime client: joins season
- Auction state and bids → REST client: polls state; fallback bids
- Auction state and bids → Realtime client: sends bids
- Auction screen → Auction state and bids: uses auction state
- Scoring console → REST client: records scoring
- Scoring console → Live match polling: loads live match
- Live match polling → REST client: polls match
- REST client → Application backend: REST requests
- Realtime client → Realtime server: realtime events