Inspiration

As college students, we know the firsthand struggles of having fresh and readily accessible groceries. More often than not, we’re struggling to think of how to make healthy, affordable meals from the different produce and spices in our kitchens. We needed an innovative solution to learn new, healthy recipes given the ingredients we had on hand since nutrition is paramount to a happy college experience. With that, all the recipes in our app list its nutritional facts, including carbs, proteins, and fats.

What it does

Our web app allows the user to input all of the ingredients in their kitchen and then search for meal options. The result of the search is a myriad of meal options, how many of the ingredients in the meal are already available, the nutritional facts, and the steps to make the meal. This allows users to see which meals use the largest amount of ingredients they already have and which ones best fit their personal nutritional needs.

How we built it

Our frontend is run using React, HTML/CSS, and our backend uses PostgreSQL and Supabase as a backend server. The main page displays two columns of inputable lists for ingredients. Once at least one ingredient is inputted, the recipes are sorted for best match, ranked by fewest missing and most matching ingredients.

Challenges we ran into

The first challenge we ran into was finding a database that contained a suitable amount of recipes and also included the nutritional facts. After spending hours scouring the internet, we found a suitable database on kaggle.com and compiled it into a json file. However, because we wanted a dynamic and editable database, we researched online backend platforms to hold the recipes, choosing Supabase. Another difficulty we encountered was using SQL to query the database. The columns in the database were a mixture of text strings and json strings. After cleaning the data, our sorting algorithm for the recipe was another major challenge. While we could sort the recipes based on how many ingredients were readily available, we also wanted to prioritize the recipes that didn’t need many other ingredients. Thus, finding the optimal algorithm between these two priorities took a lot of fine tuning and recipe sorting.

Accomplishments that we're proud of

We are proud of Healthy Pickin’s and how much we have all grown, both in our technical skills and as a team. And more than that, we are excited to share our project with our peers and give them the tools they need for healthy, convenient nutrition. Most notably, we spend a lot of time and effort on the design and the sorting algorithm, to create optimal experiences, accessibility, and convenience for any user.

What we learned

None of us have made a web app before, so we are very proud of the learning that went into developing Healthy Pickin’s into a fully functioning application. Individually, Emily learned how to make a backend, being the data mastermind behind our Supabase database & postgres api; Nikita explored the potential of React apps and mastered SQL queries; and Kaelyn discovered the power of HTML and CSS while designing the frontend. Together, we’ve learned the power of teamwork and how a determined mindset can work together to overcome challenges and pesky merge conflicts.

What's next for Healthy Pickin's

We want to combine computer vision and machine learning and upgrade the software such that the user can take a picture of their fridges and pantries instead of typing in everything.
Additionally, we want to be able to further differentiate ingredients, while being able to match similar items, so that, for example: chicken and chicken thighs are categorized the same, but banana and banana peppers are not. Lastly, we want to add filters so users can sort their protein/carb amount preferences, and potentially exclude certain foods/ingredients for allergies or dietary restrictions. We also plan to publicly deploy our web app online using Vercel.

Share this project:

Updates