Recommendi

Inspiration

I've always been fascinated by how recommendation engines can predict what we'll love next. Having previously built a system using traditional collaborative filtering, this hackathon was the perfect chance to explore a more modern, intuitive approach. I wanted to build an app that felt less like a machine and more like getting a recommendation from a knowledgeable friend.

What it does

Recommendi is a smart recommendation engine that translates a user's natural language thoughts into a list of relevant, data-backed suggestions. Instead of just clicking filters, a user can simply describe what they're in the mood for.

Core Features:

• Natural Language Search: Users type what they want in plain English (e.g., "a sci-fi movie that feels like a space western").
• Contextual Recommendations: Each suggestion comes with a "Why we chose it" section, explaining the reasoning behind the recommendation.
• Dynamic, Multi-Category Support: Seamlessly get recommendations for various categories like Movies, Books, and more, all loaded dynamically.
• Exploratory Discovery: Clickable tags within any recommendation let you pivot your search and discover new things based on a single keyword.

How we built it

We designed Recommendi with a clean, decoupled architecture to ensure it was robust and scalable.

• AI & Data:
  • Qloo API: Serves as the rich, foundational dataset for all recommendation entities.
  • GPT-4o-mini: Powers the natural language understanding, taking a user's message to infer intent and generate context for the recommendations.
• Frontend: A dynamic, single-page application experience built with vanilla JavaScript (ES6+). A lightweight Python app built with Flask. It serves the frontend, handles session creation, and provides a JSON endpoint (/api/recommendations) for all data fetching.
  • History API (pushState/popstate): Used to manage the URL and enable seamless browser back/forward navigation without page reloads.
  • localStorage: Powers the persistent, client-side session history.
  • CSS3: A custom, modern stylesheet using Flexbox and Grid for a fully responsive layout.
• Backend: A lightweight Python API built with Fast api. It contains all the logic for going from natural language -> Recommendation data interpretation -> Recommendation fetch from Qloo

Challenges we ran into

One of the main challenges was accurately translating a user's abstract, natural language request into a query that could effectively leverage the structured data from the Qloo API.

The other major challenge was implementing the tag clicking feature. This was particularly difficult because

1. The tag-id returned for search results for places entity do not work directly when used with the insight. Had to manually figure out a way to inject the 'place' keyword at correct position to get the tags to be clickable and working
2. The tag-id returned from tag search for movies and books only worked for genre when used with when used with the insight. Subgenre tag-ids and keyword tag-ids were not working by sefault. Howeevr, I was able to figure out a way to get the keyword tag IDs to work by replacing qloo with media at correct position and this helped with more granular data
3. Figuring out the best way to chain locational context for other categories that are not places was also quite tough

Another challenge was implementing the robust state management for the browser's back/forward navigation in vanilla JavaScript, which required careful handling of the History API to ensure a seamless user experience.

Accomplishments that we're proud of

We're incredibly proud of building a fully-featured, polished single-page application in such a short time. The persistent session history that integrates perfectly with the browser's native navigation is a feature we're particularly happy with, as it makes the app feel intuitive and powerful.

What we learned

We learned that the true power of modern recommendations lies in combining a rich, structured dataset like Qloo's with the flexibility of an LLM. This fusion allows for a far more intuitive, human-centric search experience than traditional filtering methods can offer, closing the gap between what a user thinks and what a machine can find.

What's next for Recommendi

A win here would be a fantastic validation of our approach and would hopefully enable us to continue our work with Qloo. Our immediate next steps would be to expand the supported categories, especially tackling the complexities of 'Destinations'. We would also move session history to a backend database to enable cross-device syncing and build out personalized user profiles.

Built With

• python
• qloo