Defining the data fetch requirement

First, let’s define the requirement we are going to implement in a reactive way. We want to display the list of recipes retrieved from the mocked backend on the home page, progressively building the user story detailed in the View one – the landing page section of Chapter 2, Walking through Our Application:

Figure 3.1 – The landing page view

To do this, we need to fetch the list of recipes beforehand to display it to the user as cards, right? So, the list of recipes represents the first data that we need to request, which is available in our recipes-book-api server through the following endpoint:

GET /api/recipes

Please don’t forget to start the server as detailed in the Technical requirements section. Once the server is started, you can check the result of the fetch API at http://localhost:8081/api/recipes.

In the following sections, we will see how we can implement the fetching data...