Inspiration We were inspired by the classic online game Skribbl.io and the excitement of real-time collaborative drawing and guessing with friends. Our goal was to recreate that fun, social experience while exploring modern web technologies and rapid prototyping tools.
What it does Dash & Draw is a real-time, multiplayer drawing and guessing game. Players join a lobby, customize their avatars, and take turns drawing a secret word while others guess in the chat. The game features live drawing, chat, score tracking, and round management—all synchronized instantly for every player.
How we built it • Frontend: Built with React and Vite for a fast, responsive UI. We used React Context for state management and the HTML5 Canvas API for drawing. • Backend: Node.js with Express and Socket.IO handles real-time communication, game logic, and player management. • Real-time: Socket.IO ensures instant updates for drawing, chat, and game state. • Development Environment: We used the Bolt.new AI code editor, which enabled rapid, collaborative coding and direct deployment from the editor itself.
Challenges we ran into • Real-time Sync: Keeping drawing and game state perfectly synchronized for all players. • State Management: Coordinating complex game logic between server and clients. • Responsive Canvas: Ensuring the drawing experience works smoothly across devices. • User Experience: Handling disconnects, resets, and smooth transitions between game phases.
Accomplishments that we're proud of • Built a fully functional, real-time multiplayer game from scratch in a short time. • Achieved seamless live drawing and chat with minimal lag. • Designed a clean, intuitive UI with avatar customization. • Leveraged Bolt.new for fast prototyping and direct deployment.
What we learned • Deepened our understanding of WebSockets and real-time app architecture. • Learned to manage multiplayer game state with React and Node.js. • Gained experience in rapid development and deployment using Bolt.new.
What's next for Dash & Draw • AI Art with Pica: Auto-generate word prompts or avatar images using Pica’s AI image generation, making each game session unique. • Improve UX: Animations, sound effects, and mobile support. • Moderation Tools: Add reporting and filtering for a safer community. • AI Voice with ElevenLabs: Add AI-powered voice narration for game instructions, or let users hear their guesses and scores read aloud for accessibility and fun. •Competitive Leaderboard: Introduce a global leaderboard where players can see their rankings based on total points, win streaks, or creative drawings. This will foster competition, motivate players to improve, and make the game more addictive and engaging. • In-Game Store & Pricing: Launch an in-game store where players can buy new characters, emojis, and stickers using virtual coins or real money. Integrate with RevenueCat to manage subscriptions and one-time purchases, allowing players to unlock exclusive avatars, rare emojis, or animated stickers to personalize their experience. • Seasonal Rewards & Challenges: Add weekly or seasonal challenges with special rewards for top leaderboard players, encouraging regular play and community participation. • Social Sharing: Let players share their leaderboard rank, achievements, or purchased items on social media to attract more users and build a vibrant community. • Personalized Progress Tracking: Give each player a profile page showing their stats, purchase history, and earned badges, making progress visible and rewarding. • Add More Features: Custom word lists, private rooms, and in-game power-ups.
Built With
- avataaar.io
- css
- express.js
- html
- javascript
- node.js
- react
- restapi
- socket.io
Log in or sign up for Devpost to join the conversation.