MangoMatch Logo

MangoMatch

MangoMatch is a web application created as part of my Final Year Project. It’s designed to help people quickly find recipe ideas based on the ingredients they already have at home — making cooking more convenient, affordable, and waste-free.

What It Does

Simply input your ingredients, separated by a comma, and MangoMatch will suggest meal options that you can make using them. You can also apply dietary filters like vegan, gluten-free, dairy-free, and more to tailor results to your needs.

Technologies Used

  • HTML, CSS, Bootstrap (frontend)
  • Python with Flask (backend)
  • Spoonacular API for recipe data
  • JavaScript for interactivity

Project Goals

The goal was to reduce food waste and help users get creative with what they have at home. But it was mainly a way to show my learning — connecting Flask with an external API, understanding backend logic, and hosting the app.

Design Journey

The UI changed *a lot* during development — it went through multiple redesigns. Watching it transform from my first layout to the final version was one of my favorite parts of the process.

Just have a look below...

Future Implementations

I’d love to add a “no thanks” ingredient filter — where users can type ingredients they want to avoid (like “no beef” or “no onions”) in a smaller search bar below the main one. This would make the results even more personal and helpful, especially for people with preferences or dislikes.

First Prototype
Old Design Screenshot
Final Design
Final Design Screenshot