Introducing Visual Copilot 2.0: Make Figma designs real

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

AI

Rapid Mock API creation with ChatGPT and json-server

May 3, 2023

Written By Vishwas Gopinath

As front-end developers, we often require mock data to swiftly build prototypes. We could create a JSON file with gibberish data but creating fake data can be time-consuming and ineffective. Also, reading data from a file is not how real apps operate. In this blog post, we'll discuss how you can create mock APIs for UI prototyping in 10 minutes. That’s right, 10 minutes!

The challenges of mock data generation

Generating sample data is no easy feat. Defining a schema for an entity and generating placeholder data can be a daunting task. For instance, coming up with a list of product names for an e-commerce website can be challenging. Should the product names be descriptive or catchy? How many characters should they have? Should they be in uppercase or lowercase?

If we struggle to come up with a single variable name, I’m sure we will struggle to come up with an entire dataset. Moreover, generating a dataset is not a one-time task. As the application evolves, the dataset will have to be updated and adjusted, which can be a tedious process.

Creating an API endpoint as a front-end developer can be challenging as well, and advanced features like sorting, filtering, and pagination necessitate further effort. Proper server-side implementation is required to handle POST, PATCH, and DELETE requests.

This can be daunting for front-end developers who have limited experience in backend development. It's essential to have a solid understanding of RESTful API principles to create a well-designed API endpoint.

The Solution: ChatGPT and json-server

Fortunately, there is a solution to both of these challenges: ChatGPT and json-server. ChatGPT is a powerful tool that can help generate sample data with ease. json-server is a powerful library that can be used to create a fake REST API with zero coding. Let’s dive into the details.

Generating sample data using ChatGPT

One of the best use cases for ChatGPT is the generation of sample data. Here's how you can generate a schema for an entity, like a product on an e-commerce site.

Prompt: Give me a list of 5 fields for electronic products on an e-commerce site.

ChatGPT Response:
Sure, here are five fields for electronic products that you could use on an e-commerce site:
1. Category: This field could be used to group electronic products into different categories, such as smartphones, laptops, cameras, gaming devices, and home appliances.
2. Brand: This field could be used to identify the brand of the electronic product, such as Apple, Samsung, HP, Canon, and LG.
3. Model: This field could be used to identify the specific model of the electronic product, such as iPhone 12, Galaxy S21, MacBook Pro, EOS Rebel T7i, and OLED65C1.
4. Features: This field could be used to list the key features of the electronic product, such as display size, camera resolution, battery life, storage capacity, and connectivity options.
5. Price: This field could be used to display the price of the electronic product, either as a fixed price or a price range depending on the options selected.

You can ask ChatGPT to add or remove a few fields by modifying the prompt accordingly.

Prompt: Add an "id" field that will be unique to each productChatGPT.

ChatGPT response: Sure, here's an updated list of fields that includes an "id" field for each electronic product:
1. Id: This field could be used to assign a unique identifier to each electronic product, such as a product code or SKU (stock-keeping unit) number.
2. Category: This field could be used to group electronic products into different categories, such as smartphones, laptops, cameras, gaming devices, and home appliances.
3. Brand: This field could be used to identify the brand of the electronic product, such as Apple, Samsung, HP, Canon, and LG.
4. Model: This field could be used to identify the specific model of the electronic product, such as iPhone 12, Galaxy S21, MacBook Pro, EOS Rebel T7i, and OLED65C1.
5. Features: This field could be used to list the key features of the electronic product, such as display size, camera resolution, battery life, storage capacity, and connectivity options.
6. Price: This field could be used to display the price of the electronic product, either as a fixed price or a price range depending on the options selected.Generate a sample JSON of 5 such products with realistic values.

Once you are happy with the fields, you can ask ChatGPT to generate JSON.

