Make Ur Dish (M.U.D)

• 

  our full web page

What Inspired Us

The inspiration for this project came from the desire to simplify cooking and reduce food waste. We wanted to create a tool that helps people make the most of the ingredients they already have at home. By combining AI technology with recipe generation, we aimed to provide a solution that is both practical and innovative. The idea of using image recognition to identify ingredients and suggest recipes felt like a natural way to bridge the gap between technology and everyday life.

What We Learned

Throughout the project, we learned how to integrate AI, specifically Gemini AI, into a web application. This involved sending image data to the AI, processing the response, and dynamically displaying detected ingredients. We also gained experience in handling API requests, error handling, and parsing JSON data. Managing state using React’s useState and useEffect hooks was another key skill we developed, allowing us to track ingredients, recipes, dietary filters, and allergies seamlessly.

We also learned the importance of component-based architecture, breaking the app into reusable components like ImageUploader, IngredientsDisplay, and RecipeResults. This made the code modular and easier to maintain. Additionally, we gained experience in dynamically generating recipes based on user inputs, using filtering and sorting logic to provide personalized suggestions. Designing a user-friendly interface with features like drag-and-drop image upload and interactive filters was another valuable takeaway.

Built With

• api
• gemini
• javascript
• react