Decrypting Duo - Shelf Quest

Shelf Quest makes discovering board games effortless! Search or snap a photo—AI extracts the title, fetches ratings, and saves it to your list. Built with Next.js, Firebase, and Google AI! 🎲

Comment

🎲 Inspiration

Our love for board games has always fueled our curiosity, but finding new games to play can be overwhelming. While browsing store shelves, we constantly find ourselves searching the web for ratings and reviews to help us make informed decisions. That’s why we built Shelf Quest—an intuitive app that lets users seamlessly compile a list of games they discover, complete with ratings, player counts, family-friendliness scores, and even a direct link to purchase the highest-rated one on Amazon. With the power of Google’s AI and natural language processing, our app can even analyze a photo of a board game taken in-store and instantly pull up its details!

📋 What It Does

Shelf Quest is the ultimate companion for board game enthusiasts. Our app makes it easy to organize games by rank, name, age suitability, and family-friendliness. Users can explore new games by searching manually or simply snapping a photo. The app intelligently extracts the game's title using AI, cross-references it with the BoardGameGeek (BGG) API, and adds it to their personalized list. Beyond just discovery, Shelf Quest enhances the user experience with secure authentication, Google sign-in, a sleek UI with custom branding, and an error-handling system to ensure a smooth journey. Plus, all lists are saved in the cloud, so users can revisit their collections anytime they need inspiration for their next game night. Our app is fully responsive, ensuring a seamless experience across mobile, tablet, and desktop devices.

🛠️ How We Built It

Our journey started with UI/UX design in Figma, where we laid the groundwork for a seamless experience. Then, we developed the app using Next.js, TypeScript, and Tailwind CSS for a responsive, mobile-friendly interface. Firebase powers authentication and data storage, while Google Cloud Vision and Natural Language Processing (NLP) enable AI-powered image recognition. The BGG API serves as our source for game information, ensuring users get accurate and up-to-date details. The AI-driven photo upload feature extracts text from images, interprets the game title, and automatically fetches relevant data, making the discovery process effortless. Every component was built with mobile accessibility in mind, allowing users to enjoy a smooth, intuitive experience on any screen size.

⚠️ Challenges We Ran Into

Integrating multiple APIs and AI services was a significant hurdle. Ensuring a seamless interaction between Firebase, Google Cloud AI, and the BGG API required careful coordination. Additionally, we aimed to build a fully polished product within 48 hours, meaning we had to balance feature completeness with performance optimization. Designing a comprehensive UI with well-thought-out empty states, error pages, and polished components was another challenge, but one we tackled head-on.

🏆 Accomplishments We’re Proud Of

As a team of two, we’re incredibly proud of what we achieved in just 48 hours. Our biggest accomplishments include:

An AI-powered image recognition feature that extracts board game titles and retrieves their details instantly.

A refined, user-friendly UI/UX with custom branding, error handling, and intuitive navigation.

A full-stack app with real-world usability, built from scratch with modern technologies like Next.js, Firebase, and AI-powered services.

A feature-rich experience that not only helps users find board games but also provides valuable insights and purchasing options.

A fully responsive design that ensures a smooth experience on mobile, tablet, and desktop devices.

📚 What We Learned

This project was a huge learning opportunity. Prior to this, neither of us had worked with the BoardGameGeek API or Google’s AI services, so integrating them into a functional product was both challenging and rewarding. We also gained valuable experience in:

Building AI-powered features with Google Cloud Vision and NLP.

Designing and implementing a full-stack app with Next.js and Firebase.

Optimizing performance for real-time API interactions.

Ensuring responsive design and accessibility so users can enjoy the app seamlessly on any device.

Most importantly, we learned that keeping our vision ambitious, collaborating effectively, and tackling technical challenges head-on led to an incredible result.

🚀 What’s Next for Shelf Quest

The journey doesn’t stop here! We plan to:

Improve performance and deploy on a custom domain to make Shelf Quest widely accessible.

Enhance the AI-powered discovery feature to process wide-lens images of entire board game store shelves, allowing users to scan multiple games at once.

Expand game insights and filtering options, helping users make even better purchasing decisions.

Introduce social features, so users can share their collections and discover games their friends are playing.

Further optimize mobile accessibility, refining touch interactions and performance on smaller screens.

Shelf Quest is just getting started, and we can’t wait to continue making it the ultimate tool for board game lovers everywhere!

Built With

Share this project:

Updates