In this blog post, I would like to walk you through a workout planner web application built using React JS. Other npm packages used in this application are React-Router-Dom, Axios, and material UI.

I have used ExerciseDB API from Rapid API to fetch the data. This API is free to use and has a dozen properties related to exercises that are fetched using name, target muscle, body part list, equipment, and many more. To keep the application simple, I have fetched the API data using target muscles.

Fetching data from an API has always been a tedious task, but with Axios, it's a cakewalk. Axios is one of the most widely used JavaScript libraries used to fetch data from an API. It's an HTTP-based request-response model that allows users to make client-side requests. It supports promises as well.

To take input (target muscle) from the user, I have used the form, and the state is managed using the useState hook provided by React. The input obtained is then fed into the API. The API response is an array of javascript objects that match the target muscle and to render this data, the map() function is used. The map() is a higher-order function that calls a callback function once for each element in an array and constructs a new array.

A try-catch block handles all the runtime errors in case of a bad API call. This makes sure that the application doesn't crash when it's not provided with the expected response.

A typical API call using Axios would look something like this,

const axios = require('axios');

const options = {
  method: 'GET',
  url: 'https://exercisedb.p.rapidapi.com/exercises/bodyPart/back',
  params: {limit: '10'},
  headers: {
    'X-RapidAPI-Key': 'apikey',
    'X-RapidAPI-Host': 'exercisedb.p.rapidapi.com'
  }
};

try {
    const response = await axios.request(options);
    console.log(response.data);
} catch (error) {
    console.error(error);
}

and the response would look something like this,

quipment:""
gifUrl:""
id:""
name:""
target:""
secondaryMuscles: []
instructions: []

For simplicity, I have limited the API responses to 3, meaning, for every input, I would get 3 responses corresponding to that. To handle 3 different exercises in the UI, I have used the pagination feature from the material UI.