Tiny Project VI: Mock Data Generator

How I designed and built a mock data generator extension for testing.

Photo by Markus Spiske on Unsplash

When working on design projects, I frequently use mock/dummy data. I’ve noticed that many developers I know also use mock data, often from Faker JS, for testing and development purposes.

This observation inspired me to build my own mock data generator. While there are numerous possibilities for this idea, I’m starting with a Chrome extension.

Whether you need personal identification information, professional details, addresses, financial information, device information, temporal data, miscellaneous items, or specific data types, this extension has you covered. Once installed, you can choose the category of data you want, specify the data type for each selected category, and determine the amount of data to generate. Clicking the generate button will produce the desired results, which can be copied for use in your projects.

In the future, I might decide to build a Figma plugin, an NPM package, or an API, though I can’t make any promises.

Design

I iteratively refined the design through multiple cycles of design and development, making changes as needed to achieve the desired outcome.

Mock Data Generator — Extension UI

Development

I built the extension using HTML, CSS, and JavaScript.

These are some code snippets that're making the extension work.

HTML

Drop-down for selecting categories.

            <label for="category">Category</label>
            <select id="category" name="category">
                <option value="personal">Personal Identification</option>
                <option value="professional">Professional Information</option>
                <option value="address">Address Information</option>
                <option value="financial">Financial Information</option>
                <option value="device">Device Information</option>
                <option value="temporal">Temporal Information</option>
                <option value="miscellaneous">Miscellaneous</option>
                <option value="dataTypes">Data Types</option>
            </select>

Dropdown for selecting data type.

 <label for="dataType">Data Type</label>
 <select id="dataType" name="dataType"></select>

Input for specifying the number of data items.

 <label for="quantity">Number of Items</label>
 <input type="number" id="quantity" name="quantity" min="1" max="100" value="1">

Button to generate data.

<button type="button" id="generateBtn">Generate Data</button>

CSS

I learned how to hide the default arrow-down icon inside a select element and change it to a custom SVG.

select {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 40px 10px 10px;
    /* Make space for the arrow */
    background-color: #FFFFFF;
    color: #0F172A;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="none" stroke="%230F172A" d="M1 1.5l1.5 1.5L4 1.5"/></svg>') no-repeat right 10px center;
    background-size: 10px 10px;
}

JavaScript

I’ve curated a custom mock data library containing different categories and their respective data types that become accessible once you install the Chrome extension.

const mockDataLibrary = {
    personal: {
        "First Name": []
        // Added more data types here
    }
    // Added more categories here
};

Reference to the mock data library.

    const dataTypes = mockDataLibrary;

Populate data types based on selected categories.

    categorySelect.addEventListener('change', function () {
        const selectedCategory = categorySelect.value;
        dataTypeSelect.innerHTML = '';
        Object.keys(dataTypes[selectedCategory]).forEach(function (item) {
            const option = document.createElement('option');
            option.value = item;
            option.textContent = item;
            dataTypeSelect.appendChild(option);
        });
    });

Event listener to generate mock data when the generate button is clicked.

  generateBtn.addEventListener('click', function () {...});

Display the generated data in the result container.

        generatedDataDiv.innerHTML = generatedData.join('<br>');
        resultContainer.style.display = 'block';

Copy data to the clipboard when the copy button is clicked.

copyBtn.addEventListener('click', function () {
   navigator.clipboard.writeText(generatedData.join('\n')).then(() => {
       alert('Data copied to clipboard');
   });
});

Installation

I submitted the extension for review, and it has been published publicly, so you can install Mock Data Generator today and add it to your Chrome browser.

Demo

I recorded a short video to show how the Mock Data Generator extension works.

Mock Data Generator — Demo

Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.