EmojiQuest

Playing EmojiQuest at home

Inspiration

The inspiration for EmojiQuest came from the universal appeal of emojis as a fun, visual language that transcends borders and resonates with younger audiences. I wanted to create an engaging quiz game that leverages emojis to challenge my creativity and problem-solving skills, drawing from the playful energy of social media and messaging apps. The idea of unifying a leaderboard across a web app and a Reddit Devvit game was sparked by my desire to connect communities, allowing players from different platforms to compete in a shared, emoji-driven experience. My goal was to make coding fun by obfuscating my code with emojis, reflecting the game's theme and adding a quirky twist for the hackathon. The Reddit Games and Puzzles Hackathon and the bolt.new hackathon's focus on innovative, community-driven experiences further fueled my vision.

What it does

EmojiQuest is an interactive quiz game where I decipher emoji sequences (e.g., "eye + heart + pizza" for "I love pizza") and type my answers to earn points. The game is available as a web app built on bolt.new, featuring a vibrant, youth-oriented design with a unified leaderboard that tracks top scores. I also attempted a Devvit app for Reddit to bring the quiz to subreddits, enabling Redditors to play within their communities. I solve puzzles, submit answers, and compete for a spot on the leaderboard, which syncs scores from both platforms. The game uses emoji-obfuscated code to enhance the thematic experience, making even the codebase a playful part of the project.

How I built it

I built the web app using Vite and React for the frontend, with Node.js, Express, and SQLite for the backend. The frontend features components like QuestionDisplay, AnswerInput, and Leaderboard, styled with Tailwind CSS for a colorful, animated look. The backend serves questions via a GET /questions endpoint, validates answers with POST /submit-answer, and manages the leaderboard with GET /leaderboard. I obfuscated code with emoji variable names (e.g., 🌟 for points) to align with the theme. Currently, the web app is only in Demo mode. For the Devvit app, I used the Devvit framework and TypeScript, integrating with Reddit’s API to display quizzes in subreddits. I planned to call the same backend for leaderboard sync, using fetch to POST /submit-score and GET /leaderboard. However, Devvit’s rendering limitations blocked most emoji displays, forcing me to pivot to simpler sequences. I built everything on bolt.new for the web app and used bolt.new to build on Reddit’s Developer Platform for the Devvit app.

Challenges I ran into

The biggest challenge was Devvit’s inability to render the majority of my emojis, which disrupted my vision for a consistent experience across platforms. Many Unicode emojis displayed as blank squares or placeholders, limiting my question variety and forcing me to simplify the Reddit version. Integrating the unified leaderboard also posed issues: configuring CORS for Reddit’s domain and handling user identity across platforms (Reddit user IDs vs. web app users) required extra effort. Obfuscating code with emojis, while fun, occasionally confused me, requiring careful documentation. Time constraints in the hackathon meant I prioritized the web app, leaving the Devvit app as a partial prototype. Ensuring the design stayed vibrant yet accessible for mobile and desktop added complexity, especially with animations.

Accomplishments that I am proud of

I am proud of building this project on bolt.new with a sleek, youthful design that resonates with my target audience. The unified leaderboard, syncing scores between platforms, is a technical win that showcases cross-platform integration. My emoji-obfuscated code is a creative highlight, making the codebase itself a reflection of the game’s playful spirit. Despite Devvit’s limitations, I successfully deployed a prototype Reddit app, proving my concept’s versatility. The quiz’s 20+ emoji sequences, like "lion + crown" for "Lion King," engage players creatively. I also nailed the vibrant design with pink, blue, and yellow hues, paired with bounce animations, making EmojiQuest visually pop.

What I learned

I learned how to integrate external APIs across platforms, particularly using fetch in Devvit to call my bolt.new backend. Devvit’s emoji rendering issues taught me to test platform compatibility early. Obfuscating code with emojis was a fun experiment but highlighted the need for clear documentation to avoid confusion. I gained insights into designing for younger audiences, balancing bold aesthetics with usability. The hackathon pushed me to prioritize features under time pressure, focusing on a Demo version.

What's next for EmojiQuest

Next, I aim to fully resolve Devvit’s emoji display issues by exploring workarounds, like rendering emojis as images or using a subset of supported Unicode characters. I plan to enhance the leaderboard with real-time updates via WebSockets for a more dynamic experience. Adding user accounts to the web app will allow personalized profiles and cross-platform identity linking. I’d love to expand the question bank with user-submitted emoji sequences to boost community engagement. Polishing the Devvit app for full Reddit integration, including subreddit-specific leaderboards, is a priority. Finally, I’ll refine the design with more animations and accessibility features to ensure EmojiQuest remains fun, inclusive, and ready for a wider release.