ClueDraw | Devpost

Inspiration

I was inspired by 4 pics 1 word game and the classic rebus puzzle format. I wanted to create something that combines the creativity of Pictionary with the wordplay of rebus puzzles, but with a twist - instead of racing against time. The idea came from watching how people naturally break down complex words into visual components when explaining things. I thought: "What if I turned that into a game where the community creates and solves visual word puzzles together?" Reddit's platform was perfect for this because drawings could live as posts, creating organic discovery and social interaction.

What it does

ClueDraw is a rebus-style drawing puzzle game that lives entirely within Reddit. Players take on two roles:

As Creators: You receive a word (like "SUNFLOWER"), break it into visual parts (SUN + FLOWER), and draw each part on a touch-enabled canvas. Your drawing gets posted to the subreddit with a custom splash screen, and you earn XP when someone first solves it.

As Solvers: You browse Reddit posts, click "Play Now" on ClueDraw puzzles, view all sketches in a 2×2 grid, and guess the word. With unlimited attempts, you can experiment freely until you crack it. First solvers get bonus XP!

The game features a full progression system with 3 difficulty tiers (Easy/Medium/Hard), 20 achievements, daily login bonuses, 7-day streak rewards, a global leaderboard, and community word submissions. Players can also suggest new words with hints - if moderators approve them, they earn +5 XP. The immersive full-screen drawing mode provides a distraction-free creation experience, while the mobile-first design ensures smooth gameplay on any device.

How we built it

I built ClueDraw as a full-stack Devvit application using: -Kiro for IDE and Vibe Coding Tools

Devvit's Web Platform for Reddit integration with two entry points: the main game interface and an immersive drawing creator
React 18 + TypeScript for the client with component-based architecture
Express.js for the server with RESTful /api/ endpoints
Redis for data persistence (player profiles, drawings, leaderboard, achievements)
HTML5 Canvas API for real-time drawing with path-based rendering and SVG export
Vite for fast development and optimized production builds
Tailwind CSS for responsive, mobile-first styling

Challenges we ran into

Mobile Canvas Performance: Getting smooth drawing on mobile devices was tricky. I had to implement preventDefault() on all touch events to prevent scrolling, use path-based rendering instead of continuous redrawing, and optimize the canvas size to balance quality with performance.

Immersive Mode Integration: Implementing Devvit's immersive mode for the drawing creator required careful coordination between two separate entry points. I had to ensure the drawing session could open in full-screen, maintain state during creation, and properly close after submission while returning users to Reddit.

Achievement System Complexity: Tracking 20 different achievements across 5 categories with various progress types (drawings created, correct guesses, level milestones, streaks, first solves) required a flexible system. I built a two-step unlock-then-claim mechanism to give players control over when they receive XP rewards.

Accomplishments that we're proud of

Immersive Drawing Experience: The full-screen drawing creator with touch-optimized controls provides a distraction-free creation experience that feels native to mobile devices.
Community Word Submissions: Players can contribute to the game's word database and earn XP when moderators approve their suggestions. This creates a self-sustaining content ecosystem.
Smooth Mobile Performance: The 2×2 sketch grid, touch-optimized canvas, and responsive layouts work flawlessly on mobile devices where most Reddit users play.
Complete Progression System: 3 difficulty tiers, 20 achievements, daily login bonuses, streak rewards, and a global leaderboard create multiple progression paths and keep players engaged.
Rebus Puzzle Mechanics: The letter substitution system (e.g., draw "SON" for "SUN" with U=O clue) adds creative wordplay that makes puzzles more interesting than traditional drawing games.

What we learned

Mobile-First is Essential: Most Reddit users are on mobile, so designing for touch first and desktop second was crucial. I learned to prioritize large touch targets, prevent scroll conflicts, and optimize layouts for small screens.

Community Content is Powerful: The word submission feature turned players into content creators. I learned that giving users tools to contribute to the game creates investment and longevity.

Immersive Mode Enhances Focus: Devvit's immersive mode for the drawing creator significantly improved the creation experience by removing distractions and providing a dedicated full-screen canvas.

Achievement Systems Drive Engagement: The two-step unlock-then-claim system gave players agency over their progression and created satisfying "claim all" moments when multiple achievements unlocked at once.

SVG Export is Efficient: Storing drawings as SVG instead of raster images reduced storage requirements and enabled scalable rendering across different screen sizes.