How sunidhi3110/devarena works
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: App.jsx App router · index.js HTTP and socket server · api.js API client · gameManager.js Room and match manager
Components 22
Client experience
- App router
client/src/App.jsx - Authentication
client/src/components/pages/AuthPage.jsx - API client
client/src/services/api.js - Profile and progress
client/src/components/pages/ProfilePage.jsx - Coin shop
client/src/components/common/ShopModal.jsx
Learning and practice
- Practice page
client/src/components/pages/PracticePage.jsx - Academy pages
client/src/components/pages/AcademyPage.jsx - Lesson detail
client/src/components/pages/LessonDetailPage.jsx - Browser test runner
client/src/utils/clientRunner.js
Competitive play
- Expert dashboard
client/src/components/pages/ExpertDashboardPage.jsx - Waiting room
client/src/components/pages/WaitingRoomPage.jsx - Battle arena
client/src/components/pages/BattleArenaPage.jsx - Chaos manager
client/src/hooks/useChaosManager.js
Backend services
- HTTP and socket server
server/index.js - Auth and player service
server/authService.js - Room and match manager
server/gameManager.js - Lesson service
server/lessonsService.js
Persistence and evaluation
- Problem bank
server/problemBank.js - Code execution and judging
server/executionEngine.js - Complexity estimator
server/complexityEstimator.js - Application database
server/db.js
Other components
- Player
Connections 32
- Player → App router: uses
- App router → Authentication: renders
client/src/App.jsx - App router → Practice page: routes to
client/src/App.jsx - App router → Academy pages: routes to
client/src/App.jsx - App router → Lesson detail: routes to
client/src/App.jsx - App router → Expert dashboard: routes to
client/src/App.jsx - App router → Waiting room: renders
client/src/App.jsx - App router → Battle arena: renders
client/src/App.jsx - App router → API client: uses
client/src/App.jsx - Authentication → API client: calls
client/src/components/pages/AuthPage.jsx - Coin shop → API client: calls
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
client/src/services/api.js - HTTP and socket server → Auth and player service: calls auth
server/index.js - HTTP and socket server → Room and match manager: dispatches room events
server/index.js - HTTP and socket server → Lesson service: serves academy
server/index.js - HTTP and socket server → Problem bank: loads problems
server/index.js - HTTP and socket server → Code execution and judging: runs submissions
server/index.js - HTTP and socket server → Complexity estimator: analyzes code
server/index.js - Room and match manager → Code execution and judging: evaluates submissions
server/gameManager.js - Room and match manager → Problem bank: selects problems
server/gameManager.js - Code execution and judging → Complexity estimator: estimates complexity
server/executionEngine.js - Auth and player service → Application database: reads and writes
server/authService.js - Lesson service → Application database: reads and seeds
server/lessonsService.js - Problem bank → Application database: reads problems
server/problemBank.js - Room and match manager → Application database: uses match data
server/gameManager.js - API client → Profile and progress: loads progress
- Player → Expert dashboard: creates or joins rooms
- Player → Practice page: solves exercises