I built a zero-backend chess audit tool using Stockfish WASM and client-side processing

Hey dev.to community! I'm excited to share a browser-based tool I recently created called Chess Blunder Heatmap. This application doesn't focus on analyzing individual game moves, but rather aggregates a player's game history to create a broad overview of weak board squares and a breakdown of game phases (opening, middlegame, and endgame).

The tech stack for this project includes clean client-side JavaScript hosted on Vercel for the frontend, while the Stockfish WASM engine runs directly in the browser for the engine component. Interestingly, there's no backend involved, as all processing takes place locally on the user's client-side.

The reason for utilizing WebAssembly and client-side processing is to eliminate server costs altogether, as the engine evaluations are offloaded to the user's device. Additionally, this approach enhances privacy and provides a seamless user experience, as users only need to enter their Chess.com username and run the audit without creating an account or logging in.

The app offers several features, including a visual board heatmap that highlights the exact squares where blunders occur over time. It also provides phase performance metrics for opening, middlegame, and endgame phases. Users can even conduct instant tests using famous profiles, such as testing Hikaru to uncover a GM's blind spots.

You can check out the live tool at https://chess-blunder-heatmap.vercel.app/. I'm eager to hear your thoughts and feedback regarding performance, WASM execution limits, or any suggestions for improving the UI/UX.