Posted on Nov 2

QuickDoodle: Real-Time Drawing & Guessing Game (with AI Agents Coming Soon!) – Hacktoberfest 2025 Spotlight

#devchallenge #hacktoberfest #opensource #webdev

Hacktoberfest: Maintainer Spotlight

This is a submission for the 2025 Hacktoberfest Writing Challenge: Maintainer Spotlight

🎨 QuickDoodle — A Real-Time Drawing & Guessing Game Built for Hacktoberfest 2025

Hey DEV community! 👋 I'm UsmanDevCraft, and I’m thrilled to spotlight QuickDoodle — my passion project that’s part Skribbl.io, part creative chaos, and 100% open for your Hacktoberfest contributions!

Whether you're a frontend wizard, backend ninja, or just love multiplayer games, this is your chance to jump in, fix bugs, add features, or even ship that AI bot we’ve all been dreaming about.

🚀 What Is QuickDoodle?

QuickDoodle is a real-time multiplayer drawing & guessing game where players compete in private or global rooms to draw secret words while others race to guess.

Think:

✏️ Smooth canvas drawing with pens, erasers, and colors
⏱️ Fast-paced rounds with word prompts
🏆 Scoring based on speed & accuracy
💬 Real-time chat & player reactions
🌍 Global public rooms or private invite-only lobbies

And yes — AI bots are coming so you can play solo against a guessing machine!

🎮 The Player Flow (Step-by-Step)

Let’s walk through how a game actually works — because nothing beats seeing the magic:

1. Landing Page — Choose Your Adventure

Create Room → You’re the Room Creator (and first Riddler)
Join Room → Enter a code to hop into a friend’s private game
Join Global Room → Instantly match with players worldwide

All powered by Socket.IO — you’re connected in <1s.

2. Game Room — The Arena

Left Panel: Player list, scores, chat
Top: Massive shared canvas
Right Panel: Word hints (for guessers), chat box, round info
Top Bar: Current drawer, round number, theme

3. Round Flow — Draw, Guess, Swap!

🎮 Round Flow — Draw, Guess, Swap!

Phase	Who’s Active?	What Happens
1. Drawing Phase	Current Drawer	A random word is auto-assigned (no choices). Drawer uses pen/eraser — strokes sync instantly via Socket.IO
2. Guessing Phase	All Other Players	Players type guesses in a dedicated guess input (separate from chat). Chat is for fun, hints, or riddles from the drawer!
3. Correct Guess!	First Guesser	Instant feedback: “PlayerX guessed it!” → points awarded based on speed. Drawer gets bonus if guessed fast
4. Round End	All Players	Scores update live. Drawer rotates automatically → next player becomes the **Drawer (Riddler)
5. Mid-Round Switch	Current Drawer	Drawer can toggle between drawing & riddling anytime using a “Switch to Riddle / Draw” button
6. Game Continues	All	No round limit — play as long as you want! Ends when players leave or manually stopped

🏠 Room Rules

Room Type	Player Limit	Notes
Private Room	No limit	Invite-only via shareable code
Global Room	12 players	Auto-balanced. (3 in testing)

Pro Tip: The creator is only the Riddler in Round 1. After that, it rotates fairly!

🛠️ Tech Stack — Full-Stack Real-Time Power

Layer	Tech
Frontend	Next.js (App Router), TypeScript, Tailwind CSS, Socket.IO Client, Turbopack
Backend	Node.js, Express, Socket.IO Server, MongoDB (Mongoose)
Realtime	WebSockets via Socket.IO
Utilities	`uuid`, `random-words`, SRP-driven modular socket handlers

🔗 Repo Links (🥹 Star Them! 🌟)

Frontend: github.com/UsmanDevCraft/Quick_Doodle
Backend: github.com/UsmanDevCraft/quick_doodle_backend

🏗️ Project Structure (At a Glance)

Frontend (`Quick_Doodle`)

/src ├── app/ → Pages (landing, /game/[roomid]) ├── components/ → Reusable UI (Button, Modal, Canvas, Chat) ├── hooks/useSocket.ts → Real-time connection logic ├── lib/socket.ts → Socket instance ├── types/ → TS interfaces └── views/ → Page-level components

Backend (`quick_doodle_backend`)

/ ├── sockets/ │ ├── gameEvents/ → drawing.js, guessWord.js │ ├── roomEvents/ → createRoom.js, joinGlobal.js │ ├── chatSocket.js │ └── gameSocket.js → Main orchestrator ├── models/Room.js → MongoDB schema └── index.js → Express + Socket.IO server

🔥 Why I Maintain This Project

I built QuickDoodle because:

I love real-time apps — watching strokes appear instantly is pure magic
I wanted a fun, social game that brings people together (even remotely)
It’s a perfect playground for learning WebSockets, state sync, and scalable backend design

🤝 How to Contribute (Hacktoberfest-Ready!)

We’ve got clear issues, good first tasks, and documentation — perfect for your PRs!

🚀 Quick Start

# Frontend git clone https://github.com/UsmanDevCraft/Quick_Doodle.git cd Quick_Doodle npm install npm run dev

# Backend git clone https://github.com/UsmanDevCraft/quick_doodle_backend.git cd quick_doodle_backend npm install npm run dev

Frontend connects to http://localhost:3000 → runs on :3001 (Next.js)

🎯 Contribution Ideas

Area	Ideas
Frontend	Dark mode toggle, mobile canvas improvements, drawing undo/redo
Backend	Leaderboard persistence, vote-to-kick logic, room passwords
Gameplay	Themed word packs (Animals, Movies, Memes), sound effects
AI	Integrate a vision model to guess drawings (solo mode!)
UX	Confetti on correct guess, "You’re close!" hints

Label Alert: Look for hacktoberfest, good first issue, help wanted

🧠 Future Roadmap

AI Guessing Bot (solo mode)
User accounts + stats
Save & replay past games
Mobile PWA support
Leaderboards (global + friends)

🌟 Final Words

QuickDoodle isn’t just code — it’s laughter, chaos, and bad drawings shared in real time.

If you’ve ever wanted to:

Ship a full-stack real-time app
Learn Socket.IO in action
Or just draw a potato and call it “modern art”

…then this is your project.

Let’s make Hacktoberfest 2025 legendary.

Pull requests, issues, ideas, memes — all welcome.

⭐ Star both repos

🔗 Share this post

🚀 Open a PR

And I’ll personally review it with emojis, feedback, and virtual high-fives.

Tags: hacktoberfest, hacktoberfest2025, javascript, typescript, nodejs, nextjs, socketio, mongodb, realtime, multiplayer, game-dev, open-source