Reel Riddle

Create and Guess movies riddles with Redditors

Comment

Inspiration

we used to play this game at boarding school years ago where someone would describe a movie and you had to guess what movie the other person described

What it does

Reel Riddle is a movie guessing game built as a Devvit app for Reddit. Users are presented with a mysterious, AI-generated description of a movie and must guess the title. Key features include:

  • Movie Guessing Game: Players read cryptic descriptions and try to guess the movie.
  • AI-Generated Descriptions & Hints: Uses the Gemini API to create unique, spoiler-free movie descriptions and helpful hints.
  • Riddle Creation: Users can create their own movie riddles for others to solve.
  • Points and Leaderboard: Players earn points for correct guesses and riddle creation, with a leaderboard to track top players.
  • Reddit Integration: Riddles can be posted as custom post types on Reddit, and the app uses Reddit for user authentication and communication (comments, private messages).
  • Persistent Game State: Uses Redis to store game state, user points, and solved riddles.
  • Movie Poster Display: Fetches movie posters from the TMDB API to enhance the visual experience.

How we built it

Reel Riddle is built using a combination of technologies:

  • Devvit: The core platform for building the Reddit app, providing access to Reddit APIs, Redis, media hosting, and HTTP requests.
  • TypeScript: Used for backend logic and message handling between Devvit and the web view, ensuring type safety and code maintainability.
  • React (JSX in Devvit): Utilized within Devvit's main.tsx for structuring the UI components and managing component state with hooks like useState and useAsync.
  • Redis: Employed for persistent data storage, managing game state, user points, leaderboards, and solved riddles.
  • Gemini API: Integrated to generate movie descriptions and hints using natural language processing.
  • TMDB API: Used to fetch movie poster URLs based on movie titles, enhancing the visual presentation of riddles and results.
  • HTML, CSS, JavaScript: Powers the web view (page.html, style.css, script.js) to create the interactive frontend game interface.
  • Reddit API: Leveraged for user authentication, posting riddles as custom post types, submitting comments, and sending private messages to users for game updates and points notifications.

Challenges we ran into

Developing Reel Riddle involved overcoming several challenges:

  • API Integration Complexity: Successfully integrating multiple APIs (Gemini, TMDB, Reddit, and Redis) and managing data flow between them was a significant hurdle.
  • Asynchronous Operations: Handling asynchronous operations inherent in API calls and data fetching using useAsync and Promises required careful management to avoid race conditions and ensure smooth UI updates.
  • State Management Across Devvit and WebView: Effectively managing and synchronizing game state between the Devvit backend and the frontend web view using message passing proved complex.
  • AI Description Quality: Ensuring the Gemini API generated consistently engaging, cryptic, and spoiler-free movie descriptions required prompt engineering and error handling for varied outputs.
  • Movie Poster Retrieval: Reliably fetching movie posters from TMDB and handling cases where posters were not found or API requests failed required robust error handling and fallback mechanisms.
  • User Experience within Devvit: Designing an intuitive and engaging user experience within the constraints of the Devvit custom post type and web view environment presented UI/UX design challenges.

Accomplishments that we're proud of

Despite the challenges, we achieved several accomplishments we are proud of:

  • Functional and Engaging Movie Guessing Game: Successfully created a playable and enjoyable movie guessing game within the Reddit platform.
  • AI-Powered Riddle Generation: Implemented AI-driven movie description and hint generation, adding a unique and dynamic element to the game.
  • User Point System and Leaderboard: Developed a point system and leaderboard to encourage player engagement and competition.
  • Riddle Creation Feature: Empowered users to contribute to the game by creating and sharing their own movie riddles.
  • Seamless Reddit Integration: Achieved deep integration with Reddit, leveraging custom post types, comments, and private messages to create a cohesive Reddit-native experience.
  • Persistent Game Data: Utilized Redis to ensure game progress, user points, and riddles are persistently stored across sessions.
  • Visually Enhanced Riddles: Incorporated movie posters to improve the visual appeal and provide additional context to the riddles.

What we learned

Building Reel Riddle provided valuable learning experiences:

  • Devvit Platform Expertise: Gained in-depth knowledge of the Devvit platform, its capabilities, and limitations in building Reddit apps.
  • Reddit API Proficiency: Developed practical skills in utilizing the Reddit API for various functionalities like user interaction, content creation, and community engagement.
  • AI API Integration (Gemini): Learned how to effectively integrate and leverage AI APIs like Gemini for content generation within a Devvit app.
  • Asynchronous Programming and State Management: Improved skills in managing asynchronous operations, Promises, and state management in both Devvit and web view environments.
  • Frontend Development for Devvit Web Views: Enhanced web frontend development skills within the context of Devvit web views, focusing on performance and responsiveness.
  • Full-Stack Development on Devvit: Experienced the full development lifecycle of a Devvit app, from backend logic and data storage to frontend UI and Reddit integration.

What's next for Reel Riddle

We have exciting plans to further develop Reel Riddle:

  • Expanded Movie Database: Increase the range of movies beyond the initial popular movie list to offer greater variety and challenge.
  • Improved AI Description Generation: Refine Gemini API prompts and implement error handling to enhance the quality, consistency, and cryptic nature of movie descriptions.
  • Enhanced Hint System: Develop more varied and helpful hint mechanisms beyond just revealing the first letters.
  • New Game Modes & Features: Explore adding new game modes, such as themed riddles, daily challenges, or cooperative play.
  • UI/UX Enhancements: Improve the user interface and user experience based on user feedback, focusing on clarity, navigation, and visual appeal.
  • Detailed User Statistics & Profiles: Implement user profiles with detailed game statistics, riddle creation history, and performance metrics.
  • Community Riddle Sharing & Discovery: Develop features to allow users to easily share and discover riddles created by other players, fostering a community around riddle creation and solving.

Built With

Share this project:

Updates