General Assembly Project 2 - Reciplease

This is an application built using JavaScript and React that allows you to search for your desired food and see how it’s made including details about measurements and ingredients. This was a paired promgramming project with Steve Dobbie, and the time period to complete was 48 hours. I was responsible for ensuring that the back end was correctly retrieving information from an external API, designing the home page, designing the individual recipe pages and also building the filter functions to choose a recipe. You can find the application here.

Links

Application

Reciplease: https://reciplease-thisisgurpal.netlify.app/

Contact

Gurpal Gohler (LinkedIn): https://www.linkedin.com/in/gurpal-gohler/

Brief

The brief is to build an application that consumes a public API and has several components.

Installation

• Create app - npx create-react-app APP_NAME
• Go into folder created - CD APP_NAME
• Clone to GitHub repository - git remote add origin git@github.com:YOUR_GITHUB_USERNAME/YOUR_REPO.git
• Install dependencies - yarn
• Start server - yarn start

Technologies and tools used

• React
• JavaScript
• Axios
• SCSS
• CSS
• React Router DOM
• Visual Studio Code

Plan

When starting this project we both shared to each other any ideas we had for this application we were going to build. In both of our lists we had an idea of developing a recipe application, as this was the case we went forward with this idea.

Now we had the idea, we began searching for public API’s to use that will be suitable for us. We knew that we wanted images, recipes information, ingredients and also a way to filter the recipes. In our case we found an API (https://www.themealdb.com/) that tells us where the recipe is from and what type of food the recipes has in it, this information we used as our filters. After this we began wire framing the application on Excalidraw (whiteboard tool), thinking about how we wanted it to look.

To work together on this project we decided to work on the code together using a live share feature on VS code. This worked well for us as it allowed us to work out problems together and also have input into each section of the application.

Walk through

Home page

Initially when the application loads there are no recipes shown, only the filters where you will have to choose your preferences. However in the background we made sure that all of the meals from the API are saved into a react state, so they are ready when the user filters the dropdowns. The home page box has a background image and a linear gradient so you are easily able to read text over the top of it. To create the dropdown options for area and type we took the distinct values and used those as the options.

Choose Area and Type of food

When the user has chosen their preference of area or type of food, the values are saved into states so we can use them to filter the total number of meals. This filtered array of meals is then saved into another state and then used to display the meals below. For example in this image you will see recipes for Vegetarian Indian food in relation to the dropdown choices. If the user changes the dropdown option the states and meals will be updated accordingly. Each of these meals shown have been wrapped in a link tag which will take you to the individual recipe page, this is done using the meal id in the route path.

Recipe page

For the recipe page to get all the details of the individual recipe we need to get the meal id and use it in a get request. To get the meal id there is a method called useParams from React Router DOM which will help us do this, and now we use this value in the get request to retrieve the recipe details which will be saved into a state.

The data for the recipe is now used and styled to show the meal name, origin, picture, ingredients, instructions and links to find out more. The ingredients section has two parts to it, the ingredients and then the measurements. Both of these are saved into a state and then displayed by using the map array method.

Code examples

Consuming public API

To consume the public API we used an Axios request. This API wasn't the easiest to use as we had to make one get request in order to retrieve the meal id's, and another to use these id so we can get the details about the recipe. Therefore we put an Axios get request inside of another Axios get request.

To filter the food using the dropdowns I created a function that will determine which option has been chosen by giving the select tag a name and then using an if statement to know which dropdown is being changed. The chosen option will then get saved to a state, everytime the filters are changed the states are also updated.

Each time these areas and types of food states are updated the recipes filtered state also gets updates which hence updates the recipes shown on the page. In the useEffect you can see the dependencies are recipes, cuisineChosen and typeChosen. Inside of the useEffect is an if statement that will use the current filter choices and then use the filter array method to filter the recipes state.

Key learning and takeaways

For me the key learning was being able to use a public API to gather information that can be displayed on an application. The Axios functionality is something I had not ever used before, or any functionality to retrieve data from an API for that matter. This was a big win and helped me realise the possibilities of what can be possible with using public API's to develop meaningful projects.

Another takeaway for me was using React Router DOM to navigate through to different pages in the application. I initially was not sure how to do this, but learning about it in the build up to this project was really helpful and I'm happy now with my understanding about how it works to move through the application.

I further was not experienced in using react states to hold the data. I found it hard to grasp at first how to use these states but as I learnt more about it I understood how to create states, update them and interact with them.

The biggest challenge on this project is having to use an Axios request inside of another one, due to the structure of the public API. The API required us to first get the meal id's and then use those id's in another request to get the details of the meal. We ended up using the forEach array method to do this and then pushing each meal into an array, once all the meals are in the array we then saved it to a state.

Another challenge was displaying the measurements and ingredient on the single recipe page, these measurements were in the API like so:

• Measurement1
• Measurement2
• ...

The ingredients were in the API like so:

• Ingredient1
• Ingredient2
• ...

The measurement 1 was related to the ingredient 1. The issue was that if some of these fields didn't have any data, they might have a space or have the value Null. What I had to do was an if statement checking which fields are not missing, do not have a space and are not Null, then use only the others ones to display on the page.

As a future feature to add is a text search box as well as the dropdown options. This will make it easier to search for recipes. I would also like to include a section that finds the cheapest options for the users to find the ingredients in the recipes. I think this would be useful for users who are trying to save and cut costs whilst making some tasty food!