# xiisuma/ctf_arena architecture

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

- Interactive diagram: https://gitdiagram.com/xiisuma/ctf_arena
- Repository: https://github.com/xiisuma/ctf_arena

## Overview

CTF Arena is a full-stack Capture The Flag platform: players sign in, browse categorized challenges, submit flags, and receive points and achievement progress; rankings and profiles expose broader player progress. The React app also supports administration, timed/event play, notifications, and live updates. The README documents the PHP-to-MySQL submission path and the WebSocket notification protocol. Source excerpts confirm the route setup, shared HTTP client, selected data hooks, and WebSocket behavior; links for unsampled page and backend internals are limited to documented relationships.

Main entry points: [`src/infrastructure/api/client.ts`](https://github.com/xiisuma/ctf_arena/blob/main/src/infrastructure/api/client.ts) (HTTP API client), [`src/App.tsx`](https://github.com/xiisuma/ctf_arena/blob/main/src/App.tsx) (App and routes), [`src/features/settings/usePlayersAdmin.ts`](https://github.com/xiisuma/ctf_arena/blob/main/src/features/settings/usePlayersAdmin.ts) (Player administration), [`src/features/challenges/api.ts`](https://github.com/xiisuma/ctf_arena/blob/main/src/features/challenges/api.ts) (Challenge API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["React application"]
  node_app["App and routes<br/>[App.tsx]"]
  node_pages["Product pages"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
end

subgraph group_play["Challenge play"]
  node_categories[("Category store<br/>[store.ts]")]
  node_challengehook["Challenge loading<br/>[useChallenges.ts]"]
  node_challengeapi["Challenge API<br/>[api.ts]"]
  node_chrono["Chronometer<br/>[useChronometer.ts]"]
  node_event["Active event<br/>[useActiveEvent.ts]"]
  node_ctfstate["CTF state"]
end

subgraph group_progress["Progress and community"]
  node_achievementhook["Achievement loading<br/>[useAchievements.ts]"]
  node_achievementapi["Achievement API<br/>[api.ts]"]
  node_ranking["Ranking data<br/>[api.ts]"]
  node_profile["Profile and dashboard<br/>[useDashboard.ts]"]
  node_friends["Friends<br/>[api.ts]"]
  node_notifications["Notifications"]
end

subgraph group_admin["Administration"]
  node_settings["Admin settings<br/>[SettingsPage.tsx]"]
  node_adminplayers["Player administration<br/>[usePlayersAdmin.ts]"]
end

subgraph group_services["Backend services"]
  node_client["HTTP API client<br/>[client.ts]"]
  node_backend["PHP API<br/>[api.php]"]
  node_database[("MySQL data")]
  node_wsclient["WebSocket hook<br/>[useWebSocket.ts]"]
  node_wsserver["WebSocket server<br/>[server.js]"]
end

node_player(("Player"))

node_player -->|"uses"| node_app
node_app -->|"routes to"| node_pages
node_app -->|"provides auth"| node_auth
node_app -->|"loads categories"| node_categories
node_challengehook -->|"loads"| node_categories
node_challengehook -->|"loads challenges"| node_challengeapi
node_challengeapi -->|"requests data"| node_client
node_achievementhook -->|"loads"| node_achievementapi
node_achievementhook -->|"loads players"| node_ranking
node_achievementapi -->|"requests data"| node_client
node_ranking -->|"requests data"| node_client
node_profile -->|"loads players"| node_ranking
node_profile -->|"loads flags and challenges"| node_challengeapi
node_friends -->|"requests data"| node_client
node_notifications -->|"receives updates"| node_wsclient
node_event -->|"refreshes on events"| node_wsclient
node_event -->|"loads event"| node_client
node_app -->|"provides state"| node_ctfstate
node_settings -->|"uses"| node_adminplayers
node_adminplayers -->|"loads players"| node_ranking
node_adminplayers -->|"loads challenges and flags"| node_challengeapi
node_adminplayers -->|"loads achievements"| node_achievementapi
node_client -->|"HTTP requests"| node_backend
node_backend -->|"reads and writes"| node_database
node_backend -.->|"notifies"| node_wsserver
node_wsclient -->|"connects and registers"| node_wsserver

click node_app "https://github.com/xiisuma/ctf_arena/blob/main/src/App.tsx"
click node_pages "https://github.com/xiisuma/ctf_arena/tree/main/src/pages"
click node_auth "https://github.com/xiisuma/ctf_arena/blob/main/src/features/auth/AuthContext.tsx"
click node_categories "https://github.com/xiisuma/ctf_arena/blob/main/src/features/categories/store.ts"
click node_challengehook "https://github.com/xiisuma/ctf_arena/blob/main/src/features/challenges/useChallenges.ts"
click node_challengeapi "https://github.com/xiisuma/ctf_arena/blob/main/src/features/challenges/api.ts"
click node_chrono "https://github.com/xiisuma/ctf_arena/blob/main/src/shared/hooks/useChronometer.ts"
click node_achievementhook "https://github.com/xiisuma/ctf_arena/blob/main/src/features/achievements/useAchievements.ts"
click node_achievementapi "https://github.com/xiisuma/ctf_arena/blob/main/src/features/achievements/api.ts"
click node_ranking "https://github.com/xiisuma/ctf_arena/blob/main/src/features/ranking/api.ts"
click node_profile "https://github.com/xiisuma/ctf_arena/blob/main/src/features/profile/useDashboard.ts"
click node_friends "https://github.com/xiisuma/ctf_arena/blob/main/src/features/friends/api.ts"
click node_notifications "https://github.com/xiisuma/ctf_arena/blob/main/src/features/notifications/NotificationSystem.tsx"
click node_settings "https://github.com/xiisuma/ctf_arena/blob/main/src/pages/SettingsPage.tsx"
click node_adminplayers "https://github.com/xiisuma/ctf_arena/blob/main/src/features/settings/usePlayersAdmin.ts"
click node_event "https://github.com/xiisuma/ctf_arena/blob/main/src/features/ctf/useActiveEvent.ts"
click node_ctfstate "https://github.com/xiisuma/ctf_arena/blob/main/src/features/ctf/CTFStateContext.tsx"
click node_client "https://github.com/xiisuma/ctf_arena/blob/main/src/infrastructure/api/client.ts"
click node_backend "https://github.com/xiisuma/ctf_arena/blob/main/api.php"
click node_wsclient "https://github.com/xiisuma/ctf_arena/blob/main/src/shared/hooks/useWebSocket.ts"
click node_wsserver "https://github.com/xiisuma/ctf_arena/blob/main/ws-server/server.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_pages,node_auth toneBlue
class node_categories,node_challengehook,node_challengeapi,node_chrono,node_event,node_ctfstate toneAmber
class node_achievementhook,node_achievementapi,node_ranking,node_profile,node_friends,node_notifications toneMint
class node_settings,node_adminplayers toneRose
class node_client,node_backend,node_database,node_wsclient,node_wsserver,node_player toneIndigo
```

## Components

### React application

- [App and routes](https://github.com/xiisuma/ctf_arena/blob/main/src/App.tsx): `src/App.tsx`
- [Product pages](https://github.com/xiisuma/ctf_arena/tree/main/src/pages): `src/pages`
- [Authentication state](https://github.com/xiisuma/ctf_arena/blob/main/src/features/auth/AuthContext.tsx): `src/features/auth/AuthContext.tsx`

### Challenge play

- [Category store](https://github.com/xiisuma/ctf_arena/blob/main/src/features/categories/store.ts): `src/features/categories/store.ts`
- [Challenge loading](https://github.com/xiisuma/ctf_arena/blob/main/src/features/challenges/useChallenges.ts): `src/features/challenges/useChallenges.ts`
- [Challenge API](https://github.com/xiisuma/ctf_arena/blob/main/src/features/challenges/api.ts): `src/features/challenges/api.ts`
- [Chronometer](https://github.com/xiisuma/ctf_arena/blob/main/src/shared/hooks/useChronometer.ts): `src/shared/hooks/useChronometer.ts`
- [Active event](https://github.com/xiisuma/ctf_arena/blob/main/src/features/ctf/useActiveEvent.ts): `src/features/ctf/useActiveEvent.ts`
- [CTF state](https://github.com/xiisuma/ctf_arena/blob/main/src/features/ctf/CTFStateContext.tsx): `src/features/ctf/CTFStateContext.tsx`

### Progress and community

- [Achievement loading](https://github.com/xiisuma/ctf_arena/blob/main/src/features/achievements/useAchievements.ts): `src/features/achievements/useAchievements.ts`
- [Achievement API](https://github.com/xiisuma/ctf_arena/blob/main/src/features/achievements/api.ts): `src/features/achievements/api.ts`
- [Ranking data](https://github.com/xiisuma/ctf_arena/blob/main/src/features/ranking/api.ts): `src/features/ranking/api.ts`
- [Profile and dashboard](https://github.com/xiisuma/ctf_arena/blob/main/src/features/profile/useDashboard.ts): `src/features/profile/useDashboard.ts`
- [Friends](https://github.com/xiisuma/ctf_arena/blob/main/src/features/friends/api.ts): `src/features/friends/api.ts`
- [Notifications](https://github.com/xiisuma/ctf_arena/blob/main/src/features/notifications/NotificationSystem.tsx): `src/features/notifications/NotificationSystem.tsx`

### Administration

- [Admin settings](https://github.com/xiisuma/ctf_arena/blob/main/src/pages/SettingsPage.tsx): `src/pages/SettingsPage.tsx`
- [Player administration](https://github.com/xiisuma/ctf_arena/blob/main/src/features/settings/usePlayersAdmin.ts): `src/features/settings/usePlayersAdmin.ts`

### Backend services

- [HTTP API client](https://github.com/xiisuma/ctf_arena/blob/main/src/infrastructure/api/client.ts): `src/infrastructure/api/client.ts`
- [PHP API](https://github.com/xiisuma/ctf_arena/blob/main/api.php): `api.php`
- **MySQL data**
- [WebSocket hook](https://github.com/xiisuma/ctf_arena/blob/main/src/shared/hooks/useWebSocket.ts): `src/shared/hooks/useWebSocket.ts`
- [WebSocket server](https://github.com/xiisuma/ctf_arena/blob/main/ws-server/server.js): `ws-server/server.js`

### Other components

- **Player**

## Connections

- Player → App and routes: uses
- App and routes → Product pages: routes to
- App and routes → Authentication state: provides auth
- App and routes → Category store: loads categories
- Challenge loading → Category store: loads
- Challenge loading → Challenge API: loads challenges
- Challenge API → HTTP API client: requests data
- Achievement loading → Achievement API: loads
- Achievement loading → Ranking data: loads players
- Achievement API → HTTP API client: requests data
- Ranking data → HTTP API client: requests data
- Profile and dashboard → Ranking data: loads players
- Profile and dashboard → Challenge API: loads flags and challenges
- Friends → HTTP API client: requests data
- Notifications → WebSocket hook: receives updates
- Active event → WebSocket hook: refreshes on events
- Active event → HTTP API client: loads event
- App and routes → CTF state: provides state
- Admin settings → Player administration: uses
- Player administration → Ranking data: loads players
- Player administration → Challenge API: loads challenges and flags
- Player administration → Achievement API: loads achievements
- HTTP API client → PHP API: HTTP requests
- PHP API → MySQL data: reads and writes
- PHP API → WebSocket server: notifies
- WebSocket hook → WebSocket server: connects and registers