Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A real-time multiplayer chess game ♟️ built with the MERN stack. ✨Features include 🔐user authentication, live gameplay, ✅move validation, and a clean, responsive UI 📱.

Notifications You must be signed in to change notification settings

Dev-omkarCh/PlayChess

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

reactJs tailwindcss socket.io mongodb expressjs

♟️Multiplayer Chess Game

An interactive, real-time multiplayer chess game built with the MERN stack and Socket.io. Play classic chess with your friends, track game state in real-time, and enjoy a responsive UI.

📚 Table of Contents


📖 Introduction

This MERN Chess Game allows two players to connect and play a full game of chess in real-time using Socket.io. The goal is to demonstrate both real-time bi-directional communication using Socket.io and complex game logic like chess move validation, check/checkmate detection, and multiplayer syncing.

PlayChess is a modern, real-time multiplayer chess game built with React, Node.js, and Socket.io. It allows players to compete in online chess matches, track their game history, and analyze their performance.


🛠 Tech Stack

Frontend:

  • React.js
  • TailwindCSS
  • Axios
  • React Router
  • Socket.io-client
  • zustand

Backend:

  • Node.js
  • Express.js
  • MongoDB (optional for game history or matchmaking)
  • Socket.io
  • bcryptjs & JWT (for authentication)

✨ Features

  • ♟️ Classic two-player chess gameplay
  • 🔄 Real-time multiplayer via Socket.io
  • ✅ Valid chess move rules + turn management
  • 📋 Leaderboard system with ELO ratings
  • 🧑 User profiles with bio, avatar, and stats
  • 🕓 Game history (wins, losses, draws, opponents)
  • 📊 Match analytics (opening, duration, result, mistakes)
  • ⚙️ Account settings and preferences
  • 🎯 Random matchmaking based on ELO rating
  • 🌐 Secure game rooms via room IDs
  • 📱 Responsive design with dark mode support

📸 Demonstration

1. Landing Page

Home Page

2. Authentication Page

Authentication

3. Game Lobby

Game lobby

4. Invite Friend Page

Can Send & Accept friend or game request

Invite Friend

Invite Friend page contains functionalities :-

  1. Inbox : Inbox contains all the request from other player, it can be friend request and Game request.

Inbox


  1. Message box : Message box contains all the message of actions like accepted a friend request and send a friend request.

Inbox


  1. Online friends : Shows all online friends. If friend is online, then only you can send a game request to your friend.

Inbox


  1. Search friends : Shows all online friends. If friend is online, then only you can send a game request to your friend.

Inbox

5. Game Page

Inbox

6. Result Model

won

lose

7. Leaderboard

lose

8. Profile

lose

9. Random Matchmaking

lose

🚀 Project Start Guide

Prerequisites

  • Node.js and npm installed
  • MongoDB running locally or a cloud DB URI (e.g., MongoDB Atlas)

Clone the repository

git clone https://github.com/Dev-omkarCh/PlayChess.git
cd play-chess

Backend setup

cd backend
npm i express mongoose cors jsonwebtoken bcryptjs cookie-parser
npm i nodemon -D
npm run server

Frontend Setup

cd frontend
npm create vite@latest .
npm i react-router-dom react-icons axios zustand 
npm run dev

Tailwind Css Setup

npm install tailwindcss @tailwindcss/vite
npx tailwindcss init # if not works, create the file: tailwind.config.js

Environment Variables

Create a .env file inside the server/ directory with the following keys:

PORT=4000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

🪛 Future Enhancements

  • Spectator Mode: Allow users to watch ongoing games.
  • AI Opponent: Add a single-player mode with AI.
  • Chat System: Enable in-game chat between players.
  • Game Replay: Replay completed games move by move.

👨‍💻 Author

🔗 Socials

LinkedIn
Twitter
Instagram
Facebook

About

A real-time multiplayer chess game ♟️ built with the MERN stack. ✨Features include 🔐user authentication, live gameplay, ✅move validation, and a clean, responsive UI 📱.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages