Back to all projects

Hobby Chess

An implementation of Chess, with Stockfish engine.

React 19TypeScript 5.7StockfishVite 6.1

Hobby Chess: A Modern Web-Based Chess Engine

Chess Board
Board for Hobby Chess

Whether you are a grandmaster in the making or just looking to pass the time with a classic game of strategy, Hobby Chess offers a sleek, responsive, and powerful environment to test your skills. Built with React and powered by the legendary Stockfish engine, Hobby Chess brings professional-grade analysis to your browser.

Play Hobby Chess here


🚀 Key Features

1. Dual Game Modes

Hobby Chess adapts to how you want to play:

  • Player vs Player (PvP): Challenge a friend locally and battle it out on the same screen.
  • Player vs Bot (PvB): Test your mettle against our integrated AI. You can choose to play as White or Black and see if you can outsmart the machine.

2. Powered by Stockfish

We’ve integrated the Stockfish 16.1 engine via Web Workers. This means:

  • Professional Analysis: The game constantly analyzes the board position in the background.
  • Adaptive Bot Play: In Bot mode, the AI calculates the "Best Move" using UCI (Universal Chess Interface) protocols to provide a challenging experience.
  • Seamless Performance: Because it runs in a separate worker thread, your UI stays buttery smooth even while the AI is "thinking".

3. Full Chess Rule Implementation

No shortcuts here. Our custom logic handles the complexities of the game:

  • Special Moves: Full support for Castling, En Passant, and Pawn Promotion.
  • Game State Detection: Automatic detection of Check, Checkmate, and Stalemate.
  • Move Validation: Real-time checking to ensure every move follows official rules and doesn't leave your king in danger.

🛠️ The Tech Stack

Hobby Chess is a testament to the power of modern web technologies:

| Technology | Purpose | | --- | --- | | React | Component-based UI and state management. | | TypeScript | Ensuring type safety for complex board logic. | | Web Workers | Running Stockfish in the background without blocking the main thread. | | CSS3 | Responsive board design with notation labels and piece animations. |


📈 Track Your Progress

Stay on top of the game with our comprehensive Game Info dashboard:

  • Move History: Every move is recorded in standard algebraic notation (e.g., e4, Nf3) so you can review your strategy.
  • Captured Pieces: A visual graveyard shows exactly which pieces have been taken from both sides.
  • Match Timer: Keep track of how long the battle has lasted with the integrated game clock.
  • Tactical Actions: Need to step away? Use the Resign or Offer Draw buttons to conclude the match gracefully.

🧩 How to Play

  1. Start: Select your mode (PvP or PvB).
  2. Move: Click a piece to select it, then click your target square. Valid moves are processed instantly.
  3. Promote: If your pawn reaches the end of the board, a modal will appear allowing you to choose your new powerhouse piece.
  4. Win: Put the opponent's king in Checkmate to claim victory!

Ready to make your move?