Chessmate

An online chess academy with interactive courses.

Featured
2025
Front end
Personal project

About the project

Chessmate is a modern web platform for learning chess online through interactive courses.

I designed it from scratch in Figma and built it with React and TypeScript, simulating a complete backend on the client.

Key features

Sign-up and login
Course search and filters
Course purchases
Personal dashboard
Virtual classrooms
Progress tracking

Tech stack

Languages & frameworks

React
TypeScript

Libraries & utilities

React Query
Zustand
React Router
React Hook Form
Zod (+ resolvers)
Embla Carousel
React Player

Design & styling

CSS Modules
Figma
Responsive design

Tooling

Vite
Git
npm

Development process

Chessmate was designed and built from scratch to simulate a real online learning platform, entirely on the client side with no backend. The goal was to rebuild an earlier version of the project with everything I had learned about design and code since.

I planned the architecture in Figma, defining reusable components for each section (Home, Courses, Dashboard, Classroom…). In code, I used Zustand for global state and React Query to handle data simulated in localStorage, mimicking calls to a real API. That made purchases, progress and authentication work without a server, with dynamic feedback for errors and invalid routes.

Private routes use React Router, and forms are validated with React Hook Form and Zod. On the visual side, CSS Modules, Embla Carousel and React Player kept the design smooth and performant, with Vite handling the build.

Technical highlights

Validation and visual feedback for error cases
Protected routes
Real-time sync between components
Performance tuned with React Query caching

Notes

Note: The GitHub Pages demo uses a hash router because GitHub Pages only serves static files. Locally, the browser router gives clean URLs and real deep links (/dashboard, /course/:id, /classroom).

Try it

Log in, buy a couple of courses and explore the dashboard. The README explains how to force error states from the browser console to see the feedback system in action.