Ismail Kamil for Apidog

Posted on Dec 5 • Edited on Dec 7

How to Build Your Frontend Apps 10x Faster!

#webdev #tutorial #frontend #programming

One of the biggest challenges in frontend development is the waiting game. When the API is not yet ready, the frontend team is often left with no choice but to hard-code the response data into the UI. This is a major bottleneck that hinders frontend development efficiency.

However, there is now an extremely efficient solution that allows you to mock any API data in just 1 min and provide it to the frontend team as an API.

The best part is that -- the mocked data is dynamic and almost indistinguishable from the real data.

Let's start.

Get the Required JSON.
Use Apidog to Create an Endpoint with your JSON.
Save and Get the Mock URL. Done!

Step 1: Get the Required JSON

When preparing to mock an API, obtaining the necessary JSON data is crucial. This JSON data represents the structure of the response your frontend application expects from the API. There are several methods for acquiring this JSON data:

Collaboration with Backend Team: Engage in discussions with your backend colleagues to get a precise understanding of the required data structure.
API Documentation Exploration: Review any existing API documentation that details the endpoints and typical response formats you can anticipate.
Existing Sample Data: If the application being developed is an enhancement or revision, older versions or similar projects may have existing sample data that can be used as a reference.
Manual JSON Construction: When data is unpredictable or not yet modeled, you might manually draft a sample JSON template based on expected fields and types.

Example JSON

Let’s consider the following example JSON structure for our mock API:

{
    "id": 93189357,
    "firstName": "Richard",
    "familyName": "Mertz",
    "email": "Joel_Bergstrom64@yahoo.com",
    "phone": "(588) 534-9295",
    "streetAddress": "789 Noel Fall",
    "city": "East Olgastead",
    "state": "Missouri",
    "zipcode": "04493",
    "gender": "female",
    "birthday": "2010-01-31",
    "bio": "assist advocate  🦝",
    "userAgent": "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 5.2; Trident/6.0)"
}

This is a fictional user JSON containing several common fields.

Now just copy it. If you've already such a JSON, this step will take you no more than 10 seconds.

Step 2: Use Apidog to Create an Endpoint with Your JSON

Apidog is an efficient tool for API development and mocking. First, download it from Apidog's website and register an account.

Once that's done, click "create a new endpoint" within your project.

The only field you must fill in is the endpoint path—use something like /user/{id} for accessing mock data.

Next, scroll to the Response section and click on the "Generate from JSON etc." button.

Paste your JSON data from Step 1 and click OK. Apidog will automatically generate the response schema and example based on your JSON.

Finally, click Save to save the endpoint.

This whole process, excluding download and registration, only takes about 30 seconds.

Step 3: Get the Mock URL

After saving your endpoint in Apidog, you'll find a mock module within the endpoint details. This module provides you with a mock URL. Simply click on the mock URL to copy it.

Next, paste this URL into your browser.

Congratulations! You now have a working mock API!

It's not just a static response; every time you refresh the page, you'll notice that the content changes, simulating the behavior of a real API. This dynamic response feature is invaluable for testing and developing frontend applications in a realistic environment without waiting for the backend to be ready.

How it works

Apidog operates as a robust platform for API development and mocking by intelligently interpreting your input JSON data. Here's a closer look at its functionality:

JSON Parsing and Data Schema Generation:

When you paste your JSON into Apidog, it parses the structure to create a corresponding data schema, establishing an API specification. This schema defines the expected format and type of data for each property in the JSON.

Mock Engine:

Apidog includes an integrated mock engine, effectively functioning as a lightweight mock server that runs locally on your PC. This engine uses your API specification to dynamically generate mock data.

For dynamic responses, Apidog utilizes the names of your JSON properties to apply appropriate mock functions from faker.js. These mock functions are responsible for producing realistic, random data. Each browser refresh triggers the generation of new mock data, giving the illusion of interacting with a real API.

Static Mock

If you prefer consistent outputs on every request, you have the option to switch the mock data from dynamic to static effortlessly:

During the JSON parsing process, Apidog saves the data as a response example.
To make use of this static option, go to Settings, navigate to Feature Settings, and access Mock Settings.
Change the default mock type to "Response example first." By doing this, the mock API will consistently return the saved response example, making your test data stable and predictable.

Custom Mock

If the automatically generated mock output for a specific property doesn't meet your requirements, Apidog allows you to customize this property's mock behavior easily.

Navigate to the Response Schema section for the relevant endpoint.
Locate the property whose mock needs adjustment. In the mock field of this property, choose a suitable function that aligns with your desired output.

Cloud Mock

The mock API we've discussed so far is hosted locally. However, if you need to share it with others or give access outside your local environment, Apidog provides a cloud mock feature.

To enable this feature, Go to Settings, navigate to Feature Settings, and access Mock Settings. Toggle on the Cloud Mock option.

Once enabled, your API will be accessible from the cloud. Simply copy the cloud mock URL provided and open it in a browser to access it. This feature makes it easy to share your mock API with team members, stakeholders, or testers who need to access it remotely.

For example, try visiting this cloud mock address to see it in action:
https://mock.apidog.com/m1/644296-613644-default/user/1