Project Story: Block Party 🎮
Inspiration: Bringing Daily Puzzle Rites to Reddit
Reddit is the home of online communities, where users share, debate, and bond over common interests. Inspired by the massive success of daily ritual games like Wordle, we wanted to create a simple, mentally stimulating daily puzzle that subreddits could gather around, solve, and compare scores directly within their feeds.
Block Party was built to bring this daily puzzle rite directly to Reddit. It is a spatial-logic grid puzzle game where players are challenged to fit a set of colored block shapes onto a grid with randomly generated blocker constraints. By deploying directly on the Reddit Developer Platform (Devvit), we created an interactive, shareable game that integrates seamlessly into any subreddit, transforming passive text scrolling into a collaborative daily ritual.
How We Built It: Devvit & React Integration
To provide a smooth, zero-latency gaming experience inside Reddit posts, we built the application with a modern web stack tailored to Reddit's ecosystem:
- Frontend UI: A clean, responsive single-page application built on React 19, TypeScript, and styled using Tailwind CSS v4 for a high-fidelity look that scales well on both mobile and desktop screens. Compiled with Vite into web assets.
- Backend & API Routing: Powered by Hono.js and integrated into Reddit's custom webview runner (
@devvit/web). - Data Persistence & Leaderboards: Leverages Reddit's built-in Redis storage client. We use Redis Sorted Sets (
zAdd/zRange) to manage global daily leaderboards where solve times are ranked instantly. - Reddit Native Triggers: Uses Devvit menu items and installation triggers so subreddit moderators can easily instantiate a daily challenge thread.
The Math: Board Generation & Backtracking Solver
In Block Party, players solve a grid representation $G$ of size $6 \times 6$. Each daily puzzle is defined by placing $N$ blocker pegs on the grid.
Let the grid cells be represented by coordinates $(r, c)$ where $r, c \in {0, 1, 2, 3, 4, 5}$. We define the grid state as: $$G(r, c) = \begin{cases} 1 & \text{if a blocker peg is present} \ 0 & \text{if the cell is empty} \end{cases}$$
The total number of playable cells is: $$C = 36 - N$$
The game provides a set of $P$ polyomino shapes. A placement of a shape $p \in P$ is valid if all its cells fall on empty grid coordinates ($G(r, c) = 0$). To guarantee that a randomly generated board is actually winnable, the server runs a backtracking constraint satisfaction solver before serving the puzzle.
The solver verifies that: $$\text{Solvable}(G, P) = \exists \text{ a placement function } f: P \to {(r, c, \text{rotation})} \text{ such that } \bigcup_{p \in P} f(p) = {(r, c) \mid G(r, c) = 0}$$
To ensure every player around the world faces the exact same challenge, the grid layout and piece-handout order are generated deterministically using a SplitMix32-based pseudo-random generator seeded with the daily hash: $$\text{Seed} = \text{Hash}(\text{Date} \mathbin{|} \text{Mode})$$
If the backtracking solver proves the grid is solvable within the recursion depth limit of $D = 50$, the seed is stored in Reddit's Redis cache and made available to all players globally for that day.
Retention & Community-Driven Play
To build an experience that keeps players coming back while bringing the community together, we structured Block Party around native social and retentive mechanics:
- Built-in Retention Mechanics (Streaks & Leaderboards):
- Consecutive Solve Streaks: The backend dynamically checks the dates of previous completions to calculate the player's active daily streak. Tracking
currentStreakandmaxStreakmotivates players to return to the subreddit daily to keep their flame alive. - Real-Time Daily Leaderboards: Using Redis Sorted Sets, we rank and display the top solve times for the daily challenge. This encourages friendly competition as players try to optimize their placement speed to move up the ranks.
- Consecutive Solve Streaks: The backend dynamically checks the dates of previous completions to calculate the player's active daily streak. Tracking
- Turning Comments into Gameplay: Because every player faces the identical, deterministically seeded puzzle layout, the post's comment section becomes a shared strategy forum. Players can share screenshots, compare their solve times, and debate placement strategies (e.g. which awkward pentomino pieces to place first and where). This turns the comment thread into an active extension of the game board.
Challenges We Faced
- Deterministic Server-Side Verification: Because puzzles are randomly generated daily, we had to ensure no player received an impossible board. Running a backtracking solver within the execution time limits of serverless handlers required optimizing the solver using bitwise representations and defensive recursion limits ($D = 50$).
- Secure State Persistence in Sandboxed WebViews: Operating inside Reddit's iframe sandbox meant standard cookies and browser local storage were unreliable or restricted. We designed a secure message passing protocol between the React frontend and Devvit backend, storing verified completion times directly inside Redis using the player's authenticated Reddit ID.
- Responsive WebViews for Feed Embeds: Reddit posts are viewed on a wide range of devices, from small mobile screens to large desktop monitors. Designing a grid puzzle interface that is tactile and easy to drag-and-drop on mobile touchscreens while remaining crisp and centered on desktop feeds was a major UI layout challenge.
What We Learned
We learned how to design engaging daily-sharing loops for community building. By offering a single daily challenge with a shared leaderboard, we structured the game to facilitate natural interactions, allowing players to easily share strategies and solve times in post comments. Additionally, we learned how to design webview components that work efficiently within the Devvit sandbox, taking full advantage of Hono and Redis to build a lightweight, highly engaging Reddit experience.
Built With
- css3
- devvit
- discord-activities-sdk
- discord-api
- fastify
- hono
- hono.js
- html5
- javascript
- json
- node.js
- pwa
- react
- reddit-developer-platform
- render
- socket.io
- sqlite
- supabase
- tailwindcss
- typescript
- vercel
- vite
- vitest
- websockets
Log in or sign up for Devpost to join the conversation.