Demo Application

Look at how to use TheMealDB and TheCocktailDB APIs in an actual application.

We'll cover the following

Let's look at a React application that uses some of the endpoints that we discussed. We'll also use the following endpoints of TheMealDB and TheCocktailDB API that provide us with the following information:

  • A list of available categories of meals and cocktails.

  • A list of meals and cocktails that fall into a specific category.

  • Recipes for meals and cocktails using their IDs.

  • Recipes for random meals and cocktails.

Application workflow

Let's look at the application workflow from the user's point of view:

  • When the application starts, we land on the homepage that displays the available categories of meals and cocktails and a navbar.

  • By clicking on any of these categories, we get the items that fall in that category. Once we're on that page, we can get the recipe for a specific meal or cocktail by clicking on it.

  • The "I'm Feeling Hungry!" logo on the navbar takes us to a page which shows recipes for a random meal and cocktail.

  • The "Prepare Food" logo on the navbar redirects us to a page where we can select the food items from drop-down menus and see their recipes.

Demo application

The widget below contains the code for our application. Click the "Run" button to see the application in action.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Recipes App</title>
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
Recipe app

Code explanation

For our React application, the index.js file renders the App component (App.js) as the root component.

Note: We've created and used a custom hook, useFetch, to fetch the data from any API endpoint.

Let's look at the components of our application:

  • Home: This component renders the homepage of the application.

  • MealCategories and DrinkCategories: These components render the available categories of meals and cocktails, respectively, on the homepage.

  • MealsList and DrinksList: These components show the drinks and meals that fall under the chosen category, respectively.

  • Meals and Drinks: These components show the recipe for the selected meal and cocktail, respectively. They use the API-assigned IDs to fetch the data of the specific food item.

  • PrepareFood: This component offers the choice to obtain both meal and cocktail recipes. The user must first choose the types of meals and drinks they want to see, after which lists of the food options in that category will be generated. The recipe for any one of these products can be fetched by choosing it from the list of options.

  • RandomFood, RandomMeal, and RandomCocktail: The RandomFood component renders recipes for a random meal and a random cocktail. It uses the RandomMeal and RandomCocktail to do so. The first one provides the recipe for a random meal, whereas the latter provides the recipe for a random cocktail.