Pantry Pal

Inspiration

As busy students and food lovers, we realized how often we let ingredients go to waste simply because we didn’t know what to make with them. We wanted to create a tool that helps people make the most of what they already have—whether they’re college students, working professionals, or home cooks trying to reduce food waste.

What it does

The user inputs the ingredients they have in their pantry and fridge and the website sends them options of recipes they can make.

How we built it

There are 3 steps to our website:

Create an account
Search for recipes with ingredients in your pantry
Like your favorite recipes. Our tech stack is React JSX, Firebase Authentication with Firestore, API Integration (from Groq Cloud and Pexals API), and general web development tools such as CSS. Users begin by creating a Pantry Pal account, which uploads their log in information (name, email, and password) into our Firebase Authenticator. The user may then log in with their new credentials and move forward to our main page of Recipe Searching. Our customers can then use the search bar to input the ingredients they currently have in their pantry (hence Pantry Pal). When the "Search" button is clicked, our Groq Cloud API fetches data and displays Based on what our customers have in their pantry, they may search o Our application functions by have Frontend: Built with React, we designed an intuitive and responsive user interface that makes searching and saving recipes easy. Backend/Database: We used Firebase Authentication for secure user sign-up and login, and Firestore to manage user data and saved recipes. AI Integration: We used Groq Cloud's API to generate recipe content based on user-inputted ingredients. Media: Recipe images are sourced from the Pexels API, bringing our suggestions to life.

Challenges we ran into

We found it hard to find APIs to find recipes at first, but we ended up using groqCloud and Prexel.

Accomplishments that we're proud of

We're proud of building a fully functional web app in just 24 hours that takes user-inputted ingredients and returns recipe suggestions using an external API. We created a clean, easy-to-use interface and learned how to effectively manage state and data in React. Even though we ran into API limitations, we adapted quickly and found creative solutions to keep the project on track. Most importantly, we collaborated smoothly, combining our skills in design, frontend development, and logic.

What we learned

Through this project, we learned how to integrate APIs into a React app, fetch and display external data dynamically, and troubleshoot common issues like API errors and JSON parsing. We also gained experience designing an intuitive UI and working with React features like hooks and conditional rendering. This hackathon also taught us how to manage time efficiently, divide tasks as a team, and iterate quickly based on feedback and challenges.

What's next for Pantry Pal

In the future, we plan to add a "Favorite Recipes" page where users can log in and see all the recipes they've saved by clicking the heart icon on any recipe card. This will allow users to easily return to meals they love and plan their cooking more efficiently. We're also working on integrating an image scanner that will identify ingredients from the picture users upload, and automatically feed them into the app, generating recipes based on what users actually have on hand. These features will make Pantry Pal more intuitive, user-friendly, and tailored to real-life cooking needs.