Scrabblitz

Arrange your best 3 words, and top the daily leaderboard.

Comment

Inspiration

Daily word puzzles have taken over the internet these days, while classical board games have always been a favorite. We wanted to combine the 2 in a synchronous puzzle format on Reddit, with a deeper tactical layer. By combining the classic word-building mechanics of board games with the interactive capabilities of the Devvit SDK, we envisioned Scrabblitz: a game where players don't start from scratch, but instead play a board setup initiated by an AI. Everyone plays with the exact same seed, same letter bag, and same opening moves. With only 3 turns to make your mark, every placement counts.

What it does

How we built it

Scrabblitz is built with a modern, high-performance web stack integrated directly into the Reddit ecosystem:

Tech Stack

  • Frontend: React 19 and Vite. We used vanilla CSS (.scss modules) for premium, high-fidelity responsive layouts.
  • Backend: A serverless Node.js environment to handle routes and session context.
  • Database: Redis (via Devvit’s server APIs) to persist scores, timestamps, and leaderboard standings securely.

Architecture & Mechanics

  1. The Daily Seed Loop: We wrote a custom Node pre-generation script (pregenerate_games.ts) that deterministicly hashes dates (YYYY-MM-DD) into integer seeds. These seeds generate daily games, defining the tile bag, AI opening hand, and player hands.
  2. Container-Presentation Rendering: To prevent flashing, we structured App.tsx into a container App that fetches initial date bindings from the server /api/init (tied to the specific Reddit post title), and a presentation component GameScreen that renders only once the correct day's state is ready.
  3. Canvas-Based Screenshot Sharing: Rather than copy-pasting codeblocks or text representations, we wrote a lightweight client-side drawing algorithm to paint the entire board grid, special multipliers, letters, and scores onto a hidden HTML5 <canvas> on demand.

Challenges we ran into

1. Seed Collisions & AI Non-Determinism

Initially, sequential daily games generated similar board shapes because seed generation had high correlation. Additionally, the AI solver had real-time performance caps (max search time: 200ms), introducing slight CPU-based non-determinism during offline pre-generation.

  • Solution: We replaced simple additions with a secure string template hash to generate highly distinct seeds. We then ran a verification loop that simulated AI gameplay deterministically using a fixed-bag generator before logging the final layouts.

2. The Inappropriate Word Filter Paradox

We wanted the initial boards to be family-friendly, free of objectionable vocabulary. However, we did not want to block players from using valid slang or dictionary words on their own turns.

  • Solution: We implemented an offline blocklist check only during the board pre-generation phase. If the simulated AI made an inappropriate move during setup, that seed attempt was immediately discarded and regenerated. Live player moves are validated strictly against the standard ENABLE English word list.

3. Iframe Clipboard Sandboxing

Browsers block iframe clipboard writes inside Reddit's native container, which rendered standard "Copy to Clipboard" share buttons useless on mobile.

  • Solution: We shifted to an auto-commenting mechanism. When a player clicks "Share Board", the app draws the board to a canvas, posts the image to Reddit's media servers, and automatically posts a comment replying to the daily thread with their score and a spoiler-wrapped board link.

Accomplishments that we're proud of

  • Flawless Procedural Board Generation: Successfully pre-generated 365 days of distinct daily boards with no seed collisions and no profanities, striking a perfect balance of challenging starting letters for every day.
  • Lightweight Canvas-to-Media Pipeline: Engineered a custom canvas rendering system that replicates the entire board's visual state in the client, uploads it to Reddit media servers, and posts it directly in the comments.
  • Seamless Sandbox Workarounds: Discovered and implemented a reliable, user-friendly workaround for WebView iframe sandbox copying limitations via auto-commenting.
  • Flash-Free Architecture: Completely eliminated layout shifting and game board flashing on load by separating async date fetches from active React components.

What we learned

  • WebView Engineering: We gained deep familiarity with the constraints of iframe security sandboxes, learning how to bridge user actions cleanly with native Reddit interfaces.
  • Deterministic Generation: Hashing strings to numeric ranges is a powerful tool for procedural content generation, allowing us to maintain a light database footprint by baking game seeds directly into the client.
  • State Decoupling: Separating async context fetchers from active component states is essential for building web apps that feel native, responsive, and flash-free.

What's next for Scrabblitz

While the current game is set up for user word inputs only so that a fair leaderboard comparison can happen, in the future we will allow users to continue playing interactively against AI for fun after completing the 3 turns for generating their standings. We will also allow users to create initial board setups which other players can complete. We will have a levels-based system, where each level gets progressively more difficult.

Built With

Share this project:

Updates