1. Project Vision

Chess-Duel was created to be a simple, no-frills online chess experience. The goal was to build a "digital chessboard" where two people can instantly play a game—and others can watch in real-time—just by sharing a link, avoiding the complex features and account systems of other platforms. The focus was on immediate, intuitive gameplay with a lightweight and accessible tech stack.

2. Technology Choices

The tech stack was chosen for speed and simplicity:

Backend: Node.js and Express were used for a fast, event-driven server to handle connections and serve the application.
Real-Time Communication: Socket.io powers the live gameplay, synchronizing every move between players and spectators instantly.
Frontend: The interface was built with Vanilla JavaScript, HTML, and CSS to keep the client-side lightweight and fast.
Chess Logic: The chess.js library was integrated to handle all complex game rules, move validation, and state tracking.
Templating: EJS was used for basic server-side rendering of the initial HTML page.

3. Challenges & Solutions

Real-time State Sync: To ensure all players saw the same board state, the server was made the single source of truth. The server validates every move before broadcasting the official new state to all clients.
Login-Free Role Assignment: To assign roles (White, Black, Spectator) without user accounts, the server simply assigns them based on connection order. The first player is White, the second is Black, and all others are spectators.
Smooth Drag-and-Drop: To prevent visual glitches, the drag-and-drop interface doesn't move a piece on the client side immediately. Instead, it sends the move to the server and waits for the validated broadcast before updating the board.

4. Image Section

5. Final Architecture

The final architecture is a classic, efficient client-server model:

Server: A central Node.js/Express application that acts as the game's referee. It manages the master game state using chess.js, handles player connections and role assignments, validates all incoming moves, and broadcasts updates to everyone using Socket.io.
Client: A lightweight, single-page application running in the user's browser. It renders the chessboard, handles the drag-and-drop UI for making moves, and communicates with the server via Socket.io to send moves and receive game state updates.

Project Repository