During the development cycle of any project, as a frontend developer, we will need to work with APIs and integrate them into our application. We will need to define and agree upon the JSON contracts that we expect from our APIs. In this section, we will learn about the various options we have to generate the APIs that we can use while the backend developers are still working on developing actual APIs. When we have fake APIs available, developers can work independently. 

There are various tools and libraries (available for free) that we can use to work with fake APIs. We will be using the JSON server library to serve our APIs. So, let's begin by taking the following steps:

1. To install the json-server library, run the following command in the command-line interface:

      npm i json-server --save

When the command has run successfully, you should see the following output:

2. Now that we have installed our json-server library, it's time to create our APIs and JSON structure. In our project directory, we will create a new folder called APIs and create a new file named data.json, which will hold our JSON data. Take a look at the folder structure once you have created the folder and files:

3. Since we have created two JSON files, it's time to add some JSON data to the files for listings, as well as users. Open the listings.json file by adding the following data to it:

      {
        "listings": [
          { "id": 1, "title": "Sunset in New York", "price":"190", 
             "status": "Active" },
          { "id": 2, "title": "Dawn at Miami", "price":"150", 
              "status": "Active" },
          { "id": 3, "title": "Evening in California","price":"70", 
             "status": "Inactive" }
        ],
        "users": [
          { "id": 1, "username": "andrew", 
            "userEmail": "[email protected]" },
          { "id": 2, "username": "stacy", 
            "userEmail": "[email protected]" },
          { "id": 3, "username": "linda", 
            "userEmail": "[email protected]" },
          { "id": 4, "username": "shane", 
            "userEmail": "[email protected]" }
        ],
        "cities": [ 
            { "id":1, "name": "New York" },
            { "id":1, "name": "California" },
            { "id":1, "name": "Miami" }
        ]
       }

We are creating dummy data of JSON arrays for listings, users, and cities. Technically, in a real application scenario, this data would be retrieved from the database at runtime.

4. To start serving the fake APIs with data, we need to start and initialize the JSON file. We will navigate to the API folder where we have created our data.json file and run the following command:

      json-server --watch data.json

5. When we have run the command successfully, we should see the following output:

Notice that, under Resources, we can see the fake APIs that are listed; that is, http://localhost:3000/listings.

6. Try launching the URL in the browser. You should see the JSON data displayed for listings, users, and cities. The output is displayed in the following screenshot:

Awesome! We can now use these APIs in our HTTP calls. We will have to wait for just one more section before we jump right into learning about HTTP functionality. For our friends who are full stack developers and know how to set up databases, the next section is certainly for you. We will learn about setting up our Firestore database, which will store our data. Later, we will use this to implement our application.