ThreadHead - Reddit Comment Sorting Challenge

Can you reconstruct a Reddit conversation? Sort scrambled comments back into their original threaded order in this addictive daily puzzle game.

Comment

ThreadHead - Project Story

Inspiration

Reddit's comment threads are fascinating - they're like puzzles where conversations branch and weave into complex trees of replies. We've all spent hours reading through engaging discussions, following the flow from one comment to the next. But what if we could turn that experience into a game?

ThreadHead was inspired by the challenge of understanding context in online conversations. Can you tell which comment is replying to which? Can you reconstruct the natural flow of a discussion? We wanted to create a daily puzzle that celebrates Reddit's unique threading system while testing players' ability to follow conversational logic.

What it does

ThreadHead is a daily puzzle game that runs directly on Reddit. Each day, the game:

  • Fetches a real Reddit post and comment thread from popular subreddits
  • Scrambles the comments and presents them to players
  • Challenges players to arrange the comments in the correct reply order
  • Scores players based on attempts, time, and accuracy
  • Posts a daily leaderboard showing the top 50 players
  • Tracks player stats and streaks across multiple days

Players click comments from an available pool and place them into threaded positions, recreating the original conversation structure. Correct guesses lock in place, while wrong ones return to the pool for another try.

How we built it

Technology Stack:

  • Devvit Platform: Reddit's developer platform for building native Reddit apps
  • React: Frontend UI with TypeScript for type safety
  • Express: Backend API server handling game logic
  • Redis: Data persistence for game states, leaderboards, and user stats
  • Vite: Build tool for both client and server bundles
  • Tailwind CSS: Styling with mobile-first responsive design

Architecture:

  • Monorepo structure with separate client, server, and shared type folders
  • RESTful API endpoints (/api/*) for all client-server communication
  • Reddit API integration for fetching posts and comments
  • Serverless execution model with lazy evaluation for daily game rotation

Key Features Implemented:

  1. Smart Comment Selection: Algorithm to find suitable comment threads (4+ comments, 10-250 chars each)
  2. Daily Game System: 24-hour game cycles with automatic post creation and leaderboard posting
  3. Reddit-Style Threading: Visual representation with indentation, dashed lines, and collapse buttons
  4. Mobile-First Design: Touch-optimized interactions, responsive layouts, compact UI
  5. Click-to-Place Mechanics: Intuitive interaction replacing drag-and-drop for better mobile support
  6. Progressive Feedback: Correct positions lock, wrong ones return to pool after submission

Challenges we ran into

1. Mobile Splash Screen Visibility The biggest challenge was making the splash screen work on mobile Reddit apps. Initially, content overflowed and the play button was hidden. We had to drastically reduce vertical space - smaller logos, compact instructions, minimal gaps - to fit everything without scrolling.

2. Comment Thread Fetching Finding suitable comment threads was tricky. We needed:

  • Posts with 50+ comments to ensure good threads
  • Comments between 10-250 characters (not too short or long)
  • At least 4 comments in a single reply chain
  • Top-level comments (parent is the post, not another comment)

We implemented a multi-attempt system that tries multiple subreddits and posts until finding a suitable thread.

3. Devvit's Serverless Limitations Devvit runs serverless, so we couldn't use cron jobs for daily game rotation. We implemented lazy evaluation - checking on every API call if 24 hours passed, then posting the leaderboard and creating a new game post. This required careful state management in Redis.

4. Comment Locking API We wanted to automatically lock comments on expired game posts, but Devvit doesn't expose reddit.lock() or reddit.unlock() functions. This must be done manually via mod tools.

5. Reddit-Style Threading UI Recreating Reddit's threaded comment layout with indentation, dashed vertical lines, and collapse buttons required careful CSS positioning and responsive design to work on both mobile and desktop.

6. Post ID Prefix Handling Reddit post IDs sometimes have the t3_ prefix and sometimes don't. We had to carefully handle this throughout the codebase to avoid double-prefixing (t3_t3_) bugs.

7. Mobile Touch Interactions Drag-and-drop doesn't work well on mobile. We switched to a click-to-place system with visual feedback, active states, and proper touch targets (minimum 44px).

Accomplishments that we're proud of

  • Real Reddit Content: Every puzzle uses actual Reddit posts and comments, making each game unique and interesting
  • Seamless Mobile Experience: After multiple iterations, we achieved a smooth mobile-first design that works perfectly on phones
  • Daily Automation: The game automatically rotates every 24 hours, posts leaderboards, and creates new game posts without manual intervention
  • 34 Subreddit Variety: Pulling from diverse communities (AskReddit, TIFU, maliciouscompliance, etc.) ensures engaging content
  • Visual Polish: Reddit-style threading, smooth animations, gradient backgrounds, and emoji accents create a fun, vibrant experience
  • Comprehensive Leaderboard: Top 50 players with formatted tables showing ranks, scores, attempts, and times
  • Type Safety: Full TypeScript implementation across client, server, and shared types
  • Published on Reddit: Successfully launched and submitted for review on Reddit's platform

What we learned

Technical Learnings:

  • Devvit's serverless architecture and its implications for background tasks
  • Reddit API structure for posts, comments, and threading
  • Mobile-first responsive design principles and touch optimization
  • Redis data modeling for game states and leaderboards
  • React state management for complex game interactions
  • Vite build configuration for monorepo projects

Design Learnings:

  • Vertical space is precious on mobile - every pixel counts
  • Visual instructions work better than text explanations
  • Progressive feedback (locking correct positions) improves UX
  • Reddit's threading UI is intuitive and should be preserved
  • Compact doesn't mean cluttered - smart spacing is key

Product Learnings:

  • Daily puzzles create habit-forming engagement
  • Real content is more interesting than mock data
  • Leaderboards drive competition and replay value
  • Mobile users are the primary audience for Reddit apps
  • Simple mechanics (click-to-place) beat complex ones (drag-and-drop)

What's next for ThreadHead

Short-term Improvements:

  • Add difficulty levels (easy: 4 comments, medium: 6-8, hard: 10+)
  • Implement hint system (reveal one correct position)
  • Add social sharing (share your score to Reddit)
  • Create weekly/monthly leaderboards alongside daily ones
  • Add sound effects and haptic feedback for mobile

Long-term Features:

  • Multiplayer mode - race against friends in real-time
  • Custom game mode - let users submit their own threads
  • Achievement system - badges for streaks, perfect scores, speed runs
  • Subreddit-specific games - play only from your favorite communities
  • Comment author reveals - show who wrote each comment after completion
  • Thread context mode - show parent comments for better understanding

Community Growth:

  • Launch in multiple subreddits once approved
  • Create r/ThreadHead community for players
  • Host weekly tournaments with special prizes
  • Partner with popular subreddits for featured puzzles
  • Build a web version for non-Reddit users

ThreadHead proves that Reddit's unique threading system can be turned into an engaging daily puzzle. We're excited to see players untangle threads and compete on the leaderboards!

Built With

Share this project:

Updates