ketan1412/websockets_base

Purpose and entry points

This repository implements a live match tracking and commentary system: a backend exposes match/commentary APIs and realtime updates, while a Vite/React frontend renders match status and a live feed.

• Backend process entry: backend/src/index.js

• Frontend bootstrap: frontend/index.tsx, frontend/App.tsx

• A root-level server entry also exists: server.js

Backend HTTP API layer

Route modules separate match-oriented operations from commentary operations, with dedicated validation before request handling.

• Match API boundary: backend/src/routes/matches.js

• Commentary API boundary: backend/src/routes/commentary.js

• Validation contracts: backend/src/validation/matches.js, backend/src/validation/commentary.js

This is the primary request/control boundary between clients and persisted/live match data.

Persistence and domain state

The backend uses Drizzle ORM with versioned SQL migrations and a centralized schema definition. Match status logic is isolated from route handling, indicating it is a domain-level transformation or state decision.

• Database connection/access: backend/src/db/db.js

• Database schema: backend/src/db/schema.js

• Initial migration: backend/drizzle/0000_peaceful_satana.sql

• Match-status domain utility: backend/src/utils/match-status.js

Drizzle configuration and migration metadata establish the database as durable system state rather than frontend-owned state.

Realtime delivery

WebSocket support is implemented as a distinct backend subsystem, likely responsible for pushing match and commentary changes to connected clients rather than requiring polling.

• WebSocket server: backend/src/ws/server.js

• Backend orchestration entry: backend/src/index.js

• Frontend socket consumer: frontend/hooks/useWebSocket.ts

The WebSocket boundary connects backend mutation/state changes to the frontend’s live UI state.

Frontend application composition

The frontend is a TypeScript React application built with Vite. App.tsx composes a match-focused interface from reusable display components, while hooks own data retrieval and realtime subscription behavior.

• Application root: frontend/App.tsx

• Match data hook: frontend/hooks/useMatchData.ts

• API client boundary: frontend/services/api.ts

• Live commentary UI: frontend/components/LiveFeed.tsx

• Match presentation: frontend/components/MatchCard.tsx

• Shared client types: frontend/types.ts

The expected flow is API fetch → hook-managed client state → component rendering, augmented by WebSocket events for live updates.

Security and external infrastructure

Arcjet is integrated at the backend, indicating an external application-security/rate-limiting or request-protection boundary.

• Arcjet integration: backend/src/arcjet.js

• Backend dependency/runtime manifest: backend/package.json

• Frontend Vite runtime configuration: frontend/vite.config.ts

Material runtimes are Node.js on the backend and browser-based React/TypeScript on the frontend; the database is managed through Drizzle migrations and schema definitions.