Chess²
Online chess game with real-time multiplayer against friends, Stockfish AI, and Elo ratings.
♟️ Play online with friends or against Stockfish AI bots
Create an account, add friends, and start real-time games. Sharpen your tactics versus a fast, Stockfish-powered bot directly in the browser.
🔍 What is Chess²?
Chess² is a modern web-based chess game where you can play against friends in real time or challenge a Stockfish-powered bot. It features authenticated accounts, friend lists, an Elo rating system, and detailed game recaps. Under the hood, it uses Firebase Realtime Database for live games, Firestore for user data, and a dedicated Stockfish worker deployed on Render for fast, realistic AI play, all wrapped in a responsive, polished UI.
🧩 Key Features
📌 Why I Built This
I wanted to build more than a simple chess board: a complete multiplayer platform with accounts, ratings, and a strong AI opponent. Chess² became a way to combine my love for chess with modern Angular, Firebase, and SSR patterns and to push myself to ship a polished, real-world app in just a few weeks.
💡 Use Cases
- Play casual or rated games with friends in the browser.
- Practice vs a Stockfish bot to explore openings and tactics.
- Share a game link and start playing instantly, no installs.
- Track your recent games and see how your Elo evolves over time.
- Use it on desktop or mobile for quick games during breaks.
🧪 Tech Stack Overview
- Angular 17 - Standalone components, typed routing, and SSR provide a structured dashboard shell, smooth navigation, and fast initial loads.
- TypeScript - Strong typing for moves, boards, games, and users keeps chess logic deterministic and refactors safe as the codebase grows.
- Tailwind CSS - Utility-first styling for the board, dashboard, and modals, enabling a clean, responsive layout and quick design iterations.
- Firebase - Auth, Firestore, Realtime Database, and Storage power accounts, friend lists, live games, and secure per-user data.
- Stockfish - A strong open-source chess engine accessed via a Render-hosted worker to provide fast, realistic AI opponents in the browser.
⚙️ Getting Started
🧠 Challenges & Learnings
- Designing a deterministic game loop with chess.js and validating moves server-side helps prevent illegal positions and desyncs.
- Separating UI state from canonical game state avoids animation glitches and keeps reconnections stable during live games.
- Using Firebase Realtime Database for games and Firestore for profiles/friends keeps reads efficient and data modeling clear.
- Integrating a remote Stockfish worker requires careful timeouts, error handling, and rate limiting to keep the UI responsive.
- Building an Elo system on top of Firebase data taught me how to handle concurrency, retries, and edge cases like aborted games.
📸 See it in Action
Want to chat about this project? Let’s chat.