Project Overview
ChessPecker is a full-stack web application designed to help users train tactical chess skills using the Woodpecker Method. Built with Nuxt.js 3, it leverages Server-Side Rendering (SSR) and caching to ensure fast, SEO-friendly performance.
The front end features a fully responsive design using TailwindCSS. It integrates vue3-chessboard for board functionality. The aspect of this project that I am most proud of is the Chess Board wrapper component. It acts as an adapter, exposing a minimal API to manipulate the board. This means that if we need to switch to a different chess board package, it is simply a matter of rewriting the adapter’s functions rather than refactoring across the app. User data and training progress are stored and synced using Supabase, which also handles authentication.
The back end uses PostgreSQL via Supabase with a well-designed, normalized schema. It employs row-level security (RLS) to enforce per-user data access, along with Postgres functions and triggers to manage puzzle progress updates. These functions were most useful for ensuring atomicity (avoiding partial updates in operations with multiple steps), but also improved performance.
Unit tests are written using Vitest, covering core logic such as puzzle validation, user progress updates, and adapter methods for the chess board. For end-to-end testing, I used Jest alongside a headless browser environment to simulate full user flows. These tests have been essential for catching regressions early.