Inspiration

  • I got inspired when I noticed how during the seasonal times, there are many family events and there are not lots of time to think what to cook at an instant. So, with the use of an external API and with the power of frontend React.js skills, I was soon able to develop this web page to solve the issue.

What it does

  • The website retrieves data from an API and displays a video and a step by step instruction set next to it. This helps make it simple enough for the user to be able to navigate easily and be able to play their video while cooking.

How we built it

The website is mostly frontend based with the design, but as well as implementing Axios to get data without the need to make a whole backend consuming much of the time.

Challenges we ran into

Being able to put in the video and retrieve data with axios was by far the most challenging aspects. As well as, having to work on the project Solo makes each part more difficult as there was not much help I could get from as time was running out, but was able to do my best.

  • Note: the video was sort of tricky as my laptop is not built to record audio and was midnight :|

Accomplishments that we're proud of

I love the way the design turned out being simple and not as chaotic as I thought it was going to be initially. Not only that, but I was able to do this by myself and pressured myself to be able to finish this amazing engaging project.

What we learned

As I mentioned previously with the challenging part being fetching data from an API, I was shocked to see how I was able to learn how to not only fetch the data, but being able to display it and interact with it is really cool and impressive to see. I hope I could soon learn to implement other requests and perhaps learn to make a backend in such as short amount of time.

What's next for Recipe API waiter

I hope to be able to include a save option for the recipes as one does not want a dish they would want to use again for another holiday, but be able to access it and share with their friends or family.

Built With

Share this project:

Updates