Create Mock APIs in 10 Minutes with ChatGPT and json‑server

This article, translated from "Rapid Mock API creation with ChatGPT and json-server", introduces how to quickly implement mock APIs using ChatGPT and json-server.

As a front‑end developer, you often need mock data to build prototypes quickly. Manually creating JSON files is time‑consuming, and reading from files isn’t how real applications operate; using an API is a more elegant solution.

Challenges of mock data

Generating sample data is not easy. Defining a schema for entities and creating placeholder data involves decisions such as whether product names should be descriptive or catchy, how many characters they should have, and whether they should be capitalized.

For developers, naming variables is already hard, let alone constructing an entire dataset. Moreover, data sets need to be updated as the application evolves, making the process tedious and repetitive.

Front‑end developers also face challenges when creating API routes, especially for advanced features like sorting, filtering, and pagination. Implementing POST, PATCH, and DELETE requests can be daunting for those without back‑end experience, and a well‑designed API requires solid understanding of RESTful principles.

Solution: ChatGPT and json-server

Fortunately, a combination of ChatGPT and json-server can solve both problems. ChatGPT helps generate realistic sample data, while json-server creates a zero‑code REST API.

Generating sample data with ChatGPT

ChatGPT can generate sample data. Using an e‑commerce product as an example, we show how to prompt ChatGPT to create a schema for the entity.

By adjusting the prompt, you can add or remove fields.

When satisfied with the fields, ask ChatGPT to output JSON.

{
  "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
    }
  ]
}

Implementing API routes with json-server

After obtaining sample data, create a db.json file in the project root and paste the JSON.

Install json-server as a dev dependency: npm i json-server -D 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 starts a service at http://localhost:4000 with full CRUD routes.

Routes

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

Filtering

Pass field names as query parameters; deep properties are supported.

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

Pagination

Use _page and optional _limit to paginate results.

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

Sorting

Add _sort and _order (default ascending). GET /products?_sort=price&_order=desc Operators

Use _gte or _lte for range queries, _ne to exclude, and _like for pattern matching.

GET /products?price_gte=1000&price_lte=2000
GET /products?id_ne=12345
GET /products?model_like=iPhone

Full‑text search

GET /products?q=laptop

Conclusion

Combining ChatGPT and json-server enables front‑end developers to generate mock data effortlessly and expose it via a zero‑code RESTful API. ChatGPT simplifies data‑set creation, while json-server provides instant API endpoints, allowing developers to focus on rapid prototype building without worrying about data generation or API implementation.