🎨 Scribble

Real-Time Multiplayer Drawing & Guessing Game

Draw. Guess. Compete. All in real time.

Features • Screenshots • Architecture • Installation • Socket Events • Roadmap

---

📖 About The Project

Scribble is a real-time multiplayer drawing and guessing game inspired by Scribbl.io, where one player draws a secret word while everyone else races to guess it before the clock runs out.

The project is built as a deep dive into real-time synchronization, multiplayer game-state management, and Socket.IO event architecture — going beyond a simple CRUD app into the trickier territory of live, shared, ephemeral state.

✨ Features

🎨 Drawing Real-time stroke sync Brush tool Fill / bucket tool Eraser tool Color palette Adjustable brush size Canvas clear Undo / redo Late-join canvas sync

🎮 Multiplayer Multiplayer rooms Unique room codes Invite link sharing Drawer & guesser roles Automatic drawer rotation Round management Timer system Score tracking & winner detection Join / leave handling Drawer disconnect recovery

💬 Chat & Guessing Real-time chat Guess detection Correct-guess announcements No repeat guesses after success Hidden answers from other players System messages

⚡ Performance

• Stroke-based canvas synchronization
• Snapshot sync for late joiners
• WebSocket communication via Socket.IO
• Optimized canvas rendering

🖼 Screenshots

Home Screen	Gameplay

Word Selection	Final Scoreboard

🏗 Architecture

┌─────────────────────────┐
│  Frontend (React + Tailwind) │
└─────────────┬─────────────┘
              │  Socket.IO
              ▼
┌─────────────────────────┐
│  Backend (Node.js + Express) │
└─────────────┬─────────────┘
              │  In-Memory Room State
              ▼
┌─────────────────────────┐
│        Game Engine         │
└─────────────────────────┘

🛠 Tech Stack

Layer	Technologies
Frontend	React · Vite · Tailwind CSS · Socket.IO Client
Backend	Node.js · Express.js · Socket.IO · CORS
Deployment	Netlify (frontend) · Render (backend)

📂 Project Structure

scribble-game/
│
├── client/
│   ├── src/
│   │   ├── components/
│   │   │   ├── CanvasBoard.jsx
│   │   │   ├── ToolBar.jsx
│   │   │   ├── ChatBox.jsx
│   │   │   ├── PlayerList.jsx
│   │   │   ├── GameBar.jsx
│   │   │   └── WordChooser.jsx
│   │   ├── socket.js
│   │   ├── App.jsx
│   │   └── main.jsx
│   └── package.json
│
├── server/
│   ├── index.js
│   └── package.json
│
└── README.md

🚀 Installation

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/scribble-game.git
cd scribble-game

2. Backend setup

cd server
npm install

Create a .env file:

PORT=3001

Run the server:

npm start

Server runs at http://localhost:3001

3. Frontend setup

Open a new terminal:

cd client
npm install

Create a .env file:

VITE_BACKEND_URL=http://localhost:3001

Run the client:

npm run dev

Frontend runs at http://localhost:5173

🌍 Production Environment Variables

Frontend	Backend
VITE_BACKEND_URL=https://your-render-backend.onrender.com	PORT=3001

🔌 Socket Events

Client → Server join-room draw-stroke fill-canvas clear-canvas undo-action redo-action start-round choose-word send-message canvas-sync

Server → Client room-update draw-stroke fill-canvas clear-canvas word-choices round-started timer-update round-ended correct-guess receive-message canvas-sync system-message game-ended

🎯 Game Flow

 Create Room
     │
     ▼
 Invite Players
     │
     ▼
 Drawer Chooses Word
     │
     ▼
 Drawing Starts ──────► Players Guess
     │                        │
     ▼                        │
 Timer Ends / Everyone Guesses ◄
     │
     ▼
 Drawer Rotates ──► Next Round
     │
     ▼
 Game Ends ──► Winner Announced

🧠 Challenges Solved

• ✅ Real-time multiplayer synchronization
• ✅ Canvas state management
• ✅ Undo/redo synchronization
• ✅ Late-join synchronization
• ✅ Drawer rotation logic
• ✅ Role-based gameplay permissions
• ✅ Socket event architecture
• ✅ Room state management

🔮 Future Improvements

• Avatar system
• Spectator mode
• AI word generation
• Private rooms with passwords
• Drawing replay system
• Mobile responsive UI
• Persistent leaderboard
• Redis for horizontal scaling
• Docker deployment
• Kubernetes support

🤝 Contributing

Contributions are welcome! To get started:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📜 License

This project is licensed under the MIT License.

👨‍💻 Author

Dev Jain

⭐ If you liked this project, consider giving it a star! ⭐