MemeJak: The Daily Meme Scramble

Project Story

Inspiration

MemeJak was born from the idea of transforming Reddit's daily content into an interactive puzzle experience. The classic sliding-tile puzzle game has been a beloved pastime for generations, but pairing it with Reddit's hottest memes creates something entirely new, a daily challenge that connects players through shared content.

The Wojak meme theme adds a playful, internet-culture twist to the experience. Every day, the game automatically fetches the top post from r/memes, slices it into a grid, and challenges players to solve it. This transforms passive content consumption into an active, engaging puzzle-solving experience that brings the Reddit community together around a shared daily challenge.

What I Learned

Building MemeJak taught me several important concepts:

Devvit Web Architecture: Understanding the client-server separation in Reddit's Devvit platform, working within iFrame constraints, and leveraging Reddit's API for content fetching
Deterministic Puzzle Generation: Implementing seeded random number generation using Linear Congruential Generators (LCG) to ensure all players receive the same daily puzzle configuration
Puzzle Solvability Theory: Learning about inversion counting and parity checks to ensure randomly shuffled N-puzzle configurations are actually solvable
Serverless Scheduling: Setting up automated daily content updates using Devvit's scheduler with cron-based triggers
Redis State Management: Storing and retrieving daily puzzle state, leaderboards, and user scores in a distributed Redis cache
CSS Image Cropping: Implementing precise grid-based image slicing using CSS background-position and background-size properties
Type Safety: Creating shared TypeScript types between client and server for end-to-end type safety

How I Built It

Phase 1: Core Puzzle Engine

Implemented the classic sliding-tile puzzle mechanics with move validation
Built a seeded shuffle algorithm using a Linear Congruential Generator (LCG)
Added solvability checking using inversion counting algorithms
Created puzzle state management with grid representation

Phase 2: Daily Content Pipeline

Set up a cron scheduler that runs at 00:00 UTC daily to fetch the top post from r/memes
Implemented robust image URL extraction (checking thumbnail → preview → direct URL)
Created deterministic seed generation from date strings using hash functions
Stored daily state in Redis with date-based keys for persistence

Phase 3: Frontend Experience

Built an engaging splash screen with animated Wojak face and difficulty selection modal
Implemented the main game view with real-time timer and move counter
Created CSS-based image grid slicing for puzzle tiles
Added hint system and completion overlay with celebration animations

Phase 4: Leaderboard System

Built score submission API with validation and ranking logic
Implemented per-difficulty, per-date leaderboards stored in Redis
Added ranking algorithm that prioritizes time, then moves
Created leaderboard UI with difficulty filtering and user rankings

Phase 5: Polish & UX

Added responsive design for both mobile and desktop experiences
Implemented comprehensive error handling and loading states
Created smooth animations and transitions throughout the UI
Added back navigation and reset functionality

Challenges Faced

Image URL Extraction Complexity: Reddit's API returns images in various formats (thumbnails, previews, direct URLs). I had to implement a multi-step fallback system to reliably extract image URLs, including handling HTML-encoded preview URLs.
Deterministic Shuffling: Ensuring all players receive the exact same puzzle configuration required implementing a seeded random number generator. I used a hash function on the date string to create a deterministic seed, then implemented solvability checks to ensure the puzzle is actually solvable.
CSS Image Cropping: Creating precise grid-based image slicing without server-side image processing was challenging. I solved this using CSS background-image with calculated background-size and background-position values to show only the relevant portion of each tile.
iFrame Constraints: Working within Reddit's iFrame environment meant I couldn't use standard browser APIs like window.location. I had to use Devvit Web's client APIs (navigateTo, showToast) instead.
State Synchronization: Keeping daily puzzle state consistent across all users required careful Redis key management with date-based keys and fallback mechanisms.
Puzzle Solvability: Not all random shuffles of an N-puzzle are solvable. I implemented inversion counting algorithms and parity checks to ensure generated puzzles are always solvable, with retry logic if needed.

The result is a polished, engaging daily puzzle game that combines classic gameplay mechanics with Reddit's vibrant community content, creating a unique experience that brings players back every day.