Overview
I revived this popular chess-training tool after the original shut down. It has grown to 4,700+ registered users, with 2,400+ puzzle sets trained beyond the first cycle.
ChessPecker is a full-stack web application designed to help users train tactical chess skills using the Woodpecker Method. Solve curated puzzle sets or build your own custom sets, reinforce tactical motifs by repeatedly solving the same puzzles in cycles, and track your progress over time.
Built with Nuxt.js 3, it uses server-side rendering and caching for fast, SEO-friendly performance.
Front end
The interface is fully responsive and built with TailwindCSS, using vue3-chessboard for the board itself.
The part I am most proud of is the chess board wrapper component. It acts as an adapter, exposing a minimal API to manipulate the board. If we ever need to switch to a different chess board package, it is a matter of rewriting the adapter’s functions rather than refactoring across the app.
Back end
User data and training progress are stored and synced with Supabase, which also handles authentication. The database is PostgreSQL with a well-designed, normalized schema, and uses:
- Row-level security (RLS) to enforce per-user data access.
- Postgres functions and triggers to manage puzzle progress updates. These were most useful for guaranteeing atomicity (avoiding partial updates in multi-step operations), and they also improved performance.
Testing
Unit tests are written with Vitest and cover core logic such as puzzle validation, user progress updates and the chess board adapter methods. End-to-end tests use Jest with a headless browser to simulate full user flows, and have been essential for catching regressions early.