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
Built with ❤️ by UsmanDevCraft let’s connect on GitHub — see you in the canvas!
Top comments (0)