# sunidhi3110/devarena architecture

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

- Interactive diagram: https://gitdiagram.com/sunidhi3110/devarena
- Repository: https://github.com/sunidhi3110/devarena

## Overview

DevArena is a coding-learning and multiplayer competition app. Users can create an account, learn or practice coding, join a room, submit solutions, and view competitive progress. The graph includes the documented academy, shop, leaderboard, match history, and chaos-event features. Backend orchestration is visible in excerpts, but many page and server internals are unsampled; dashed links mark relationships that are not verified in the shown code.

Main entry points: [`client/src/App.jsx`](https://github.com/sunidhi3110/devarena/blob/main/client/src/App.jsx) (App router), [`server/index.js`](https://github.com/sunidhi3110/devarena/blob/main/server/index.js) (HTTP and socket server), [`client/src/services/api.js`](https://github.com/sunidhi3110/devarena/blob/main/client/src/services/api.js) (API client), [`server/gameManager.js`](https://github.com/sunidhi3110/devarena/blob/main/server/gameManager.js) (Room and match manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["App router<br/>[App.jsx]"]
  node_authui["Authentication<br/>[AuthPage.jsx]"]
  node_api["API client<br/>[api.js]"]
  node_profile["Profile and progress<br/>[ProfilePage.jsx]"]
  node_shop["Coin shop<br/>[ShopModal.jsx]"]
end

subgraph group_learning["Learning and practice"]
  node_practice["Practice page<br/>[PracticePage.jsx]"]
  node_academy["Academy pages<br/>[AcademyPage.jsx]"]
  node_lesson["Lesson detail"]
  node_browserrunner["Browser test runner<br/>[clientRunner.js]"]
end

subgraph group_competition["Competitive play"]
  node_expert["Expert dashboard"]
  node_waiting["Waiting room"]
  node_battle["Battle arena"]
  node_chaos["Chaos manager<br/>[useChaosManager.js]"]
end

subgraph group_backend["Backend services"]
  node_server["HTTP and socket server<br/>[index.js]"]
  node_auth["Auth and player service<br/>[authService.js]"]
  node_game["Room and match manager<br/>[gameManager.js]"]
  node_lessons["Lesson service<br/>[lessonsService.js]"]
end

subgraph group_data["Persistence and evaluation"]
  node_problems["Problem bank<br/>[problemBank.js]"]
  node_execution["Code execution and judging<br/>[executionEngine.js]"]
  node_complexity["Complexity estimator"]
  node_database[("Application database<br/>[db.js]")]
end

node_player(("Player"))

node_player -->|"uses"| node_app
node_app -->|"renders"| node_authui
node_app -->|"routes to"| node_practice
node_app -->|"routes to"| node_academy
node_app -->|"routes to"| node_lesson
node_app -->|"routes to"| node_expert
node_app -->|"renders"| node_waiting
node_app -->|"renders"| node_battle
node_app -->|"uses"| node_api
node_authui -->|"calls"| node_api
node_shop -->|"calls"| node_api
node_practice -.->|"submits"| node_api
node_practice -.->|"runs tests"| node_browserrunner
node_battle -.->|"uses events"| node_chaos
node_app -.->|"connects sockets"| node_server
node_api -->|"sends requests"| node_server
node_server -.->|"calls auth"| node_auth
node_server -->|"dispatches room events"| node_game
node_server -.->|"serves academy"| node_lessons
node_server -.->|"loads problems"| node_problems
node_server -->|"runs submissions"| node_execution
node_server -->|"analyzes code"| node_complexity
node_game -.->|"evaluates submissions"| node_execution
node_game -.->|"selects problems"| node_problems
node_execution -->|"estimates complexity"| node_complexity
node_auth -->|"reads and writes"| node_database
node_lessons -->|"reads and seeds"| node_database
node_problems -->|"reads problems"| node_database
node_game -.->|"uses match data"| node_database
node_api -.->|"loads progress"| node_profile
node_player -.->|"creates or joins rooms"| node_expert
node_player -.->|"solves exercises"| node_practice

click node_app "https://github.com/sunidhi3110/devarena/blob/main/client/src/App.jsx"
click node_authui "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/AuthPage.jsx"
click node_api "https://github.com/sunidhi3110/devarena/blob/main/client/src/services/api.js"
click node_practice "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/PracticePage.jsx"
click node_academy "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/AcademyPage.jsx"
click node_lesson "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/LessonDetailPage.jsx"
click node_browserrunner "https://github.com/sunidhi3110/devarena/blob/main/client/src/utils/clientRunner.js"
click node_expert "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/ExpertDashboardPage.jsx"
click node_waiting "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/WaitingRoomPage.jsx"
click node_battle "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/BattleArenaPage.jsx"
click node_chaos "https://github.com/sunidhi3110/devarena/blob/main/client/src/hooks/useChaosManager.js"
click node_profile "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/ProfilePage.jsx"
click node_shop "https://github.com/sunidhi3110/devarena/blob/main/client/src/components/common/ShopModal.jsx"
click node_server "https://github.com/sunidhi3110/devarena/blob/main/server/index.js"
click node_auth "https://github.com/sunidhi3110/devarena/blob/main/server/authService.js"
click node_game "https://github.com/sunidhi3110/devarena/blob/main/server/gameManager.js"
click node_lessons "https://github.com/sunidhi3110/devarena/blob/main/server/lessonsService.js"
click node_problems "https://github.com/sunidhi3110/devarena/blob/main/server/problemBank.js"
click node_execution "https://github.com/sunidhi3110/devarena/blob/main/server/executionEngine.js"
click node_complexity "https://github.com/sunidhi3110/devarena/blob/main/server/complexityEstimator.js"
click node_database "https://github.com/sunidhi3110/devarena/blob/main/server/db.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_authui,node_api,node_profile,node_shop toneBlue
class node_practice,node_academy,node_lesson,node_browserrunner toneAmber
class node_expert,node_waiting,node_battle,node_chaos toneMint
class node_server,node_auth,node_game,node_lessons toneRose
class node_problems,node_execution,node_complexity,node_database,node_player toneIndigo
```

## Components

### Client experience

- [App router](https://github.com/sunidhi3110/devarena/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Authentication](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/AuthPage.jsx): `client/src/components/pages/AuthPage.jsx`
- [API client](https://github.com/sunidhi3110/devarena/blob/main/client/src/services/api.js): `client/src/services/api.js`
- [Profile and progress](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/ProfilePage.jsx): `client/src/components/pages/ProfilePage.jsx`
- [Coin shop](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/common/ShopModal.jsx): `client/src/components/common/ShopModal.jsx`

### Learning and practice

- [Practice page](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/PracticePage.jsx): `client/src/components/pages/PracticePage.jsx`
- [Academy pages](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/AcademyPage.jsx): `client/src/components/pages/AcademyPage.jsx`
- [Lesson detail](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/LessonDetailPage.jsx): `client/src/components/pages/LessonDetailPage.jsx`
- [Browser test runner](https://github.com/sunidhi3110/devarena/blob/main/client/src/utils/clientRunner.js): `client/src/utils/clientRunner.js`

### Competitive play

- [Expert dashboard](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/ExpertDashboardPage.jsx): `client/src/components/pages/ExpertDashboardPage.jsx`
- [Waiting room](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/WaitingRoomPage.jsx): `client/src/components/pages/WaitingRoomPage.jsx`
- [Battle arena](https://github.com/sunidhi3110/devarena/blob/main/client/src/components/pages/BattleArenaPage.jsx): `client/src/components/pages/BattleArenaPage.jsx`
- [Chaos manager](https://github.com/sunidhi3110/devarena/blob/main/client/src/hooks/useChaosManager.js): `client/src/hooks/useChaosManager.js`

### Backend services

- [HTTP and socket server](https://github.com/sunidhi3110/devarena/blob/main/server/index.js): `server/index.js`
- [Auth and player service](https://github.com/sunidhi3110/devarena/blob/main/server/authService.js): `server/authService.js`
- [Room and match manager](https://github.com/sunidhi3110/devarena/blob/main/server/gameManager.js): `server/gameManager.js`
- [Lesson service](https://github.com/sunidhi3110/devarena/blob/main/server/lessonsService.js): `server/lessonsService.js`

### Persistence and evaluation

- [Problem bank](https://github.com/sunidhi3110/devarena/blob/main/server/problemBank.js): `server/problemBank.js`
- [Code execution and judging](https://github.com/sunidhi3110/devarena/blob/main/server/executionEngine.js): `server/executionEngine.js`
- [Complexity estimator](https://github.com/sunidhi3110/devarena/blob/main/server/complexityEstimator.js): `server/complexityEstimator.js`
- [Application database](https://github.com/sunidhi3110/devarena/blob/main/server/db.js): `server/db.js`

### Other components

- **Player**

## Connections

- Player → App router: uses
- App router → Authentication: renders (evidence: `client/src/App.jsx`)
- App router → Practice page: routes to (evidence: `client/src/App.jsx`)
- App router → Academy pages: routes to (evidence: `client/src/App.jsx`)
- App router → Lesson detail: routes to (evidence: `client/src/App.jsx`)
- App router → Expert dashboard: routes to (evidence: `client/src/App.jsx`)
- App router → Waiting room: renders (evidence: `client/src/App.jsx`)
- App router → Battle arena: renders (evidence: `client/src/App.jsx`)
- App router → API client: uses (evidence: `client/src/App.jsx`)
- Authentication → API client: calls (evidence: `client/src/components/pages/AuthPage.jsx`)
- Coin shop → API client: calls (evidence: `client/src/components/common/ShopModal.jsx`)
- Practice page → API client: submits
- Practice page → Browser test runner: runs tests
- Battle arena → Chaos manager: uses events
- App router → HTTP and socket server: connects sockets
- API client → HTTP and socket server: sends requests (evidence: `client/src/services/api.js`)
- HTTP and socket server → Auth and player service: calls auth (evidence: `server/index.js`)
- HTTP and socket server → Room and match manager: dispatches room events (evidence: `server/index.js`)
- HTTP and socket server → Lesson service: serves academy (evidence: `server/index.js`)
- HTTP and socket server → Problem bank: loads problems (evidence: `server/index.js`)
- HTTP and socket server → Code execution and judging: runs submissions (evidence: `server/index.js`)
- HTTP and socket server → Complexity estimator: analyzes code (evidence: `server/index.js`)
- Room and match manager → Code execution and judging: evaluates submissions (evidence: `server/gameManager.js`)
- Room and match manager → Problem bank: selects problems (evidence: `server/gameManager.js`)
- Code execution and judging → Complexity estimator: estimates complexity (evidence: `server/executionEngine.js`)
- Auth and player service → Application database: reads and writes (evidence: `server/authService.js`)
- Lesson service → Application database: reads and seeds (evidence: `server/lessonsService.js`)
- Problem bank → Application database: reads problems (evidence: `server/problemBank.js`)
- Room and match manager → Application database: uses match data (evidence: `server/gameManager.js`)
- API client → Profile and progress: loads progress
- Player → Expert dashboard: creates or joins rooms
- Player → Practice page: solves exercises