SnackMeme

Logic games are lonely. SnackMeme is a multiplayer social experiment. Caption daily prompts in our seamless GIF editor, vote on chaos, and crown a winner. The ultimate daily habit.

Comment

đź“ť Project Overview

SnackMeme is a daily, community-driven battle royale for humor. It transforms the passive experience of scrolling Reddit into an active, competitive game where users caption GIFs to fit a daily changing topic. Built entirely on the Reddit Developer Platform (Devvit), it runs natively inside Reddit posts and features a custom-built proxy architecture that solves critical platform constraints for webview apps.

đź“– Project Story

Inspiration

My journey with Reddit began simply: finding a community, sharing a meme, and laughing at the comments. That conversation is the Reddit experience.

I didn't want to just build another generic "sharing" app. I wanted to gamify that core interaction. Since I—like most of the internet—communicate primarily through GIFs, I realized the perfect game would be a "Caption This" contest. The goal was to take the spontaneous energy of a comment thread and structure it into a recurring Daily Meme Contest.

🎨 Best Use of User Contributions (Primary Focus)

SnackMeme is designed from the ground up to be an engine for User Generated Content (UGC). Unlike logic puzzles or solitary games, SnackMeme cannot exist without the creativity of the community.

  • Democratizing Creativity: We solved "Blank Canvas Paralysis." By providing the visual prompt (the GIF) and just asking for the punchline (the caption), we lower the barrier to entry. This allows 99% of users to become creators, not just consumers.
  • Direct Engagement: Instead of hiding user creations inside a siloed database, every meme is posted as a real Reddit comment. This ensures that the game contributes back to the subreddit's ecosystem, sparking discussions and reactions even for users who aren't playing the game itself.

How we built it

We utilized a monorepo architecture to split the logic between the Reddit runtime and the web interface.

  • The Frontend (Client): We built a mobile-first React application running in Devvit's Webview. This handles the UI, state management, and the creation flow.
  • The Backend (Server): We used Express within the Devvit runtime to create a secure API. This handles the business logic that cannot be trusted to the client.
  • The "Proxy" Pattern: To avoid exposing API keys and bypassing CORS (Cross-Origin Resource Sharing) issues, we built a server-side proxy. The client never talks to Giphy directly; it asks the Devvit server to fetch the GIF, ensuring security and stability.

🚧 Challenges & Platform Feedback

This project was a rollercoaster of platform constraints. I documented these friction points extensively to help improve Devvit for everyone.

👉 Read my full Deep Dive on Medium about building SnackMeme

1. The "Whitelist Wall" & API Friction

My biggest hurdle was getting external GIFs into the app.

  • The Problem: I initially integrated Klipy, only to be blocked by Error 7: Permission Denied because the domain wasn't on the strict whitelist.
  • The Feedback: I realized the current "No Wildcard" policy stifles hackathon innovation because we cannot dynamically switch providers or use newer APIs without waiting for manual approval.
  • Community Discussion: I documented this struggle in detail on r/Devvit:

2. The "Illegal" Feature

My original vision was a Tinder-style swipe interface: Swipe Right to Upvote, Swipe Up to open the comment. It was fully designed, but then I hit a wall: Reddit Policy.

I learned that programmatic voting is strictly prohibited. Apps cannot cast upvotes/downvotes on behalf of users, even with intent.

  • The Problem: I couldn't use Reddit Karma to determine the winner as originally planned.
  • The Pivot: I had to scrap the native Reddit voting mechanism entirely.
  • The Solution: I shifted to architecting a "Shadow Scoring System" using Redis. This meant building a database from scratch to track internal "Game Points" separately from Reddit Karma. This was a massive backend undertaking that replaced the simple UI I originally planned.

3. The "Redirect" Block

I wanted users to "Swipe Up" to jump directly to the Reddit comment discussion. However, the Devvit sandbox restricts how apps can trigger navigation or open new tabs to prevent abuse.

  • The Impact: I had to rethink the UX to keep the user inside the game loop rather than sending them away.

4. The "Rich Media" Limitation

My original vision was for every comment to render as a fully playable GIF card.

  • The Problem: I discovered that the ![gif](url) markdown syntax is often restricted for bots via the API (returning 500 Internal Server Error).
  • The Pivot: I had to engineer a reliable fallback. The app now generates a "Clean Link" system that formats a giphy.com/gifs/ID link. While Reddit doesn't always expand these for bots, this approach ensures 100% delivery reliability so no user ever loses their meme submission due to an API error.

🤝 Contributions to the Ecosystem

I believe my struggles can help future developers avoid the same traps.

  • The "Unhackable" Image Proxy Pattern: Many Devvit developers struggle with CORS issues when using canvas in Webviews. I successfully built and open-sourced a pattern where the backend fetches the image stream and sanitizes headers before sending it to the client.
  • Regex-Based URL Cleaning: I developed a regex utility that strips complex media tracking parameters from Giphy URLs, ensuring that the links posted to Reddit are clean, short, and privacy-friendly.

🔓 Open Source & Collaboration

I am releasing SnackMeme as an open-source project because I believe this "Daily Game Loop" architecture can be the foundation for many other community games.

I invite the Reddit developer community to fork this repo, improve the meme editor, or implement the features I ran out of time for (like the full Swipe UI).

What's next for SnackMeme

  • Full Leaderboard UI: Now that the Redis scoring backend is architected, the next step is visualizing the real-time leaderboard in the gallery.
  • Advanced Editor: Adding a canvas layer to allow users to drag/drop text and stickers onto GIFs.
  • Native Mobile Uploads: Solving the Android file-picker sandbox issues to allow users to upload their own templates.
Share this project:

Updates