Where's My Munch

Where's My Munch?
Home Screen
Config Screen
Question Screen

Inspiration

When coming together as a team to brainstorm ideas, we focused on solving some common daily challenges that each of us faces. One teammate shared their frustration with spending too much time trying to decide on a restaurant, whether eating alone or with friends where they often struggled to pinpoint exactly what they were in the mood for.

What it does

This sparked the idea to create an app that would help users discover nearby restaurants and guide them through a series of AI generated questions to figure out exactly what they're craving at that moment. Based on the user's location data and the range they're willing to travel, this information is used to find a list of nearby restaurants which is then fed to an AI agent. The AI crafts a custom question based on the available restaurants around the user and presenting the user with four choices to pick from. Once the user selects an option, their choice is processed by the AI, and a new question is generated. The user goes through five rounds of questions, and at the end, the AI delivers a final recommendation for the restaurant that best matches their mood.

How we built it

Once we had the idea, we divided the roles between the frontend and backend teams. The frontend team focused on learning and designing the UI using Figma and then implementing the designs with React Native. Meanwhile, the backend team worked on the restaurant search and AI functionalities. For restaurant searching, we utilized Google's Places API, specifically the Nearby Search function, to find relevant restaurants. For the AI, we chose the Gemini API, as some team members had prior experience working with it. Finally, we decided to use Flask for our backend, which would serve as the bridge between the APIs and the React Native frontend.

Challenges we ran into

We faced a mountain of challenges throughout this project, from navigating Google’s dense documentation to struggling with integrating the frontend and backend. One of the biggest hurdles was working with Google’s Places API, which came with its own set of limitations. For instance, we were restricted to fetching only 20 restaurants at a time, and some features we really wanted - like filtering out restaurants that weren’t open at the time - were deprecated in the latest version of the API. On top of that, our team’s lack of experience with React and Flask made it incredibly difficult to combine the data processed in Flask (with the help of the Gemini API) and display it neatly on the React frontend. It felt like we were constantly wrestling with mismatched pieces that just wouldn’t fit together.

Another challenge was settling on a design. We knew from the start that we wanted a minimalistic look that evoked the feeling of food, but finding the right color palette and visual style was surprisingly frustrating. Without a clear design direction, we couldn’t properly start coding the frontend in React, which added to the pressure. It took a lot of trial and error (and a fair bit of arguing) before we finally landed on something we were happy with.

But perhaps the biggest challenge of all was integrating everything into a cohesive system. We had so many moving parts - frontend, backend, APIs, and more - and every time we fixed a bug, another seemed to pop up. It felt like playing a never-ending game of whack-a-mole. Combine that with the tight time constraints and the lack of sleep, and you can imagine how the fatigue started to pile up. There were moments when it felt like the pieces would never come together, but somehow, through sheer determination and teamwork, we managed to pull it off.

Accomplishments that we're proud of

As first-time hackathon participants, we faced a steep learning curve, but the experience was incredibly rewarding. One of our proudest achievements was successfully integrating AI into our application-something none of us had done before. Seeing it come to life filled us with immense joy and a sense of accomplishment. Another milestone was crafting a polished frontend entirely from scratch. Without relying on component libraries, we dove deep into CSS, wrestling with <div> elements and styling challenges to create a visually appealing interface. Beyond the technical wins, we’re equally proud of how well we collaborated as a team. By effectively delegating tasks between frontend and backend teams, we maintained a steady workflow and kept the project on track. Getting started was daunting-navigating unfamiliar territory like designing UI/UX in Figma, brainstorming system flowcharts, and planning the overall structure. But overcoming these hurdles made the final result all the more satisfying.

What we learned

Integrating Frontend and Backend Systems

One of the most challenging yet rewarding aspects of this project was integrating React with Flask, as it was our first time working with such a stack. This experience introduced us to a new world of programming, teaching us how to establish communication between a modern frontend framework and a Python-based backend. We learned how to handle API requests, manage state across components, and ensure seamless data flow between the two systems. Additionally, integrating APIs like Google Places and Gemini into our Flask backend deepened our understanding of working with external services. We gained hands-on experience in parsing API documentation, implementing authentication, and handling responses effectively, which expanded our ability to leverage third-party tools to enhance our application’s functionality.

Designing and Developing a Responsive Frontend

We initially underestimated the complexity of frontend development, but this project taught us the importance of thoughtful design and execution. Creating a visually appealing and user-friendly interface from scratch was no small feat, especially without relying on component libraries. We learned how to structure layouts, style elements using raw CSS, and manipulate <div> elements to achieve the desired look and feel. More importantly, we gained valuable insights into building a responsive web application that works seamlessly across different devices. This experience not only improved our technical skills but also gave us a deeper appreciation for the intricacies of UI/UX design.

Collaborating Effectively as a Team

While it may sound like a generic lesson, working efficiently as a team was one of the most significant takeaways from this hackathon. Each of us learned how to combine our strengths and compensate for each other’s weaknesses, creating a balanced and productive workflow. Navigating conflicts and communicating effectively were challenges at first, but over time, we developed a respectful and collaborative approach to sharing ideas and resolving disagreements. These experiences not only strengthened our teamwork but also boosted our confidence in handling group dynamics, a skill that will undoubtedly benefit us in future projects.

What's next for Where's My Munch

So, what’s next for Where’s My Munch? Well, we’re dreaming big! Right now, we’re looking to build a database to store user preferences, so the AI can learn from them and get smarter over time. Imagine it-no more random recommendations! The more you use it, the better it gets at suggesting restaurants you’ll actually love. It’s like having a foodie bestie who gets you.

But that’s not all. We’re also thinking about integrating social media into the mix. Let’s be real-how many times have you seen a restaurant on Instagram or TikTok, saved it, and then completely forgotten about it? We want to fix that. If you share that link with us, we’ll save it to your profile and, if it matches your mood later, we’ll recommend it to you. No more lost food inspo!