Ematchi

Inspiration

We were inspired by the classic memory matching game and the desire to create a fun, engaging experience directly integrated into the Reddit platform. The idea was to leverage Reddit's social features to make a simple game more interactive and shareable, turning personal achievements (or hilarious failures) into community content.

What it does

Ematchi is an emoji memory matching game where players flip cards to find matching pairs against the clock. It features multiple difficulty levels, score tracking, and engaging visual feedback like confetti for wins and screen shakes for losses. The unique twist is its deep integration with Reddit: upon completing a game, a funny, pre-generated comment detailing the player's score and outcome is automatically posted to the Reddit thread where the game is being played, fostering community interaction and friendly competition.

How we built it

The game's frontend is built with React, Vite, and a combination of Tailwind CSS and custom styling for a responsive and visually appealing user interface. The core game logic, including card management, matching, and timers, is handled within the React components. For Reddit integration, we utilized Devvit's postMessage API to send game results from the client-side webview to the Devvit app. The Devvit app then processes these messages and uses context.reddit.submitComment to post the game outcome as a comment on the relevant Reddit post. A minimal Node.js Express server handles basic API endpoints, though the primary interaction with Reddit is managed through the Devvit app. The entire development process was streamlined using the Bolt.new environment, which facilitated rapid iteration and deployment on Devvit.

Challenges we ran into

One of the primary challenges was navigating the sandboxed environment of Devvit, which has specific limitations regarding direct web APIs and requires a distinct communication pattern between the webview and the Devvit app. Establishing a robust and reliable postMessage channel for sending game results was crucial. We also focused on optimizing game timers and animations to ensure a smooth experience across different browser environments, and meticulously designed the UI/UX to provide clear and engaging visual feedback for all game states.

Accomplishments that we're proud of

We are most proud of successfully integrating a fully playable and fun memory game directly within the Reddit Devvit platform. The automatic social sharing of game results to Reddit comments is a key feature that creates a unique, interactive experience for players and observers alike. We're also pleased with the clean, responsive UI and the engaging visual effects, such as confetti for wins and particle bursts on matches, which enhance the overall player experience.

What we learned

This project provided invaluable experience in building interactive web applications that integrate with a platform-specific API (Reddit's Devvit) through a proxy layer. We gained a deeper understanding of Devvit's architecture, its communication protocols, and how to work within its constraints. We also honed our skills in React state management, animation techniques, and responsive design principles, learning how to structure a project effectively across client, server, and Devvit app environments.

What's next for Ematchi

For future iterations, we plan to implement leaderboards, potentially leveraging Devvit's Redis for persistent storage, to track and display top scores. We also aim to introduce more customization options, allowing users to select different emoji sets or game themes. Exploring more advanced social features, such as direct challenges between friends or the ability to share game replays, is also on our roadmap. We're excited to continue enhancing Ematchi to make it an even more engaging and community-driven game on Reddit.

Built With

• devvit
• tailwindcss