fake-api

Fake REST API endpoint for frontend testing

You're building a frontend against a backend that doesn't exist yet. JSONPlaceholder is fine for /users/1 demos. For your actual app, you need a fake API that returns YOUR shapes. Here's the 5-minute setup.

Jackson

19 Sep 2026 — 2 min read

Backend isn't ready. Frontend can't wait. The classic solution — JSONPlaceholder — is fine for the canonical /users/1 demo but useless when your shapes don't match the placeholder's. Hardcoding responses in the frontend works but couples test data to UI code. Running your own Express stub works but means picking a hosting provider and dealing with CORS.

A public mock-API endpoint sits in the middle: live HTTPS URL, your exact response shapes, no deploy.

Setup (~5 minutes)

1. Get a mock URL

Sign up at requestbin.net (FREE, no credit card). Click Mock APIs → New Mock API. You get a URL like https://abc12xyz.rbmock.dev.

2. Add rules for each endpoint your frontend calls

Example: build a fake product catalog API.

Rule 1 — list products:

Method: GET
Path: /products
Status: 200
Headers: Content-Type: application/json
Body:

[
  { "id": 1, "name": "Widget", "price": 9.99, "in_stock": true },
  { "id": 2, "name": "Sprocket", "price": 14.99, "in_stock": false }
]

Rule 2 — get single product:

Method: GET
Path: /products/1
Status: 200
Body:

{ "id": 1, "name": "Widget", "price": 9.99, "in_stock": true, "description": "A widget that does widget things." }

Rule 3 — create product (simulate success):

Method: POST
Path: /products
Status: 201
Body: { "id": 999, "created": true }

Rule 4 — error case (test your error handling):

Method: GET
Path: /products/999
Status: 404
Body: { "error": "not found" }

3. Deploy

Click Deploy. All rules live.

4. Point your frontend at it

// next.config.js or .env.local
NEXT_PUBLIC_API_BASE = 'https://abc12xyz.rbmock.dev'

// in your fetch code
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/products`);

What this gets you vs alternatives

Approach	Pros	Cons
Hardcoded responses in frontend	Zero setup	Couples test data to UI; hard to test loading/error states
JSONPlaceholder / DummyJSON	Free, public	Fixed shapes, not yours
MSW (Mock Service Worker)	Runs locally, no network	Setup overhead; each dev needs to install + maintain
Express stub on Vercel/Render	Real backend code	30+ min setup; bills against your hosting allowance
RequestBin Mock API	5 min, public URL, no deploy, no CORS issues (we set it permissively)	Static responses (no handler code); 100KB body cap

CORS is handled

RequestBin's mock server sets permissive CORS headers by default: Access-Control-Allow-Origin: *. Your frontend running on localhost:3000 can call the mock URL directly without a proxy.

Verifying your frontend actually hits the mock

This is where RequestBin's hybrid bin-+-mock design pays off. Every request that hits the mock URL is captured in the Requests tab of the mock's detail page. You can see: