ComfortQuest

ComfortQuest is an interactive journey that learns your vibe through story-based choices and recommends the perfect comfort shows for you to watch.

Comment

Inspiration

The idea for ComfortQuest actually came when one of us met with a Career Coach who suggested building an interactive game to match people with personalized comfort shows based on their choices. That concept stuck, and from there the team began brainstorming on Google Docs and Figma to figure out how it could work. We were also inspired by the frustration of endlessly scrolling through streaming apps at the end of the day. We wanted to make that decision fun, lighthearted, and interactive while tapping into the cozy, familiar vibe of comfort shows.

What it does

ComfortQuest is a gamified quiz that immerses users in a short interactive story—choosing between paths in the City or Forest theme. Each choice maps to categories like Workplace Comedy, Cozy Sitcoms, or Animated Comfort. After four scenes, users receive personalized recommendations for shows that fit their mood, complete with posters, match scores, episode lengths, seasons, and streaming availability.

How we built it

• Frontend & UI: Built in React with TailwindCSS for layout and custom CSS for glow/hover effects. Pixel-art inspired backgrounds give the City and Forest paths unique vibes.
• Logic & State: A central FlowController tracks the player’s progress, selected theme, and choices across all scenes. Each scene is a component with its own branching choices.
• Data & Scoring: All show and category data lives in JSON files (shows.json, categories.json, and pointMapping.json). User answers add weighted points to categories, which are then tallied and used to recommend shows.
• Results Rendering: The Results Screen dynamically pulls in posters, streaming info, and scores. Shows are ranked by weighted match so recommendations feel natural and personalized.
• Styling & Effects: Custom glow effects, backdrop blurs, hover transitions, and responsive layouts make the app feel polished and engaging across devices.
• Collaboration: We used Git for version control and had to establish a workflow as team members had different experience levels. Over the hackathon, we learned how to merge contributions smoothly.

Challenges we ran into

• Designing a scoring system that feels balanced so recommendations are meaningful.
• Saving user choices correctly and mapping them into the right categories.
• Debugging hover/glow effects across themes while keeping a consistent style.
• Making sure the dynamic results screen looked polished while pulling in all show data.

Accomplishments that we’re proud of

• Building a full interactive storytelling experience that flows smoothly.
• Creating a recommendation system that feels fun instead of purely algorithmic.
• Delivering a visually appealing UI with glowing buttons, pixelated backgrounds, and animations.
• Learning to collaborate effectively with Git despite different starting experience levels.

What we learned

• How to structure a React app that combines storytelling, interactivity, and data-driven logic.
• The importance of polish—hover glows, transitions, and aesthetic details make the experience more immersive.
• How to manage a collaborative Git workflow under time pressure.
• That even without a backend or API, you can build a robust experience using just state and JSON data.

What’s next for ComfortQuest

• Expanding the library to include movies, anime, and international dramas.
• Adding more branching storylines for deeper personalization.
• Incorporating APIs to pull live streaming availability so results stay up-to-date.
• Experimenting with interactive AI-driven responses to make the story even more dynamic.
• Adding multiplayer/shared results so friends can compare their comfort picks together.

Built With

Share this project:

Updates