Project 2 Recipes from around the world using react

A place to find recipes from all over the world! My website will allow you to type in an ingredient or type of dish and you will have a list of recipes to choose from.

How did I do it?

First I started by making a fetch request to an Api with a list of recipes. For this to work in react I used the useEffect hook. When you call useEffect in your component, this is effectively queuing or scheduling an effect to maybe run, after the render is done. After rendering finishes, useEffect will check the list of dependency values against the values from the last render, and will call your effect function if any one of them has changed. So when something such as a search for new recipes is made by the user this will cause a re-render. Once that information is successfully retrieved from the api I can then decide what data we want to presented on our website. Which brings us to our next hook useState, this will allow our variable information to change overtime. This is very useful when handling user interaction. I then made a card for each recipe to be placed on, so the user will have an easier time separating out the returned results. Once we have the information displayed we need a way for the user to search for recipes. This takes place in the search bar, there the user can look up any type of dish they desire and the search will bring back the results. If the user wants taco recipes that can be retrieved or more specifically if they want just chicken taco recipes they can search for that as well.

To be a full website we cant just have one place where the recipes are searched for with no other context. For the user to be able to navigate through the site I created a nav component. This nav component holds links for our home, about and recipe components and creates a path for them all have their own pages. Home is a page that welcomes the user to the site and in the about I give a description of how the user can search for the recipes they are looking for.

Once we have everything working correctly we can add a little style to our website. We want our website to have great functionality but it is also important to have a website that is pleasing to look at. We want our users to return.


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store