🎨 Skribbl Clone

A full-stack, real-time multiplayer drawing and guessing game inspired by Pictionary. Built from scratch to handle complex state synchronization, live networking, and game logic.

🚀 Live Demo

Play here: https://skribblfrontend.vercel.app/

✨ Features

🎮 Core Gameplay

• Real-time Whiteboard: Instant drawing synchronization using Socket.io and HTML5 Canvas.
• Game Loop: Automated turn management, word selection, and round rotation.
• Scoring System: Dynamic point calculation based on guessing speed (timer-based).
• Word Selection: Drawer gets 3 random word options to choose from.

🛠 Technical Highlights

• Room Architecture: Isolated game rooms allowing multiple simultaneous matches.
• State Recovery: Handles browser refreshes and disconnects without losing user state or score.
• Ghost Cleanup: Server automatically detects and removes inactive users to prevent memory leaks.

---

🛠️ Tech Stack

• Frontend: React.js, Vite, Bootstrap, HTML5 Canvas API
• Backend: Node.js, Express
• Real-time Communication: Socket.io (WebSockets)
• Deployment: Vercel (Frontend), Render (Backend)

---

⚙️ Local Setup Guide

Follow these steps to run the project locally on your machine.

Prerequisites

• Node.js installed
• Git installed

1. Clone the Repository

git clone https://github.com/upendra-coder/skribbl.git
cd skribbl