Prompt: Generate a sample JSON of 5 such products with realistic values.
{
  "products": [
    {
      "id": "12345",
      "category": "Smartphones",
      "brand": "Apple",
      "model": "iPhone 13 Pro",
      "features": {
        "display_size": "6.1 inches",
        "camera_resolution": "12 MP",
        "battery_life": "22 hours",
        "storage_capacity": "256 GB",
        "connectivity": "5G"
      },
      "price": 1099
    },
    {
      "id": "67890",
      "category": "Laptops",
      "brand": "Dell",
      "model": "XPS 13",
      "features": {
        "display_size": "13.4 inches",
        "processor": "Intel Core i7",
        "memory": "16 GB",
        "storage_capacity": "512 GB SSD",
        "graphics": "Intel Iris Xe"
      },
      "price": 1399
    },
    {
      "id": "13579",
      "category": "Cameras",
      "brand": "Sony",
      "model": "Alpha a7 III",
      "features": {
        "sensor_resolution": "24.2 MP",
        "image_stabilization": "5-axis",
        "video_resolution": "4K",
        "viewfinder": "Electronic",
        "connectivity": "Wi-Fi, NFC, Bluetooth"
      },
      "price": 1999
    },
    {
      "id": "24680",
      "category": "Gaming Devices",
      "brand": "Nintendo",
      "model": "Switch OLED",
      "features": {
        "display_size": "7 inches OLED",
        "resolution": "720p",
        "battery_life": "Up to 9 hours",
        "storage_capacity": "64 GB",
        "connectivity": "Wi-Fi, Bluetooth"
      },
      "price": 349
    },
    {
      "id": "97531",
      "category": "Home Appliances",
      "brand": "Samsung",
      "model": "WF45K6500AV",
      "features": {
        "load_capacity": "4.5 cu. ft.",
        "wash_cycles": "14",
        "energy_star_certified": true,
        "steam_wash": true,
        "smart_connectivity": "Wi-Fi"
      },
      "price": 1099
    }
  ]
}

Setting up API endpoints with json-server

After obtaining the sample data, json-server can be used to create API endpoints. Start by creating a db.json file in the project root and pasting the sample data from ChatGPT.

Next, install the json-server npm package as a dev dependency:

npm i json-server -D

Finally, add an npm script to run json-server with the sample data:

"serve-json": "json-server --watch db.json --port 4000"

Running npm run serve-json will create a server on http://localhost:4000 with all the necessary endpoints. Here’s how you can work with the various endpoints:

GET    /products
GET    /products/:id
POST   /products
PUT    /products/:id
PATCH  /products/:id
DELETE /products/:id

Filter

Pass the field name as a query parameter. Use . to access deep properties.

GET /products?category=laptops&brand=Dell
GET /products?id=12345
GET /comments?features.resolution=720p

Paginate

Use _page and optionally _limit to paginate returned data. (Our data has only one page).

GET /products?_page=7
GET /products?_page=7&_limit=20

10 items are returned by default

Sort

Add _sort and _order (ascending order by default).

GET /products?_sort=price&_order=desc

Works exactly as Array.slice (i.e. _start is inclusive and _end exclusive).

Operators

Add _gte or _lte for getting a range

GET /products?price_gte=1000&price_lte=2000

Add _ne to exclude a value

GET /products?id_ne=12345

Add _like to filter (RegExp supported)

GET /products?model_like=iPhone

Full-text search

Add q

GET /products?q=laptop

Conclusion

ChatGPT and json-server are powerful tools that can help frontend developers generate mock data and serve it over a RESTful API with ease. With ChatGPT, generating a dataset becomes a breeze, and with json-server, creating a fake RESTful API requires zero coding. Together, they offer a simple yet effective solution for rapid mock API creation and front-end developers can focus on building prototypes quickly and efficiently, without worrying about data generation and API implementation.

Introducing Visual Copilot: convert Figma designs to high quality code in a single click.

Try Visual CopilotGet a demo

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual CopilotGet a demo
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI12 MIN
Why AI Is Making Dev Skills More Valuable, Not Less
December 3, 2024
ai8 MIN
The Big Lie AI Vendors Keep Telling You
November 27, 2024
AI8 MIN
Generate Figma Designs with AI
November 25, 2024