Creating a meaningful UI prototype is challenging without real API requests, which can help to identify issues application flow, performance, and design, enhancing both user experience and quality. Mockaroo lets you create advanced mock APIs and complex data schemas, enabling parallel development of UI and API, resulting in faster and improved application delivery.

The issue with a simple approach

When developing a front-end application, there is often a need to fetch data from APIs developed by colleagues or another team. However, synchronization issues may arise in both cases, such as when certain components are not yet ready, the infrastructure has not been deployed, the environment is not fully set up, etc.

In any of these cases, one common approach is to develop a class that mocks the HTTP calls and returns hard-coded data. However, this method has several drawbacks:

• The data is likely static, making it difficult to incorporate complex logic without additional effort.

• Generating large fake datasets can be time-consuming (or the same data will be repeated over and over).

• Modifying the structure or type of the data requires manual adjustments to the hard-coded collection.

To address these challenges, Mockaroo offers a solution. This free online service simplifies the creation of structured data and simulates an API that returns data. You can design complex and nested types, create enumerations, and most importantly, utilize randomization features.

A concrete example

Let's dive into the details with a concrete example. Imagine you're tasked with developing a web page to display a list of persons within a banking application. The interface will be basic: a paginated table, column filters, a search bar, basicly usual stuff. However, due to holidays, the backend team is currently understaffed, therefore no endpoint can be developed for a few weeks. Moreover, the infra team has to face technical issues, databases are down. Fortunately, with knowledge of Mockaroo, you can begin your development.

Let's implement a simple class for our HTTP calls:

class PersonService {
  constructor(private baseUrl: string) {}
  ...
  public getPersons(): Promise<Person[]> {
    return fetch(this.baseUrl)
      .then((x) => x.json() as Promise<Person[]>)
  }
  ...
}

And our Person model:

interface Person {
  id: string;
  firstname: string;
  lastname: string;
  birthday: Date;
  address: string;
  email: string;
  countryCode: string;
  timeZone: string;
  language: string;
  contractKind: "Foo" | "Bar" | "Baz";
  accounts: Account[];
}

interface Account {
  id: string;
  iban: string;
  currencyCode: string;
  amount: number;
}

We want to have a large dataset covering as many cases as possible to ensure all of our features are properly working. For instance, we may consider scenarios such as custom displays for individuals residing in New Zealand who speak Spanish and possess a minimum of 1234 NZD (sorry as you lay have noticed, I'm not really inspired, but you get the idea). Also, we want to test the pagination, as well as the search's performance (performed here in-memory for demo purposes), so we need more than a few entries.

Mockaroo to the rescue

That's where Mockaroo becomes handy, we can create our types using the predefined options and get realistic values:

For basic fields, we have access to a large range of realistic values. We can also specify a range for a date or a number, or indicates the possible values.

For contractKind we indicate we want one or two of the given values.

When working with nested objects or lists of objects, we define fields in a similar manner to what we did previously.

For each field, it's possible to specify whether the value can be null or not, as well as the probability of that occurrence. But the most noteworthy feature is the Formula. By clicking on the Sigma icon, a modal window will appear. Here you can input Ruby code to either define specific values or transform the default generated values. For example, you may choose to convert a field to uppercase, calculate a new value based on the original data, or use a random number. You can refer to the documentation, the community forum or the tutorials for more information and examples.

amount.to_s + " " + currencyCode

Returns the amount along with its currency for presentation

If you have recurrent logic for your fields, you can create your own Ruby functions and use them whenever you want. Check here for more details.

Now, if our product owner or client informs us that a Person do not have a timeZone, or requests the addition of the person's job and title on the same page, we can easily modify the schema accordingly to these changes.

We can now click on the preview button to have a look on the data generated, or download everything under the format selected. Also, let's save the schema so we can use it later.

What to do with this?

Create an API

Our initial objective was to simulate our backend by exposing our dataset through an endpoint accessible from our application.

Let's navigate to the Mock APIs tab, and click on the "Create a new mock API" button.

Within the left window, we can specify 2 things:

• The endpoint should use the "Persons" schema

• The endpoint should return 100 entries

You can save the API and then test it by clicking on the link indicated at the bottom of the page.

Export as file

As mentioned earlier, we can also export any number of entries under different formats, including document (CSV, JSON, Excel, XML, tab-delimited) or a script for inserting the entries into a database (SQL, CassandraDB, Firebase).

You can also use the document files to populate some databases like MongoDB (via Compass for instance), or overall whatever database/software accepting imports from one of the available formats.

Conclusion

We have seen that Mockaroo is a very useful tool for developers needing to simulate APIs and generate realistic data quickly. By offering extensive customization options and the ability to handle complex data structures, it allows you to focus on frontend development without waiting for backend readiness.

However, we should keep in mind this tool is not free, unlimited/advanced features are available through different pricing plans.