Inspiration
I grew up solving Hidato puzzles in the newspaper and spent way too many hours on pixel art as a kid. One day, it just clicked: what if solving a number puzzle revealed pixel art? That "aha" moment became Pixel Path. I wanted to build a puzzle game that not only challenges players individually but brings a subreddit community together through shared daily puzzles and player-created content.
What it does
Pixel Path is a daily number-tracing puzzle game embedded natively in Reddit. Players trace a sequential path (1→2→3→...) through a grid by tapping adjacent cells, including diagonals. As they solve correctly, each cell reveals a color, and a hidden pixel art image gradually emerges. The game features:
- Daily puzzles with a community leaderboard.
- Architect Mode lets anyone design their own pixel art and submit it to the community. After which, the algorithm automatically converts the art into a puzzle.
- Moderation tools for curating the best user-created puzzles as daily features.
- Competitive rankings based on solve time.
How I built it
Pixel Path is built on Reddit's Devvit platform using a modern web stack:
- Frontend: React 19 + TypeScript with Tailwind CSS for responsive, mobile-first design
- Backend: Express server on Devvit with Redis for persistent storage (puzzles, scores, progress)
- Build tooling: Vite for fast compilation and hot-reload during development
- Architecture: Custom post types with dual entrypoints, a browse/splash screen, and the full game view.
- Platform: Built entirely on Reddit's Devvit, leveraging its webview, storage, and mod tools
Challenges I ran into
- Mobile viewport mismatch:
100vhdoesn't account for Reddit's app chrome (close button, vote bar), grid was getting cut off on real phones. Fixed with100dvhand flexible percentage-based layouts. - Responsive number sizing: Making grid numbers readable on phones without overflowing on desktop required careful
clamp()tuning with mobile-specific breakpoints. - Puzzle validation in Architect Mode: Building a puzzle editor that's intuitive enough to create valid puzzles against the submitted pixel arts, while enforcing adjacency rules and ensuring solvability was a complex design challenge.
- Moderation workflow: Building a review pipeline where community puzzles are hidden until moderator approval, with proper state management across Redis.
Accomplishments that I'm proud of
- The reveal moment: Watching gray cells transform into colorful pixel art as you solve is genuinely satisfying; it makes every puzzle feel rewarding.
- Full game loop on Reddit: Players can discover, play, compete, and create, all without leaving Reddit. It feels truly native.
- Architect Mode: Empowering users to create their own puzzles turns players into contributors, building a self-sustaining content pipeline for the community.
- Responsive design: The game works beautifully on mobile, desktop, and full screen, a consistent experience everywhere Reddit runs.
What I learned
- Devvit's platform power: Custom post types, Redis storage, and mod action triggers make it possible to build surprisingly rich applications directly in Reddit.
- Design for the smallest screen first: Starting with mobile constraints and scaling up produces much better responsive layouts than the reverse.
- Community-driven content matters: Building creation tools alongside the game itself transforms passive consumers into active contributors.
What's next for Pixel Path
- Themed puzzle packs: Seasonal and holiday-themed pixel art collections
- Achievement system: Badges for streaks, speed records, and puzzle creation milestones
- Multiplayer races: Real-time head-to-head puzzle solving against other Redditors
- Bigger grids: Support for larger, more complex pixel art with richer detail, broken into multiple smaller puzzles, which, upon completing all reveals the final masterpiece.
Built With
- devvit
- react
- redis
- tailwind
- typescript
- vite
Log in or sign up for Devpost to join the conversation.