mystery-box-p

Inspiration

Mystery Box was born from a simple observation: Reddit communities love word games, but existing games lack social interaction and community-driven content. We wanted to create something that combines the addictive nature of Wordle with the collaborative spirit of Reddit, where players don't just solve puzzles—they create them, vote on them, and compete together.

What it does

Mystery Box is an interactive word-guessing game built directly into Reddit using Devvit. Each day, players get 3 attempts to solve a mystery word or phrase by revealing letters progressively. As the community makes more guesses, hints unlock automatically. But here's the twist: players create the mysteries themselves. Submit your own puzzles, vote for your favorites, and watch your creation become tomorrow's challenge!

Core Features:

🎯 Progressive Mystery System - Letters reveal gradually with community-unlocked hints
🏆 Live Leaderboard - Track top solvers and compete for bragging rights
✍️ Mystery Creator Studio - Build custom puzzles with hints and categories
🗳️ Community Voting - Democratic selection of tomorrow's mystery
📊 Stats Dashboard - Track your solve rate, streaks, and personal records
📢 Activity Feed - Real-time updates of community achievements
🎉 Celebration Animations - Confetti explosions and success overlays
🎓 Interactive Tutorial - Onboarding system for new players

How we built it

Built entirely on Reddit's Devvit platform using modern web technologies:

Frontend:

React 19 with TypeScript for type-safe component development
Vite 7 for lightning-fast builds and hot module replacement
Tailwind CSS 4 for responsive, utility-first styling
Canvas Confetti for celebration animations

Backend:

Express server handling game logic and API routes
Redis for real-time state management and leaderboards
Reddit API integration for user authentication and community features
Hono framework for efficient request routing

Architecture: We implemented a clean separation between client and server logic. The game state is stored in Redis with keys structured per post, allowing multiple simultaneous games across different communities. We used progressive reveal mechanics where each community guess threshold unlocks new hints, creating collaborative progression.

Challenges we ran from

State Synchronization - Managing real-time updates across multiple players required careful Redis key structuring and efficient polling strategies
White Screen Debug - Encountered a tricky bug where the app rendered nothing due to mismatched component props (activities vs events). Fixed by adding default values and proper prop validation
Devvit Context - Learning that the app requires Devvit's context (postId, username) and can't run standalone with npm run dev. Had to use devvit playtest instead
Progressive Hints System - Designing the reveal thresholds to balance difficulty and engagement. Too easy and mysteries solve instantly; too hard and players lose interest
Community Voting Logic - Implementing fair voting with anti-spam measures while keeping the UX simple and engaging