This is a recipe based App. Here you can find a lot of different recipes from different countries and cultures with, well, just a click way!
It was built using Edamans API, as well as the Youtube API when the user is send to the recipes description page.
This app was built using:
-
styled-components for CSS.
-
react-routed-dom to create routes.
-
axios for API requests.
-
react-helmet for tab titles.
With this app you can have an idea on how to start building an e-commerce app, at least the design part, it doesn´t have any sort of server-side algorithm, all of his search results are simply based on the input search, and recipes names.
The search page provides you a list of recipes based on your input, it doesn´t have to be a specific dish or anything, it could be just a regular food, like chicken, for example.
If you like one, and want to know its recipe, ingredients and everything, just click on the 'View Recipe' button.
When you reach this page, you´ll have all of the recipes information, including some other relatable recipes at the right side (and a youtube video to close de deal).
You can check the recipes original site, if you want to, on the 'Instructions' string, and watch de youtube video to have an idea of how the recipe is made, or looks.
And the best part, let´s suppose you really love the recipe! You can add it to your favorites list! And it´s going to be saved inside your browser forever!(or at least until your localStorage is cleared)
Here you´ll have all of your favorite recipes that you previously added. And you can check It´s recipe, ingredients and instructions whenever you want to!
Since I didn´t create an youtube algorithm, the recipe video is included only at the original description page, but you can see everything else inside this page.
If you don´t want to have a specific recipe saved anymore, all you need to do is click on the 'Remove from Favorites' button, and voila! You´ll be sent back to the favorites Page, and the recipe won´t be there anymore.
That´s it! I hope you enjoy :)