Sync Draw Guess

A realtime multiplayer doodle guessing game

nodejs

react

socketio

tailwindcss

websockets

GitHub Live Demo

Sync Draw Guess

A real-time, multiplayer drawing and guessing game built using Node.js, Socket.IO, React, and TypeScript. Players join rooms, take turns drawing prompts, and compete to guess the drawings in a fun and interactive environment. With real-time canvas synchronization, timeouts for word selection, and smooth drawing experiences, this project captures the excitement of collaborative gameplay.

Tech Stack

Backend

The backend is developed using Node.js and Socket.IO. It handles real-time communication between clients and the server.

Server Events

Client Events:
- code
```
connect
```
  - Client connects to the server.
- code
```
disconnecting
```
  - Client disconnects from the server.
- code
```
joinRoom
```
  - Client joins a room.
- code
```
leaveRoom
```
  - Client leaves a room.
- code
```
startGame
```
  - Client starts the game.
- code
```
draw
```
  - Client sends drawing data.
- code
```
guess
```
  - Client sends a guess.
- code
```
changeSettings
```
  - Client changes game settings.
- code
```
wordSelect
```
  - Client selects a word.
Server Events:
- code
```
joinedRoom
```
  - Server confirms client has joined the room.
- code
```
playerJoined
```
  - Server notifies when a player joins.
- code
```
playerLeft
```
  - Server notifies when a player leaves.
- code
```
gameStarted
```
  - Server notifies when the game starts.
- code
```
gameEnded
```
  - Server notifies when the game ends.
- code
```
drawData
```
  - Server sends drawing data to clients.
- code
```
guessed
```
  - Server notifies when a word is guessed.
- code
```
turnEnded
```
  - Server notifies when a turn ends.
- code
```
chooseWord
```
  - Server requests the drawer to choose a word.
- code
```
wordChosen
```
  - Server sends the chosen word to clients.
- code
```
settingsChanged
```
  - Server notifies when settings are changed.
- code
```
guessFail
```
  - Server notifies when a guess fails.

Room System

Players join a room using a unique room ID. If the drawer takes too long to choose a word, one is automatically assigned. Each turn has a time limit for guessing.

Frontend

The frontend is developed using React with TypeScript and Vite for a fast development experience.

Installation

Clone the repository

bash
git [object Object] https://github.com/DivyanshuLohani/SyncDrawGuess.git
[object Object] SyncDrawGuess

Start a redis server

bash
docker run -d -p 6379:6379 redis

Start the server

bash
[object Object] server 
npm install && npm run dev

Start the client

bash
[object Object] client
npm install && npm run dev

Playing

code
http://localhost:5173

Preview

!Watch the video