Scribble

🎨 Inspiration

During group hangouts and online calls, games like Skribbl.io always brought out our competitive and creative sides. I wanted to recreate that fun—but with a personal twist. I added customizable avatars, hint-based guessing mechanics, a real-time chat with intelligent feedback, and smooth drawing tools to make the experience even more enjoyable and polished.

I built Scribble not just as a game, but as a platform where creativity meets fast thinking, all in real time!

🛠️ What It Does

Scribble is a real-time multiplayer drawing and guessing game. In each round:

• One player selects a word from a list and draws it on a shared canvas.
• Others try to guess the word through the chat before time runs out.
• Players earn more points the faster they guess.
• The drawing player earns points only if someone guesses correctly.
• If no one guesses, the drawer loses points.

The game rotates through players across multiple rounds, and the one with the most points at the end wins!

⚙️ Key Features

• 🧑‍🎨 Avatar customization (animated eyes, mouth, and colors)
• ✏️ Smooth real-time canvas synced with Socket.IO
• 🎯 Scoring system based on speed and accuracy
• 🧠 Hint system: Letters of the word are revealed gradually
• 🛠 Drawing tools: brush, color picker, undo/redo, eraser, bucket fill
• 💬 Real-time chat and feedback for close guesses
• 🔗 Room creation and invite link sharing
• 🔄 Fully turn-based game logic with live scoreboard

🧪 How I Built It

• Frontend: React.js + Tailwind CSS + Canvas API (custom brush and animation logic)
• Backend: Node.js + Express.js
• Real-time Communication: Socket.IO
• Data Handling: (Optional) MongoDB / Firebase for storing user settings and custom word lists

I structured the project with clean separation between backend and frontend, and handled WebSocket events for drawing, chatting, guessing, player turns, and hint reveals.

🚧 Challenges I Faced

• Ensuring low-latency, real-time drawing for all clients
• Designing a clean and intuitive drawing UI with multiple tools
• Building a fair and dynamic scoring system
• Handling edge cases like players leaving mid-game or submitting invalid guesses
• Syncing hint timers and turn rotation logic for all players

🌱 What I Learned

• Deepened understanding of WebSocket communication using Socket.IO
• Learned to manage complex game state across multiple clients
• Improved UI/UX design for multiplayer gaming interfaces
• Got better at debugging real-time issues and syncing animations across browsers

🚀 What’s Next

• Emoji reactions and sound effects
• Leaderboard animations
• AI-generated word packs by difficulty
• Timed game modes and challenge rounds

Built With

• github
• html5-canvas-api
• javascript
• node.js
• react.js
• socket.io
• tailwind-css
• vite