Recipe.io

• 

  Entering ingredients

• 

  Ingredient added (grey box)

• 

  Recipes found!

Inspiration

Staying at home every single day has made mundane tasks seem like quite the burden, and one of the biggest problems that we faced is the task of figuring out what to eat every day. Due to the increasing risks of COVID-19, we don’t have the freedom of grocery shopping whenever we want. As a result, we often find ourselves making the same dishes over and over again, and eventually, we got sick of eating the same things.

Of course, more importantly, right now there are countless front-line workers who have risked their lives to help contain the virus, and with the help of our websites, we can make their lives just a bit easier by helping them plan out their daily meals and nutrition.

What it does

We’ve made a user-friendly website that offers users a plethora of dishes and meals they can make, given the ingredients they have on hand. On the homepage of the website, you are given the option to input a list of ingredients that they have on hand, and once we are ready to enter our ingredients, you will be given a list of foods and meals you can make.

How we built it

The front-end was built using a combination of React.js and Bootstrap. The back-end was built using a combination of Node.js and Express.js.

Challenges we ran into

Figuring out how to make the website well-formatted and responsive. As well, we had some issues with making API calls and parsing the data returned from such queries. The backend started off by having issues with routing but we got the hang of it soon enough and it was smooth sailing after that.

Accomplishments that we're proud of

We are proud of the input UI as we believe it is quite well-designed and very user-friendly. For some of us, it is our first time developing a full-stack web application, and we are happy with the way we coordinated everything and how the app turned out at the end.

What we learned

With React, we further learned how to use its lifecycle methods to make our website more dynamic. Additionally, we learned how to properly pass data between the front and back-ends.

What's next for Recipe.io

We would like to provide features that allow users to input ingredients in an easier manner. In particular, we think it would be helpful to implement an image recognition tool that allows the users to simply upload an image of all the ingredients available, and our app will automatically detect the ingredients in the picture and search for appropriate recipes.

The API provides a lot more information about each individual recipe, such as nutritional facts. Using this, we could add features such as filters to the queried recipes, or additional information displays.

Built With

• css
• express.js
• html
• javascript
• node.js
• react.js
• spoonacular