Inspiration

Have you ever wanted to cook an old recipe but couldn't find it? Or have you ever wanted a place to store all of your recipes together, but dread out-dated paper cookbooks? Cookbook.io is here to save the day! This online platform serves as a host for all of your best recipes. We eliminate the need to print or screenshot your favorite recipes and help you stay organized.

What it does

The web app stores your recipes as cards on the main interface and also has a random recipe generator for when you don't know what to cook! You could either search for recipes of your favorite foods with the search bar or enter your own with the "add recipe" button.

How we built it

As web development newbies, we wanted to get our hands dirty and understand the basics before moving onto frameworks. This app was thus built entirely with pure HTML, CSS, and JavaScript. We used google's Firebase to host the accounts created on the web app.

Challenges we ran into

We ran into our fair share of issues building this project. Our main issue was with the database and integrating the front-end with the backend. Another issue we ran into was deploying the website. We lost quite a bit of time trying to figure out Amazon's AWS before making the switch for Google's Firebase. The third main issue we ran into was dynamically displaying the cards after the user inputted the recipe data, after some work we got it to work fine, but it wasn't exactly what we were expecting.

Accomplishments that we're proud of

We are quite proud of the final UI and overall look of the platform. We think that with some tweaking, this platform could actually be very useful for a lot of people. We were also very proud of being able to successfully deploy the website with Firebase.

What we learned

The main thing we learned throughout this hackathon is that it's very difficult to build a web app from scratch... We were told by countless mentors that we should have made the switch to a framework (react in particular), but our goal here was to learn the basics before using such tools. Next time though, no doubt we are using a framework haha. We also had our first taste of JavaScript and we are happy with what we were able to learn in such a short period of time.

What's next

One idea that we had was to develop a social aspect to this app. The concept would be that you could see what your friends and family have in their cookbooks and easily exchange recipes! We also would like to develop some sort of suggestion algorithm based on what you previously ate and what's in your cookbook!

Share this project:

Updates