Nuzzle

• 

  Banner

• 

  5x5

• 

  4x4

Inspiration

Our inspiration was to bring a classic, universally understood game—the sliding puzzle—to Reddit communities. We wanted to create a simple, engaging, and visually appealing app that felt like a natural part of the platform, allowing moderators to easily create fun challenges for their members.

What it does

Nuzzle the Puzzle is an interactive in-post application where moderators can instantly create a sliding puzzle from an image. Mods can choose the difficulty by setting the grid size to 3x3, 4x4, or 5x5. Users can then solve the puzzle directly within the Reddit post on both desktop and mobile. Upon completion, the app automatically posts a comment congratulating the user by name and stating how many moves it took them to solve it.

How we built it

The app is built entirely on the Devvit platform. The interactive front-end is created with React and TypeScript, using Tailwind CSS for styling to ensure it's responsive. The back-end logic, including form handling and posting comments, is powered by a Node.js and Express server running within Devvit.

Challenges we ran into

Our biggest initial challenge was handling image assets. We first tried using external image URLs, which led to complex CORS (Cross-Origin Resource Sharing) issues. We pivoted to using local assets, which proved to be a much more reliable solution. Another significant challenge was making the drag-and-drop functionality work seamlessly on both desktop (mouse events) and mobile (touch events), which required implementing two parallel sets of event handlers. Waiting for Giphy API fix.

Accomplishments that we're proud of

We're proud of creating a fully responsive and intuitive user experience that works flawlessly across all devices. The moderator-controlled creation process is simple yet powerful, allowing for dynamic content generation. Most of all, we're proud of building a complete, interactive game that lives entirely within the Reddit ecosystem.

What we learned

This project was a deep dive into the Devvit platform. We learned the specific nuances of its configuration, including how to properly define menu items, handle form submissions, and manage static assets within the public folder. We also gained valuable experience in creating cross-platform web interactions by supporting both mouse and touch events.

What's next for Nuzzle

We have several ideas for the future! We'd love to add a Giphy feature but Giphy API is bugged by reddit right now , so it will unlock new potentials for app

Built With

• devvit
• react