Browser-based chess analysis application built with React and Stockfish.
The project imports games from PGN or supported chess platforms, runs engine analysis in the browser, and presents move-by-move evaluations through an interactive board, evaluation graph, and move classifications.
Live demo: https://chess-analyze.netlify.app/
This project was built to explore several frontend engineering problems beyond a standard CRUD application:
- running a chess engine in the browser without blocking the UI;
- coordinating Stockfish analysis with React application state;
- parsing and replaying PGN move history;
- visualizing engine evaluations across an entire game;
- importing external game data from Chess.com and Lichess;
- keeping board navigation, engine output, and evaluation charts synchronized.
- PGN import and move navigation
- Chess.com and Lichess game import
- Stockfish engine analysis using browser-compatible JavaScript/WASM assets
- interactive chess board with move controls
- evaluation graph and advantage display
- move classification and game summary
- analysis export for later review
- React 19
- JavaScript
- Stockfish / WebAssembly
- Chess.js
- Recharts
- Tailwind CSS
- Web Workers
Stockfish assets are stored under public/scripts/ and the application is configured through CRACO.
git clone https://github.com/HaikalE/React-Chess-Analyze.git
cd React-Chess-Analyze
npm install
npm startFor a production build:
npm run buildThe repository includes the browser-compatible Stockfish assets required by the current implementation. Engine evaluation depth affects analysis time and browser CPU usage.
Move classifications are application-level heuristics built on top of engine evaluation changes. They should not be interpreted as an official Chess.com or Lichess classification system.
The main technical challenge was not rendering a chess board; it was managing a CPU-intensive analysis workflow in a responsive browser application. The project required separating engine work from the UI thread, translating engine output into application state, and keeping multiple representations of the same game position consistent.