⭕ Tic-tac-toe ❌

Play tic-tac-toe against an AI opponent — render · move · let the server referee

A small full-stack tic-tac-toe proof of concept. A React client renders the board and forwards moves to a Node/Express server that owns the game rules and AI move selection — the server is the single source of truth.

---

• For developers — What it is · Quick start · How it works · Tech stack · Docs

---

What it is

A two-project demo: the player faces off against a simple AI opponent. The web client tracks scores and draws the board; every move is sent to the server, which validates it, detects a win or tie, and picks the AI's reply. There is no persistence yet — scores live in client state and there is no database.

Quick start

The server and the web client are independent npm projects with no root-level workspace, so install and run each in its own terminal.

Requirements: Node.js 14+ and npm, plus two free local ports — 3000 (web) and 3001 (server).

# Terminal 1 — API (tsc build + node dist/app.js)
cd server
npm install
npm start

# Terminal 2 — web client (Create React App)
cd web
npm install
npm start

Service	URL	Notes
Web (React)	http://localhost:3000	the app; talks to the server at :3001
API (Express)	http://localhost:3001	POST /player and POST /ai

How it works

The browser renders state only; the server owns all the rules. A player move goes to POST /player, which applies the move and reports win / tie / ongoing. When it's the AI's turn, the client calls POST /ai, which selects the next move and returns the resulting board state.

flowchart LR
  UI["Browser · React board :3000"]
  API["Express API :3001"]
  UI -- "POST /player · apply move, detect win/tie" --> API
  UI -- "POST /ai · pick AI move" --> API
  API -- "new board state" --> UI

Loading

The AI strategy is intentionally simple; high-score storage and multiplayer (via Redis) are listed as next steps in server/README.md.

Tech stack

Layer	Tech
Web	React 17, TypeScript 4.5, Create React App, axios
API	Node.js, Express 4, TypeScript 4.5, lodash
Tooling	tslint, npm (two independent projects)

Docs

• Server API & architecture: server/README.md — the /player and /ai contract, path-counting win detection, handler/state split.
• Web client notes: web/README.md — client-side state and layout.

No dedicated docs/, CI workflow, or top-level LICENSE exists yet — server's package.json declares ISC.

License

ISC (declared in server/package.json). No top-level LICENSE file is present.