The Quarantine Cook

Inspiration

One of the most exciting and prevalent activities we all have done in quarantine has been cooking and baking. Drawing inspiration from this, we decided to create our webpage that allows users to easily decide on exciting recipes based on a featured ingredient they have at home.

What it does

We have a search option based on the kind of food you want to make for the day as well as the kind of cuisine featuring a specific ingredient. Since the search is based on the ingredients available at home, it decreases the risk of going out multiple times to buy hard-to-find ingredients in these trying times. You could also personalize recipes around locally sourced and seasonal ingredients, which could help support small businesses and local food producers. This would allow everyone to enjoy a diverse variety of meals easily at home and thus reduce the stress of trying to figure out interesting recipes everyday.

How we built it

To create this web app, we developed our code using Javascript, HTML and CSS, and utilized TheMealDB API. The API enabled us to connect our queries for randomized ingredient search to the database of recipes. Our code was then built around extracting the information from the query and processing it for display on our webpage using HTML and CSS. We were also able to enhance the visual appeal using queries for images of recipes from the database using the API connecting the recipe.

Challenges we ran into

Since it was our first times working with Javascript, we were starting from scratch and trying to create functional product utilizing skills we had learned over other projects. We also did not know how to interface API's in the beginning, but exploring the Hack4Impact's workshop and some online tutorials helped us get a hang of it. Integrating HTML and CSS with Javascript was also a great learning experience in creating an overall viable product.

Accomplishments that we're proud of

We were able to create a fully functional and viable recipe web app from scratch and learn a lot about web development from the workshops presented. It was a super fun experience and we are all very happy we accomplished this working together as a team

What we learned

None of us had ever worked with Javascript prior, and this project was a great overall learning experience in web development for all of us. We also learned a lot about integrating HTML, CSS and JS together to create a completely functional and hostable web app.

What's next for The Quarantine Cook

We could add a drink pairing for each of our meals using another API. We also planned on expanding the web app to showcase multiple recipe options and recipes from different cuisines for the same ingredient.

Built With

• css
• html
• javascript
• themealdb