SORT5

Players arrange 5 items in the correct order based on the criteria. One attempt per puzzle, shareable results, time-based scoring, streaks, rankings, and community-submitted puzzles.

Comment

Inspiration

The best Reddit content comes from Redditors themselves. We wanted to build a game where the community doesn't just play — they create the puzzles too. Anyone who finishes a Sort5 puzzle can submit their own idea: pick a topic they're passionate about, set 5 items in the right order, and send it to the mod queue. A music fan submits "albums by release year," a geography nerd submits "rivers by length," someone on r/movies submits "box office rankings." The game keeps growing because the players keep feeding it. That's what inspired Sort5 — a daily puzzle that belongs to its community.

What it does

Sort5 presents players with 5 items and a sorting criterion (e.g., "Countries by population — most to fewest"). Players arrange the items in the correct order by tapping options from a bank into numbered slots. One attempt per puzzle — no retries, every decision counts.

Key features:

  • Daily puzzles — A new puzzle is auto-posted every day from 19 real-world categories (countries, planets, mountains, movies, tech companies, historical events, and more), each randomly sampled for variety
  • Time-based scoring — Composite score from correctness (0–5) and speed, so faster solves rank higher at equal accuracy
  • Rankings — Today's leaderboard with accuracy % and time, plus a weekly cumulative board — visible in both the post banner and game screen
  • Player stats — Track your games played, current streak, and best streak right on the post banner
  • Shareable results — Copy a Wordle-style emoji block to share in comments
  • Order comparison — After playing, view a side-by-side comparison of correct order vs. your order
  • User-generated content — Any player can submit a puzzle idea after playing; moderators review and publish them
  • Dark/light theme — Automatic detection with a manual toggle
  • Mobile-first design — Tap-to-place interaction optimized for phones with responsive desktop support

How we built it

Sort5 is built entirely on Reddit's Devvit platform using Devvit Web (React + Vite):

  • Post Banner — Built with Devvit Blocks UI, displaying the puzzle title, daily challenge number, date, community stats (average time, total runs), player stats (Played, Streak, Best), and a Rankings view with Today/This Week tabs
  • Game Webview — A React 18 single-page app compiled with Vite, featuring an instructions screen, tap-to-place game board (horizontal option bank + 5 numbered slots), real-time timer, animated results with confetti, and modals for rankings, order comparison, and puzzle submission
  • Backend — Devvit's Redis for all data persistence (puzzles, attempts, scores, streaks, leaderboards, UGC queue), with a postMessage bridge between the Blocks UI and the React webview
  • Scheduler — A Devvit cron job that auto-posts a daily puzzle, with a 50% chance of generating a real-world topic puzzle and 50% from a curated bank, avoiding consecutive repeats
  • Deterministic shuffle — A seeded Fisher-Yates shuffle ensures each player sees a unique item order that stays consistent on reload
  • Composite scoring — score × 10000 + timeBonus allows precise ranking by both correctness and speed

The entire stack is TypeScript end-to-end, with shared type definitions between the backend (src/shared.ts) and frontend (game/shared.ts).

Challenges we ran into

  • Devvit Blocks UI constraints — No custom CSS, limited font control, no animations, and a restricted set of layout components. We had to get creative — using hstack with backgroundColor for styled buttons, manual date formatting arrays (since toLocaleDateString behaved inconsistently), and careful layout tuning to prevent clipping
  • Webview ↔ Blocks communication — The postMessage bridge between the iframe webview and Devvit backend required careful async handling with Promise-based acknowledgment refs to ensure reliable score submission and leaderboard updates
  • Theme detection in iframes — Reddit's webview iframe doesn't reliably propagate prefers-color-scheme. We implemented a multi-strategy approach: localStorage override, matchMedia listener, polling for changes, and a manual toggle — all coordinated via MutationObserver
  • Interaction model evolution — We iterated through three interaction designs: tap-to-swap → drag-and-drop → tap-to-place (final). Each had trade-offs for mobile usability, and the final bank-to-slots model proved the most intuitive and accessible
  • Score consistency — We discovered the backend's composite score could differ from the frontend's visual display due to the seeded shuffle running in two different contexts. We solved this by deriving all display values from a single resultData source of truth
  • Deployment pipeline — Learned the hard way that devvit upload doesn't build the webview — the Vite build step must run first, and the subreddit install must be explicitly upgraded to pick up new versions

Accomplishments that we're proud of

  • 19 diverse puzzle categories spanning geography, science, history, technology, entertainment, and nature — each randomly sampled so the same category produces different puzzles every time
  • A polished, responsive game experience that feels native to Reddit — with animations, confetti on high scores, streak tracking, and Wordle-style sharing
  • The full UGC pipeline — players can submit puzzle ideas, moderators review them via a dedicated menu, and approved puzzles become real posts. This creates a self-sustaining content loop
  • Zero external dependencies beyond React and Devvit — no game engines, no external APIs, no databases outside Redis. The entire app is lightweight and fast
  • Mobile-first UX — the tap-to-place interaction with large touch targets works beautifully on phones, which is where most Reddit users are
  • Clean architecture — clear separation between Blocks UI (banner), React webview (game), and Redis backend (data), all connected through typed message passing

What we learned

  • Devvit is powerful but opinionated — Blocks UI has real constraints, but working within them forced us to think creatively about layout and interaction design
  • Daily games live and die by their loop — the one-attempt-per-day mechanic, combined with streaks and rankings, creates genuine anticipation and replayability
  • UGC is a multiplier — letting the community create puzzles transforms players into contributors, which is exactly what Reddit is about
  • Mobile-first isn't optional — over 70% of Reddit usage is mobile, so every interaction had to be designed for thumbs first
  • Iterative testing matters — deploying 50+ versions and testing each on Reddit revealed issues (stale caches, timezone mismatches, iframe theme quirks) that wouldn't surface in local development

What's next for SORT5

  • Difficulty tiers — Easy (3 items), Medium (5 items), Hard (7 items) for different skill levels
  • Category voting — Let the community vote on which puzzle categories they want to see next
  • Multiplayer challenges — Head-to-head sorting races between two players in real time
  • Achievement badges — Unlock badges for milestones like 7-day streak, 100% accuracy, speed records
  • Themed events — Special puzzle series tied to holidays, trending topics, or subreddit themes (e.g., r/movies gets film-ranking puzzles)
  • Expanded UGC tools — Let users create puzzles with images, links, and custom scoring criteria
  • Cross-subreddit leagues — Subreddits compete against each other on weekly puzzle performance
  • Analytics dashboard — Give moderators insights into player engagement, popular categories, and community growth

Built With

Share this project:

Updates