Mealify

Mealify uses AI to help users find recipes with ingredients they have. Upload images to populate your virtual pantry, get tailored recipes, and find nearby stores for missing items.

Comment

Inspiration

As college students, we recognized the common pain points of meal preparation: uncertainty about what to cook with existing ingredients and where to find the most cost-effective ingredients.

What it does

Our website helps users discover new recipe ideas based on the ingredients they already have in their pantry. Users can upload photos of their groceries/ingredients, and the web app will generate the best recipe that can be made from them.

How we built it

Frontend: React, Tailwind

Backend: Firebase, Node.js

Challenges we ran into

  • Identifying an API that could easily process user-uploaded images was difficult. Some APIs only accepted whole images, while others required web URLs, making it challenging to convert user-input images (in base64 format). After research, we found that Google Gemini Pro Vision API processes base64 images, matching our needs. However, it posed challenges such as generating random or inconsistent recipe suggestions. We had to fine-tune our prompts to ensure consistent and relevant responses.
  • Implementing a dynamic, responsive, and visually appealing front end proved challenging. Most of the artwork on the website was hand-drawn, so we used minimal pre-built frameworks and relied heavily on vanilla CSS. Debugging weird edge cases in the front end was time-consuming.

Accomplishments that we're proud of

  • Successfully integrating Google Gemini for image recognition and recipe generation.
  • Overcoming technical hurdles through teamwork and persistence.

What we learned

  • We learned the values of teamwork and persistence. There were multiple instances of difficult problems, but as a team, we kept working and did not accept defeat.
  • We also all honed our technological skills, across the board in various technologies such as Firebase, React, Express, and Nodejs.

What's next for Mealify

  • Provide recipes for more than one meal.
  • Fine-tune the front end to be more user-friendly.
  • Enable text input for ingredients.
Share this project:

Updates