A real-time multiplayer drawing and guessing game inspired by Skribbl.io, built with modern web technologies.
| Technology | Purpose |
|---|---|
| ⚛️ React 18 | UI Framework with Hooks |
| 📘 TypeScript | Type-safe development |
| ⚡ Vite | Lightning-fast build tool |
| 🎨 Tailwind CSS | Utility-first styling |
| 🧩 shadcn/ui | Beautiful UI components |
| ☁️ Lovable Cloud | Backend, Database & Realtime |
| 🔄 WebRTC | Peer-to-peer voice chat |
| 📡 Edge Functions | Serverless signaling server |
- 🖌️ Real-time Drawing Canvas - Smooth drawing with multiple tools
- 🎯 Word Guessing - Guess what others are drawing
- ⏱️ Timed Rounds - Configurable round duration
- 🏆 Live Scoreboard - Track points in real-time
- 💬 In-game Chat - Send messages and guesses
- ✏️ Pencil with adjustable brush size
- 🎨 Color palette with custom colors
- 🪣 Flood fill (paint bucket)
- ↩️ Undo/Redo support
- 🧹 Clear canvas
- 📥 Download artwork
- 🏠 Create & Join Rooms - Share room codes with friends
- 👥 Real-time Player Sync - See players join/leave instantly
- 🔄 Live Game State - All actions sync across players
- 🤖 Bot Players - Add bots to fill rooms
- 🔊 Join/Leave voice channel
- 🔇 Mute/Unmute controls
- 🗣️ Speaking indicators
- 📡 P2P audio streaming
- 📝 Word difficulty (Easy/Medium/Hard)
- ⏰ Customizable round time
- 🔢 Adjustable max rounds
- 👤 Player limits
| Feature | DrawParty | Skribbl.io |
|---|---|---|
| 🎙️ Voice Chat | ✅ Built-in WebRTC | ❌ Not available |
| 🤖 Bot Players | ✅ Available | ❌ Not available |
| ☁️ Self-hostable | ✅ Open source | ❌ Proprietary |
| 🎨 Download Art | ✅ Save drawings | ❌ Not available |
| 📱 Mobile Support | ✅ Touch optimized | |
| 🔐 Private Rooms | ✅ Room codes | ✅ Available |
| ↩️ Undo/Redo | ✅ Full history | ❌ Limited |
| 🌙 Dark Mode | ✅ Themed | ❌ Light only |
- rooms - Game room configuration and state
- room_players - Players in each room with scores
- room_messages - Chat messages and guesses
- Node.js 18+ & npm
# Clone the repository
git clone <YOUR_GIT_URL>
# Navigate to project
cd <YOUR_PROJECT_NAME>
# Install dependencies
npm install
# Start development server
npm run dev- Create a Room - Enter your name and create a new game
- Share Code - Give the room code to friends
- Wait in Lobby - Toggle ready when everyone joins
- Start Game - Host starts when all are ready
- Draw & Guess - Take turns drawing and guessing words
- Win! - Player with most points wins 🏆
The project uses Lovable Cloud which automatically configures:
VITE_SUPABASE_URL- Backend API URLVITE_SUPABASE_PUBLISHABLE_KEY- Public API keyVITE_SUPABASE_PROJECT_ID- Project identifier
src/
├── components/
│ ├── game/ # Game-specific components
│ │ ├── ChatBox.tsx
│ │ ├── DrawingCanvas.tsx
│ │ ├── GameHeader.tsx
│ │ ├── PlayerCard.tsx
│ │ ├── Scoreboard.tsx
│ │ ├── VoiceControls.tsx
│ │ └── WordSelection.tsx
│ ├── screens/ # Main screen layouts
│ │ ├── GameScreen.tsx
│ │ ├── HomeScreen.tsx
│ │ └── LobbyScreen.tsx
│ └── ui/ # Reusable UI components
├── hooks/
│ ├── useMultiplayerGame.ts # Game state management
│ └── useVoiceChat.ts # WebRTC voice chat
├── types/
│ └── game.ts # TypeScript interfaces
└── integrations/
└── supabase/ # Backend client
- signaling - Handles room creation, player management, game state updates, and ICE server configuration for WebRTC
This project is open source and available under the MIT License.
- Inspired by Skribbl.io
- Built with Lovable
- UI components from shadcn/ui
Made with ❤️ using Lovable