skribbl.io Clone

A clone of the game skribbl.io

Comment

Skribbl.io Clone

A real-time drawing and guessing game inspired by Skribbl.io, built with Node.js, React, and TypeScript. Players join rooms, draw, and guess words within a time limit.

Tech Stack

Node.js Socket.IO Redis Vite TypeScript React Docker

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:

    • connect - Client connects to the server.
    • disconnecting - Client disconnects from the server.
    • joinRoom - Client joins a room.
    • leaveRoom - Client leaves a room.
    • startGame - Client starts the game.
    • draw - Client sends drawing data.
    • guess - Client sends a guess.
    • changeSettings - Client changes game settings.
    • wordSelect - Client selects a word.

  • Server Events:

    • joinedRoom - Server confirms client has joined the room.
    • playerJoined - Server notifies when a player joins.
    • playerLeft - Server notifies when a player leaves.
    • gameStarted - Server notifies when the game starts.
    • gameEnded - Server notifies when the game ends.
    • drawData - Server sends drawing data to clients.
    • guessed - Server notifies when a word is guessed.
    • turnEnded - Server notifies when a turn ends.
    • chooseWord - Server requests the drawer to choose a word.
    • wordChosen - Server sends the chosen word to clients.
    • settingsChanged - Server notifies when settings are changed.
    • 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

   git clone https://github.com/DivyanshuLohani/skribble-clone.git
   cd skribbl-clone

### Start a redis server

   docker run -d -p 6379:6379 redis

### Start the server

   cd server 
   npm install && npm run dev

### Start the client

   cd client
   npm install && npm run dev

### Playing http://localhost:5173

Preview

!Watch the video

Share this project:

Updates