Whenever a team plans to build a feature, (If the team has dedicated Backend and Frontend developers), the frontend and backend tasks will be assigned simultaneously.

After confirming the use cases and the API Designs, It will be cool if we (Frontend Developers) have a mock API ready so that we can start building our features, and then it will require 0 to minimal effort when connecting the backend once it is ready. So knowing the methods and tools to create mock APIs will help you build apps faster.

Random Data Generators

In order to create mock APIs, we need some ways to generate mock data. These data will help us a lot in the future as well apart from the initial development. Like **testing, component documentation, **etc. So to create mock APIs we can either use

1. Mockaroo
2. FakerJS

Mockaroo

Mockaroo Page with a simple user schema
Create fields with the name and their types. Choose the number of rows and change the format to JSON (Or any format in which your API exists). Download it and import them for usage. The free version is enough for most cases.

You can even create and save schemas so that you can make use of those schemas to get data later.

Faker JS

FakerJS code for generating names and emails
Obtain values with the utility functions they provide and create datasets based on your API design. You can use the utility functions provided by the library to create random data.
Type of utility list provided by the FakerJS Docs
So with the above tools, we can generate the data we needed. So you can use these as datasets for the Mock APIs that you will be creating.

Create Mock APIs

The rest of the blog explains how to create Mock APIs. There are multiple methods mentioned here to create Mock APIs. You can choose a method that suits you based on your requirement.

1. Next.js API (Ignore this if you aren't using Next.JS)
2. JSON Server
3. Mirage JS

Next.js API

Next.js is a full-stack framework on top of React. So if you are using Next.js you know we can create API Routes. No new setup is required. We'll just make use of it for mock API.

For eg: Just create a file under pages/api/candidate.js and send the data you created. API Endpoint: /api/candidate

json-server

This is the most widely used approach for creating Mock APIs. It has 63K Github Stars and around 200k npm weekly downloads. Getting started with json-server is very easy. You can refer the docs.
A screenshot from the docs describes creating a mock API

Mirage JS

If you are building an enterprise-level product with complex app logic then Mirage JS would be the perfect fit for you.

It takes some time for setting up Mirage. Once done, It’ll provide a perfect developer experience. As you can use Mirage to create APIs for both new and existing projects allowing existing APIs to pass through.

These were the methods that I use when creating mock APIs for Frontend Development. If you have some better ideas please let us know. 😃

For more blogs like these, you can visit my blog sivanesh.dev.