Design an Online Chess Game – Frontend System Design

We’ll walk through the frontend system design for a live chess client like Chess.com or Lichess: a board you can drag, legal-move dots on pointerdown, two clocks that must not lie, and a reconnect that snaps to the correct ply. You’ll see why the browser generates legal moves and why that generation is never the source of truth, why a DOM board beats a canvas here, and how an animation may trail a server ply by one slide and no more.

This is not a chess-engine question. You are not asked to write alpha-beta. It is also not a chat app. Chat can drop a message and survive. A chess client that applies the wrong ply, or that flags a player the server has not flagged, has a broken game.

Problem Statement

Design the frontend for a real-time online chess game.

Requirements:

• Play rated and casual games at bullet, blitz, and rapid time controls
• Show legal-move hints and last-move highlights as soon as the pointer goes down
• Keep... premium content.