A real-time, multiplayer chess application built with React and Socket.IO that brings the classic game of chess to your browser with a modern, responsive interface.
- Real-time Multiplayer - Play against opponents in real-time using WebSocket connections
- Chess Engine - Powered by chess.js for accurate move validation and game logic
- Interactive Board - Smooth drag-and-drop piece movement with visual feedback
- Timer System - Built-in game clocks with countdown timers for each player
- Move History - Complete move notation tracking with game replay capability
- Audio Feedback - Sound effects for moves, captures, and game events
- Player Profiles - Display player information and captured pieces
- Responsive Design - Optimized for desktop and mobile devices using Tailwind CSS
- Game Controls - Resign, abort, and rematch functionality
- Waiting Room - Lobby system for matchmaking and game initialization
- Node.js (v14 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/sachinkg-13/chess.com.git cd chess.com -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Start the game server (in a separate terminal)
npm run server
-
Open your browser
Navigate to
http://localhost:5173to start playing!
- Join a Game - Click "Start New Game" from the home page
- Wait for Opponent - The first player gets white pieces, second player gets black
- Make Your Move - Drag and drop pieces or click to select and move
- Watch the Clock - Each player has 10 minutes on their clock
- Win the Game - Checkmate your opponent or force them to run out of time!
- React - UI component library
- Vite - Build tool and development server
- Tailwind CSS - Utility-first CSS framework
- react-chessboard - Interactive chess board component
- Lucide React - Icon library
- Express.js - Web server framework
- Socket.IO - Real-time bidirectional communication
- chess.js - Chess game logic and move validation
chess.com/
├── public/ # Static assets
│ ├── audios/ # Game sound effects
│ └── js/ # Additional scripts
├── src/
│ ├── components/ # React components
│ │ ├── Game/ # Game-specific components
│ │ │ ├── Board.jsx
│ │ │ ├── MoveHistory.jsx
│ │ │ └── PlayerProfile.jsx
│ │ ├── UI/ # Reusable UI components
│ │ │ └── Modal.jsx
│ │ ├── GameSidebar.jsx
│ │ ├── HomePage.jsx
│ │ └── WaitingRoom.jsx
│ ├── hooks/ # Custom React hooks
│ │ ├── useChessAudio.js
│ │ └── useChessGame.js
│ ├── App.jsx # Main application component
│ └── main.jsx # Application entry point
├── server.js # Socket.IO game server
└── package.json # Project dependencies
| Command | Description |
|---|---|
npm run dev |
Start Vite development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run server |
Start game server |
npm run lint |
Run ESLint |
The game server runs on port 3000 by default. You can modify this in server.js:
const PORT = process.env.PORT || 3000;Default game time is 10 minutes per player. Adjust in App.jsx:
const [whiteTime, setWhiteTime] = useState(600); // in seconds
const [blackTime, setBlackTime] = useState(600);The project uses Tailwind CSS for styling. Customize the theme in tailwind.config.js:
module.exports = {
theme: {
extend: {
// Add your custom colors, fonts, etc.
},
},
}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 licensed under the MIT License - see the LICENSE file for details.
- chess.js - Chess game logic
- react-chessboard - Chess board component
- Socket.IO - Real-time communication
- Tailwind CSS - Styling framework
Sachin KG - @sachinkg-13
Project Link: https://github.com/sachinkg-13/chess.com