Inspiration

Food is a passion, yet there is no easy way to share this passion. For others, food is a necessity, yet finding good recipes you want to cook has never been harder. Munchify is the social media for promoting the passion of food and cooking, empowering people to grab their forks and knives and dig in!

What it does

In the app, we call recipes “munchies”, and the users are “munchers”. Once a user logs in, they have access to all munchies that have been uploaded by other users and the ability to upload their own munchies. A munchie contains the ingredients and directions, and also contains the nutritional data and a common category that the recipe relates to.

Primary function

Munchify allows munchers to get the best possible recipe, plain and simple. Munchers can input ingredients they have on hand, relative costs, recipe names and tags. Making it extremely simple for anyone to find what they want to cook and eat. Easy as butter on toast!

Social Media System

Munchers can visit other users by clicking on their icon. They view their munchies, amount of followers (munchers) and how many users they are following (munching). By creating a platform to serve good food from good people, Munchify strengthens the interactions between stuck-at-home-er’s and food enthusiasts alike.

How we built it

Initial Design

For the design of the project, Figma was our best friend. Within the span of an hour, we had a user authentication flow wireframe connected to a multi-panel and multi-modal home screen.

Front end

Munchify’s core is built using the web. The majority of this team has previous web development experiences, but practically zero native app development experience. We leveraged this to our advantage by using Ionic React. Harnessing the flexibility of React, with the elegance of mobile app design. Ionic’s documentation was straight-foward and provided a lot of customization w/r/t their provided components.

Backend and Database

Munchify’s entire backend database, authentication, and hosting is powered by Firebase. With their client side SDK for JS/TS, we were able to get up and running very quickly. A tremendous amount of time that is usually allocated to a backend server setup and signup authentication was now used towards building more features, as we set up Google Authentication with only a few mouse clicks! Cloud Firestore allowed us to have multiple collections and documents with near-instant queries. We also set up a custom Github Action to trigger an automated build and deployment to Firebase Hosting on push to the main branch, avoiding to deal with over-complicated build scripts.

Challenges we ran into

As the number of recipes and users increase, the performance for searching for a recipe based on ingredient names drops drastically. This is because if the user inputs a slightly different version of an ingredient (egg vs eggs), the search won’t show up. To solve this issue, we gathered ingredients from large open datasets such as the ones from USDA or OpenFoodFacts, and parsed them into Munchify. These datasets also contain the nutritional facts of each ingredient. By formatting each recipe in a consistent manner, our general query performance increases drastically.

Accomplishments that we're proud of

We are very proud of the minimum viable product for Munchify. The sleek and modern user interface exceeded our initial expectations when prototyping on Figma. We’re really proud of the way we worked together as a team, from start to finish. We pushed ourselves outside of our comfort zone, reading completely new documentation and frameworks. We are extremely grateful to be able to share this project and express our ideas on the theme of connectedness in front of the hacking community.

What we learned

For all of us, we learned how to work with Ionic React to make a mobile app, and also learned how to interact with Firebase. We loved how simple it was to implement Firebase and we’re really proud of how well we made it work with our design. We learned how to investigate and debug memory leaks the hard way. As a result of our inexperience with React’s useEffect hook, we actually reached the insanely high daily quota for Cloud Firestore. If we were to take one lesson away from this entire hackathon, it would be to be careful with your dependencies, kids!

What's next for Munchify

We would like to add as much data regarding nutrients, ingredients, and cost to improve the user experience in making a recipe. This would allow our users to better express their recipe, contributing to the goal in encouraging people to cook.

A big feature of this app is the social media aspect. We would want to expand on the infrastructure of the social network so we can better recommend users and recipes.

Imagine a world with Munchify: Interact with other users to share a passion for cooking Recommendations for the best possible recipes tailored made for you

Get Munching! https://munchify.space

Built With

Share this project:

Updates