Mock API service for Frontend developer

Aizu

3 min readOct 15, 2023

Well, I’ve created a mock API service, which (hopefully) will help the front end developer.

I’ve furnish everything on this page: https://mockapi.aizu.my

In this article, I’ll explain how to use, and simple use-case for this service.

The endpoint: https://mockapi.aizu.my

This is the endpoint to do the REST operation which can call various of function for CRUD database operation.

Create a record
Read single / all record(s)
Update a record
Delete a record

Each action have it is own path.

Example, if we can to create a record using axios, we use code below;

axios.post('https://mockapi.aizu.my/data7190/post',
  { "name":"Adam", "age":"20", "role":"PHP Developer" }
)

As you can see, there is “data7190” path. That is our namespace. It is a collections of our data.

Example below, we wants to add one more record to the same namespace (data7190);

axios.post('https://mockapi.aizu.my/data7190/post',
  { "name":"Carly", "age":"18", "role":"Java Developer" }
)

and add one more;

axios.post('https://mockapi.aizu.my/data7190/post',
  { "name":"Zack", "age":"23", "role":"Project Manager" }
)

So, we’ve added 3 records in our “data7190” collection.

Alright, first part is done.

Now we want to fetch back all the records for our namespace, we use GET to the endpoint: https://mockapi.aizu.my/data7190/get (or you can simply open the URL to view the data)

The return data will show below;

{
  "status": "OK",
  "data": [
    {
      "id": 1,
      "name": "Adam",
      "age": "20",
      "role": "PHP Developer"
    },
    {
      "id": 2,
      "name": "Carly",
      "age": "18",
      "role": "Java Developer"
    },
    {
      "id": 3,
      "name": "Zack",
      "age": "23",
      "role": "Project Manager"
    }
  ]
}

That’s it! We’ve completed the Create & Read part.

As you can see from the returned payload above, there is “id” assigned to each record. The “id” is important for use to update or delete the record later on.

Say example, we would like to update the existing data. (i.e: Carly has been promoted to Senior Java Developer)

axios.post('https://mockapi.aizu.my/data7190/post/2',
  { "name":"Carly", "age":"18", "role":"Senior Java Developer" }
)

You can see the endpoint has the Carly’s ID (which is number 2). To view again the whole record, check again on the GET URL: https://mockapi.aizu.my/data7190/get

{
  "status": "OK",
  "data": [
    {
      "id": 1,
      "name": "Adam",
      "age": "20",
      "role": "PHP Developer"
    },
    {
      "id": 2,
      "name": "Carly",
      "age": "18",
      "role": "Senior Java Developer"
    },
    {
      "id": 3,
      "name": "Zack",
      "age": "23",
      "role": "Project Manager"
    }
  ]
}

We can see, Carly’s Role has been updated.

Let’s try to remove record (i.e: Zack has leave company)

axios.delete('https://mockapi.aizu.my/data7190/post/3')

That’s it. Zack’s record will be remove. Check again the overall records for our namespace “data7190”: https://mockapi.aizu.my/data7190/get

{
  "status": "OK",
  "data": [
    {
      "id": 1,
      "name": "Adam",
      "age": "20",
      "role": "PHP Developer"
    },
    {
      "id": 2,
      "name": "Carly",
      "age": "18",
      "role": "Senior Java Developer"
    }
  ]
}

We can see, we only have 2 records now.

So, here it go guys. Of course, instead of axios, you can use fetch, cURL or any other HTTP service to get/post the data from this service.

Check out my page for the cURL example; https://mockapi.aizu.my

Thanks for reading!

Mock API service for Frontend developer

Written by Aizu