Online Chess Game Web App with Multiplayer and Move History

An online chess game web app with multiplayer and move history solves a simple frustration: playing chess with a friend online usually means a bare board with no record of what happened, no clock and no way to review the game. Players lose memorable games the moment the tab closes, and students who want to study their play have nothing to analyse. Existing free chess sites solve this, but their code is closed, so a student cannot open the engine, the room system or the history store to learn how any of it works. This project builds the whole loop as a working web app: players create or join rooms, play full-rule chess over WebSockets, and every move is validated, stored in standard algebraic notation and replayed in a review view with timers and captured pieces. The result is a complete real-time multiplayer system a student can demonstrate live, explain move by move and extend with ratings, chat or analysis.

The online chess game web app works as a short loop from the lobby to the review screen. A player signs in, browses the lobby and joins a room or creates one with a chosen time control; the server seats two players, assigns colours and starts both clocks. When a player clicks a piece, the frontend asks the rules engine for that piece's legal moves and highlights them on the board; clicking a highlighted square sends the move to the server, which validates it again, applies it, flips the clock and broadcasts the new position to both players. Every validated move is appended to the game's history in standard algebraic notation and stored in PostgreSQL with the clock readings. When the game ends by checkmate, stalemate or timeout, the server records the result, updates both ratings and opens the review view, where either player can step through the game move by move.

1. The player signs in and the lobby shows open rooms with host, rating, time control and player count.
2. Joining a room (or creating one) seats two players; the server assigns colours and starts both clocks.
3. Clicking a piece highlights only its legal moves; illegal squares cannot be selected.
4. The chosen move is sent to the server, validated a second time, applied, and broadcast to both players over Socket.io.
5. The server appends the move to the game history in standard algebraic notation and stores it in PostgreSQL with the clock readings.
6. Checkmate, stalemate or a timeout ends the game; the server records the result and updates both players' ratings.
7. Either player opens the review view and steps through the finished game from the first move to the last.

Tech stack:

• React with Vite (frontend)
• Node.js with Express (game server)
• Socket.io (real-time moves and clocks)
• PostgreSQL (accounts, ratings, stored games)
• chess.js rules engine (legal-move validation)
• Tailwind CSS (interface styling)
• JSON Web Tokens (sign-in sessions)
• Docker (deployment packaging)

The online chess game web app stands on four capabilities that work together: real-time multiplayer rooms, a rules engine that only allows legal moves, a complete move history in standard algebraic notation, and a review view that replays finished games. The multiplayer rooms carry the live game — players join a room, the server pairs them, and every move travels over WebSockets in milliseconds. The rules engine is the trust layer: it generates legal moves with check detection, castling, en passant and promotion, so an illegal move can never reach the board. The move history turns each game into a record: every move is stored with its notation, the clock readings and the captured pieces, and the review view steps through the game from the opening to checkmate. Timers, lobby browsing and accounts complete the system.

• [Real-time multiplayer rooms] Players create or join rated or casual rooms from the lobby; moves, clocks and results travel over Socket.io, and the server is the single source of truth for the board state.
• [Full legal-move validation] The rules engine generates only legal moves with check detection, castling, en passant and auto-queen promotion; illegal moves are rejected before they reach the board or the history.
• [Move history in standard algebraic notation] Every move is stored as SAN text with its move number, so any finished game can be replayed exactly, shared as a score sheet, or exported.
• [Finished-game review view] Step forward and back through a completed game on the board, with the full move list, captures, result and game statistics beside it.
• [Player timers] Each player gets a configurable clock (1, 3, 10 or 15 minutes in the base build); the clock runs for the side to move and a timeout decides the game.
• [Lobby with open rooms] The lobby lists waiting rooms with host, rating, time control and player count, plus a create-room form for rated or casual games.
• [Accounts and stored games] Players sign up, their ratings and finished games are stored in PostgreSQL, and past games can be reopened from the review view.

• Complete source code: React frontend, Node.js with Socket.io game server, PostgreSQL schema
• Working demo HTML with a playable board, lobby view and finished-game review view
• Setup instructions for running the server locally and deploying with Docker
• Project report PDF (background, architecture, WebSocket flow, rules engine, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (WebSockets, chess rules, SAN notation, database design)
• Project abstract PDF