To see the actual app click here

I’ve been starting to cook more at home, and the one thing I’ve noticed is that being a good cook does not only mean being technically skilled but also having the ability to make food from the ingredients that are readily available to you. I say this as most of the time you probably won’t have the exact ingredients needed for a specific recipe, as such improvisation is exceedingly useful. As a novice cook, I’ve been looking for recipes to try out however, the main issue is that most of the time I’m missing several key ingredients, and with going to the grocery shop often not being feasible/safe, I’ve had to save these recipes for the future. It was because of this inability to find recipes and then buy the ingredients, that I started to think about the reverse: could I find recipes based on the ingredients I had available to me?

To my dismay, I could not find any sites that did this neatly and concisely, as I often had to settle for Googling for recipes, a process which proved to be quite cumbersome, with the results being quite sparse and located on several different websites. Thus while simultaneously irritated and hungry - I decided that I’d build my own recipe searching website.

The App

I ended up naming my app Dinner Detective, as it really is a sleuth at finding out what recipes I could even make with the seemingly random selection of ingredients that are left in my fridge, and I’ll be honest it has saved my dinner from being toast with butter on it on several occasions.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Figure 1: The Dinner Detective Homepage

The functionality of the web app is pretty simple, to search just click the magnifying glass and type in whatever ingredients you have (separated by a comma and a space), and just click enter! And after only a couple of seconds, you will have up to 100 unique and diverse recipes available to you.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Figure 2: The results yielded by searching “Chicken, Potatoes”

Moreover, the app will also show you for each recipe what ingredients were used from your initial query, and any ingredients you might be missing (or just did not include in the search).

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Figure 3: An example of a recipe card

With the wide variety of recipes provided, you’re bound to find something that will pique your interest, or at least make your stomach rumble. Thus, once you have made your choice you can easily navigate to the recipe’s dedicated webpage using the conveniently placed button. I wish you happy cooking, and may your stomach be continually full! Feel free to check out the code on this Github repo.

The Tech Used

Now let’s talk a bit more about how I created this project. Despite me having been learning React for quite a while now, I have not created anything too big, as such this was one of my first larger-scale React projects which actually had a practical purpose. I opted to use React for this project, as React hooks felt like they would be a very effective solution for rendering a large, potentially changing number of recipes to the screen. I also decided to use Axios for handling HTTP requests, as it lets me be more streamlined with the process, and it looks and is a lot cleaner. However, the real main learning experience was in regards to using an API in my web app, as until then I had never done so. However, this process ended up being rather simple, but I guess this does vary quite a bit between various APIs, as different ones have different levels of documentation and support. The main API I used to power the bulk of this project was the Spoonacular API, which in essence is a huge database of recipes from all around the world. However, the special thing about the recipes curated by the API is that they all have ridiculous amounts of information about each recipe, which includes everything from their ingredients to their nutritional values, and even wine pairings! Due to this, it made it rather easy to query the database for recipes that were relevant to the user. Finally, the last component was Google Firebase (and the CLI), which I used to host this web app. Now, despite all of these technologies not being too sophisticated on their own, this was a good learning experience for me as I learned how to integrate all of them into a nice and cohesive user experience.

The Issues/Weaknesses

Surprisingly, the largest weakness with the app is not something I even have much control over, and that is the API itself. If the prospect of being able to gain access to such a large and detailed database of recipes sounded too good to be true, well you would be right. The way the API functions is that it limits each user to only 150 server requests each day, meaning that if on one day the site gets an increased amount of traffic it will just stop working. A server request can either be done by typing in some ingredients in the search bar and hitting enter or clicking the recipe button on each recipe card. The latter may suprise you, but due to how the API is laid out, in one query I only receive the ID of the recipes yielded from the ingredient search, as such to find the link to the recipe, I have to make a new request to the server, which is incredibly annoying for me, but incredibly smart on their end for making money. The only way to increase the cap of the number of daily requests is simply to pay them, however as a University student who has been laid off from his job due to the pandemic, I have no money so I guess this is how it will be for now. The second issue is with the CSS Styling. I have studied CSS for 2 days, and as such, I don’t consider it one of my skills, however, it is very much necessary if you want to make your webpage look even remotely nice. Thus I needed to adapt open-source CSS stylesheets from online to make my app look presentable. As such I want to credit Jarno van Rhijn for the simply elegant search bar design, the code for which is available here. I also wanted to credit this stylesheet I found while googling for projects similar to mine so that I could get help with the CSS of the recipe cards.

Next Steps

There’s a lot more that can be done with the Spoonacular API, however, due to the paywall, I don’t know how much more I really want to do. However, that is not to say that I won’t ever touch this project again. I still think adding in a nutrition section, or also being able to search for only non-veg or veg recipes exclusively could be a very enriching feature to add and I look forward to returning to add them in the future! The other obvious next step is to make the site look better, however, I don’t know when I’ll be able to do this as CSS is not very high on my to-do list, however, I guess only the future will tell, till next time!