How xiisuma/ctf_arena works
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: client.ts HTTP API client · App.tsx App and routes · usePlayersAdmin.ts Player administration · api.ts Challenge API
Components 23
React application
- App and routes
src/App.tsx - Product pages
src/pages - Authentication state
src/features/auth/AuthContext.tsx
Challenge play
- Category store
src/features/categories/store.ts - Challenge loading
src/features/challenges/useChallenges.ts - Challenge API
src/features/challenges/api.ts - Chronometer
src/shared/hooks/useChronometer.ts - Active event
src/features/ctf/useActiveEvent.ts - CTF state
src/features/ctf/CTFStateContext.tsx
Progress and community
- Achievement loading
src/features/achievements/useAchievements.ts - Achievement API
src/features/achievements/api.ts - Ranking data
src/features/ranking/api.ts - Profile and dashboard
src/features/profile/useDashboard.ts - Friends
src/features/friends/api.ts - Notifications
src/features/notifications/NotificationSystem.tsx
Administration
- Admin settings
src/pages/SettingsPage.tsx - Player administration
src/features/settings/usePlayersAdmin.ts
Backend services
- HTTP API client
src/infrastructure/api/client.ts - PHP API
api.php - MySQL data
- WebSocket hook
src/shared/hooks/useWebSocket.ts - WebSocket server
ws-server/server.js
Other components
- Player
Connections 26
- 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