A simple example of a full multiplayer game web app built with React.js and Node.js stack

Context

This is an extension of Maxim's original X-Tic-Tac-Toe app: https://github.com/xims/X-ttt/tree/master, by adding analytics collection and display features.

Prerequisites

• Node.js 14 (recommend using nvm)
• Ports: frontend on 3000, backend on 3001

Install and run dependencies

Important: Every terminal needs Node 14. Recommend using nvm: nvm use 14 or just nvm use

Install backend dependencies and start backend

Start a new terminal → Under repo root, run:

nvm use 14 && cd WS && npm install && npm start

Install frontend dependencies and start frontend

Start a new terminal → Under repo root, run:

nvm use 14 && cd react_ws_src && npm install && npm start

Start testing

Quick health checks

• Frontend: http://localhost:3000
• Backend health check: http://localhost:3001/api/analytics?mode=live

The SQLite database file is created automatically at WS/db/game_results.db (gitignored).

Analytics feature testing

• Play one or more games at http://localhost:3000/ttt, for both Live and Computer mode
• Visit http://localhost:3000/analytics and see the analytics data
• Want to see more data? Open a new terminal → Under project root, run:

  nvm use 14 && cd WS && node scripts/init-test-data.js

  Use --clear-db flag to clear previous data first. The new data should show up at http://localhost:3000/analytics

Analytics Feature

This is the new feature added to the existing X-Tic-Tac-Toe app.

Game result submission

Submits game results to the backend and saves in SQLite database for analytics.

• Only completed games are submitted (incomplete/aborted games are ignored)
• Happens behind the scenes without interrupting users
• Supports both Live and Computer modes
• In Live mode, only the master player submits to avoid duplication
• Draw results are submitted but not displayed in analytics yet

Frontend analytics page

Shows game analytics in three sections:

• Leaderboard - Top 5 players with most wins
• Game Duration Distribution - Game lengths bucketed into time ranges (<30s, 30s-1min, 1min-2min, 2min+)
• Top Winning Patterns - Top 4 most common winning patterns

Configuration: Limits and time buckets can be adjusted in WS/configs/AnalyticsConfig.js

APIs

POST /api/game-results

Submits a completed game result.

Request body:

{
  "mode": "live" | "computer",
  "winnerName": "string" | null,
  "gameLength": 45,
  "pattern": "xxx_o____"
}

Validation:

• mode must be "live" or "computer"
• winnerName is optional (null for draws, trimmed and normalized to "(no name)" if empty)
• gameLength must be non-negative integer (seconds)
• pattern must be exactly 9 characters (lowercase x/o or underscore for empty cells)

Response: { success: true, id: <number> }

GET /api/analytics?mode=live|computer

Fetches analytics data for the specified game mode.

Query params:

• mode (required): "live" or "computer"

Response:

{
  "leaderboard": [{ "winnerName": "Alice", "winCount": 10 }, ...],
  "gameLength": [{ "name": "Less than 30s", "count": 15 }, ...],
  "topPatterns": [{ "pattern": ["X","X","X",null,...], "count": 8 }, ...]
}

API Security

• Input validation using express-validator
• Security headers using helmet
• SQLite parameterized queries to prevent SQL injection

Key file changes

Backend (WS/):

• lib/db.js - SQLite database initialization with game_results table
• models/analytics.js - Data access layer for analytics queries
• controllers/analytics.js - Business logic for analytics (bucketing, formatting)
• controllers/game-results.js - Handles game result submission with name normalization
• routes/analytics.js - GET endpoint with validation
• routes/game-results.js - POST endpoint with validation
• configs/AnalyticsConfig.js - Configurable limits for leaderboard/patterns/buckets
• scripts/init-test-data.js - Generates 200 realistic test games
• Xttt.js - Registers new API routes
• __tests__/ - Jest test suite (unit + integration tests)

Frontend (react_ws_src/src/):

• views/ttt/GameMain.js - Modified to collect game timing and submit results
• views/analytics/Analytics.js - Main analytics page with mode switcher
• views/analytics/Leaderboard.js - Top winners visualization
• views/analytics/GameLengthChart.js - Time distribution chart
• views/analytics/TopPatterns.js - Winning patterns display
• app.js - Added /analytics route

Automated Testing

Run backend tests:

nvm use 14 && cd WS && npm test

Future improvements

• More analytics aspects, such as draw rates, first move win rates, step count, etc
• Logging for debugging and maintenance purposes
• Better strategy for anti-cheating in leaderboard

---

Major libraries

Major libraries used on front end:

• react
• webpack
• babel
• react-router
• ampersand
• sass
• jest

Major libraries used on server:

• node.js
• socket.io
• express

Folder structure:

• WS - server side and compiled front end
• react_ws_src - React development source and testing

---

Configurable with external XML file -

https://x-ttt.herokuapp.com/ws_conf.xml

---

##For demonstration purposes only.