A comprehensive Chess.com profile analyzer and game reviewer built with Next.js. ChessMate allows you to explore player statistics, analyze game history, and review games with Stockfish engine integration.
- Comprehensive Stats Dashboard: View detailed statistics for Rapid, Blitz, Bullet, and Daily chess formats
- Activity Heatmap: GitHub-style activity visualization showing game frequency over time
- Game History: Browse and filter through all your past games with monthly archives
- Profile Information: Display player avatar, username, rating, and performance metrics
- Interactive Chessboard: Navigate through game moves with forward/backward controls
- Stockfish Integration: Real-time engine analysis with evaluation scores
- Evaluation Bar: Visual representation of position evaluation for both sides
- Move Navigator: Chess.com-style move list with easy navigation
- Framework: Next.js 16 with React 19
- Language: TypeScript
- Styling: Tailwind CSS with custom configurations
- Chess Libraries:
chess.js- Chess game logicreact-chessboard- Interactive chessboard component
- Chess API: chess-web-api for Chess.com data
- Engine: Stockfish 17 for game analysis
- Charts: Recharts for data visualization
- UI Components: Radix UI primitives
- Icons: Lucide React & React Icons
-
Clone the repository
git clone https://github.com/prathmesh796/chessmate.git cd chessmate -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- On the home page, enter a Chess.com username in the first search box
- Click "Search" to view the player's profile
- Explore:
- Stats Banner: View ratings and performance across different game modes
- Activity Heatmap: See game frequency patterns
- Previous Games: Browse game history by month
- Profile Sidebar: View player information and statistics
- On the home page, enter a Chess.com username in the second input box
- Click "Review" to access the game review interface
- Use the navigation controls to:
- Step through moves forward and backward
- View Stockfish evaluation for each position
- Analyze the evaluation bar for position assessment
chessmate/
├── app/
│ ├── page.tsx # Home page with search functionality
│ ├── search/
│ │ └── [username]/
│ │ └── page.tsx # Player profile page
│ └── review/
│ └── page.tsx # Game review page
├── components/
│ ├── Branner.tsx # Banner component
│ ├── ChessBoard.tsx # Interactive chessboard
│ ├── EvaluationBar.tsx # Stockfish evaluation display
│ ├── HeatMap.tsx # Activity heatmap
│ ├── NavBar.tsx # Navigation bar
│ ├── PreviousGames.tsx # Game history table
│ ├── ProfileAside.tsx # Profile sidebar
│ └── StatsBanner.tsx # Statistics display
├── types/
│ └── types.ts # TypeScript type definitions
├── public/ # Static assets
└── scripts/
└── copy-stockfish.js # Stockfish setup script
ChessMate uses the official Chess.com Public API:
- Player Profile:
https://api.chess.com/pub/player/{username} - Player Stats:
https://api.chess.com/pub/player/{username}/stats - Game Archives:
https://api.chess.com/pub/player/{username}/games/archives - Monthly Games:
https://api.chess.com/pub/player/{username}/games/{YYYY}/{MM}
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Chess.com for providing the public API
- Stockfish for the chess engine
- All the amazing open-source libraries that made this project possible
Made with ♟️ and ☕ by Prathmesh