Forem: JohnMith

I Waited 5 Days for a Backend API. So I Built My Own Mock Server.

JohnMith — Tue, 14 Apr 2026 14:41:57 +0000

6 months ago, I was working as a frontend developer on an e-commerce project.

Sprint planning was done. I got assigned to build the product listing page. PM said: "Backend API will be ready this week."

That week passed. No API.

"Just 2 more days." -- 2 days turned into a week.

While waiting, I did what every frontend dev has done at some point:

const products = [
  { id: 1, name: "Test Product", price: 99 },
  { id: 2, name: "Test Product 2", price: 199 },
];

Hardcoded data. Built the UI knowing I'd have to rewrite everything once the real API arrived. But what else could I do? The sprint deadline wasn't going to wait.

That's when I thought: "What if there was a tool that could create a real API in seconds -- one I could call with fetch(), and when the backend is ready, I just swap the URL?"

So I built SnapMock.

What is SnapMock?

The idea is simple:

Create a project, add an endpoint like GET /products
Paste your expected response JSON
Get a live URL, call it with fetch() like a real API

When the real backend is ready -- swap the URL -- frontend code stays the same.

But static data wasn't enough. Testing UI with the same "Test User" 100 times is useless.

So I added Dynamic Data -- write {{$fullName}} in your response, and every API call returns a different name. {{$email}} returns a different email. {{$avatar}} returns a different image. Test your UI with diverse, realistic data instead of staring at "John Doe" all day.

Then I kept going:

AI Generator

Type "a list of 10 products with name, price, image, and rating" -- AI generates the full endpoint config. Too lazy to write JSON? Let AI do it.

Conditional Rules (Mock Rules)

One endpoint, multiple responses based on conditions. Send a token -- get 200. No token -- get 401. Query ?error=true -- get 500. No need to create 5 separate endpoints.

Chaos Mode

Turn it on and your API randomly returns 500, 503, timeouts... See if your frontend actually handles errors gracefully. My QA team's favorite feature .

Stateful CRUD

Create a resource called "users" and you automatically get GET, POST, PUT, DELETE. Add a user, delete a user -- data persists. Like having a mini backend.

Import from Anywhere

Paste a Swagger/OpenAPI spec -- auto-generate all endpoints
Import a Postman Collection -- instant mock API
Paste a real API URL -- SnapMock proxies it and creates a mock from the live response

How I Use It Every Day

Here's my actual workflow now:

// During development -- use SnapMock
const API_BASE = 'https://snapmock.net/api/PROJECT_ID';

useEffect(() => {
  fetch(`${API_BASE}/products`, {
    headers: { 'x-snapmock-key': 'YOUR_KEY' }
  })
    .then(res => res.json())
    .then(setProducts);
}, []);

// When backend is ready -- just change the URL
// const API_BASE = 'https://real-api.com';

No more hardcoding. No more waiting. No more rewriting code.

Free to Use

Plan	Price	Requests/day	Projects
Free	$0	1,000	5
Pro	$9/mo	50,000	10
Ultra	$29/mo	500,000	Unlimited

The free plan includes Dynamic Data, Conditional Rules, Sequential Responses, Chaos Mode, and Stateful CRUD. More than enough for most development workflows.

Try It

snapmock.net -- sign up free, create your first mock API in 30 seconds.

If you've ever been blocked by a backend that "will be ready next week," give it a try.

Questions? Drop a comment below -- I read every one!

I Got Tired of Hardcoding Fake Data. So I Built a Mock API That Generates It Automatically.

JohnMith — Sun, 12 Apr 2026 13:23:55 +0000

It was a Tuesday morning. New sprint. My task: build the product listing page.

Simple enough. Except the backend team told me the /products API would be "ready by end of week."

End of week came and went.

So I did what every frontend dev does in this situation.
When the real API finally came in - two weeks later - I spent another day ripping out all the hardcoded stuff.

There had to be a better way.

The Problem With Static Fake Data

Hardcoded mock data has a hidden cost most developers don't think about until it bites them:

1. It masks real UI bugs.

If your test user is always "John Doe" with a price of "$9.99", you'll never catch truncation issues, layout overflow, or currency formatting bugs. Real users have names like "Maria Martinez-Gonzalez" and prices like "$1,299.00".

2. It's not shareable.

Your local JSON file doesn't help your QA teammate on a different machine. Or your designer reviewing the feature. Or the Postman collection your backend dev wants to test against.

3. It couples test data to your codebase.

When requirements change, you're updating mock data in five places instead of one.

Enter Faker.js

Faker.js is a JavaScript library that generates realistic fake data on demand. Every call returns different data - run it 100 times, get 100 different users, all realistic, all structurally consistent.

This is great for local development and unit tests. But it still lives in your JavaScript code.

What if the API itself generated fresh data on every request?

The Idea That Changed How I Work

I started wondering: what if I could write a mock API endpoint with placeholders and the server would resolve them with Faker.js on every single request?

No code changes. Just configure once, get dynamic data forever.

That's exactly what I built.

SnapMock: Mock APIs With Built-In Faker Tags

SnapMock (https://snapmock.net) is the mock API platform I built to solve this problem. You create endpoints in a dashboard, define your response body with {{$tag}} placeholders, and every request gets fresh Faker-powered data.

Same URL. Different data every time. Zero backend code.

When your real API is ready, change one line - the URL - and remove the header. The rest of your frontend stays exactly the same.

What Else SnapMock Does

Conditional rules - same endpoint, different response based on headers, query params, or body
Sequential responses - return responses in order, great for pagination testing
Chaos mode - randomly inject errors and latency to stress-test your frontend
Stateful CRUD - GET/POST/PUT/DELETE with persistent state, zero backend code
AI generation - describe in plain English, get a full endpoint config with Faker tags
OpenAPI Import - paste a Swagger spec, import all endpoints at once

Try It

If you've ever sat around hardcoding fake JSON while waiting for a backend API - SnapMock is for you.

Free tier: 5 projects, 1,000 requests/day. No credit card. No install.

Try it at snapmock.net

P.S. - The backend API I was waiting for that Tuesday? It shipped three weeks late, returned slightly different field names than agreed, and broke two of my components anyway. Some things never change.

I hardcoded it.

Fine for day one. By day four, I was maintaining three different fake datasets across five components, none of them matching each other, all named some variation of mockData, fakeProducts, tempItems.

When the real API finally came in

I Built a Free Mock API Platform Because I Was Tired of Waiting for Backend" published: true

JohnMith — Thu, 09 Apr 2026 12:57:23 +0000

SnapMock — create mock APIs in 30 seconds with dynamic data, chaos testing, AI generation, and stateful CRUD. No install needed."
tags: webdev, javascript, react, api

Every frontend developer knows this pain:

Sprint starts. You're assigned to build the product listing page. Designs are ready. You open your editor, crack your knuckles, and...

The API isn't ready yet.

Your options:

Wait for the backend team (and delay the sprint)
Hardcode dummy data (and remember to clean it up... right?)
Set up json-server locally (and it works only on your machine)

I've been through this cycle too many times. So I built SnapMock — an online mock API platform where you create endpoints in 30 seconds and start building immediately.

No installation. No deployment. No backend code.

Quick Demo: Mock API in 30 Seconds

Step 1: Create a project on snapmock.net

Step 2: Add an endpoint

Method: GET
Path:   /api/products
Status: 200

Response body:

{
  "products": [
    { "id": 1, "name": "iPhone 16", "price": 999 },
    { "id": 2, "name": "MacBook Pro", "price": 2499 },
    { "id": 3, "name": "AirPods Pro", "price": 249 }
  ]
}

Step 3: Call your API

curl -H "x-snapmock-key: YOUR_API_KEY" \
  [https://snapmock.net/api/YOUR_PROJECT_ID/products](https://snapmock.net/api/YOUR_PROJECT_ID/products)

Done. Your frontend can now fetch() real data while backend works in parallel.

Features That Make SnapMock Different

Dynamic Data (Faker.js)

Static JSON gets old fast. SnapMock lets you use dynamic tags:

{
  "id": "{{$uuid}}",
  "name": "{{$fullName}}",
  "email": "{{$email}}",
  "avatar": "{{$avatar}}",
  "company": "{{$company}}",
  "bio": "{{$lorem}}"
}

Every API call returns different, realistic data. Your UI gets tested with diverse inputs automatically — no more "John Doe" everywhere.

Conditional Rules

Return different responses based on request data:

Condition	Response
Header `x-role` = `"admin"`	Full product list with admin fields
Header `x-role` = `"user"`	Limited product list
Query `?page=2`	Second page of results
Body contains `{"error": true}`	400 Bad Request

Rules are evaluated in order — first match wins. This lets you simulate complex API behaviors without writing any backend logic.

Chaos Engineering

This is my favorite feature, and no other mock tool has it.

Enable Chaos Mode on any project and configure:

Error injection: Random 500, 503, 404 responses
Latency spikes: Random delays (100ms to 5000ms)
Configurable failure rate: 10%, 30%, 50% — you control the chaos

Why? Because your app works great when everything returns 200. But production isn't that kind. Test your error boundaries, retry logic, and loading states before users hit them.

AI-Powered Generation

Don't want to write JSON by hand? Just describe what you need:

"A list of 10 blog posts with id, title, author, publishedAt, tags array, and a 200-word excerpt"

SnapMock uses Gemini AI to generate a realistic JSON response instantly. Edit it, save it, call it.

Stateful CRUD

Create a single "stateful" endpoint and SnapMock auto-manages full CRUD operations:

GET /users → Returns all resources
POST /users → Creates a new resource
GET /users/:id → Returns one resource
PUT /users/:id → Updates a resource
DELETE /users/:id → Deletes a resource

The state persists across requests (stored in Firebase Realtime Database), so your frontend can test real create → read → update → delete flows.

Like having a real database — without having a database.

Response Sequences

Need your API to change behavior over time?

Call 1 → Returns {"status": "pending"}
Call 2 → Returns {"status": "processing"}
Call 3 → Returns {"status": "completed"}
Call 4 → Loops back to call 1

Perfect for testing order status flows, payment processing, or any workflow that transitions through states.

Team Collaboration

Invite team members to your project with role-based access:

Owner: Full control
Editor: Create and edit endpoints
Viewer: Read-only access

Everyone shares the same project and API key. No more "hey can you send me that mock JSON?" messages.

How It Compares

Feature	SnapMock	json-server	Mockoon	Postman Mock
Online (no install)	Yes	No	No	Yes
Dynamic data (Faker.js)	Yes	No	Yes	No
AI generation	Yes	No	No	No
Conditional rules	Yes	No	Yes	No
Chaos engineering	Yes	No	No	No
Stateful CRUD	Yes	Yes	No	No
Response sequences	Yes	No	Yes	No
Team collaboration	Yes	No	No	Yes
Free tier	1,000 req/day	Local only	Local only	1,000/month

Using with React

// hooks/useProducts.ts
import { useState, useEffect } from 'react';

const API_BASE = '[https://snapmock.net/api/YOUR_PROJECT_ID](https://snapmock.net/api/YOUR_PROJECT_ID)';
const API_KEY = 'YOUR_API_KEY';

export function useProducts() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API_BASE}/products`, {
      headers: { 'x-snapmock-key': API_KEY }
    })
      .then(res => res.json())
      .then(data => {
        setProducts(data.products);
        setLoading(false);
      });
  }, []);

  return { products, loading };
}

When the real backend is ready, just swap the API_BASE URL and remove the x-snapmock-key header. Your frontend code stays the same.

Free to Start

Plan	Price	Requests/Day	Projects	Endpoints
Free	$0	1,000	5	100/project
Pro	$9/mo	Unlimited	10	Unlimited
Ultra	$29/mo	Unlimited	Unlimited	Unlimited

The free tier includes Dynamic Data, Conditional Rules, Sequences, Chaos Mode, and Stateful CRUD. Upgrade to Pro for GraphQL mocking and Postman import, or Ultra for JWT auth and webhook forwarding.

Tech Stack (for the curious)

Frontend: React 19, Vite, TailwindCSS v4
Backend: Firebase Cloud Functions (Gen 2, Node 20)
Database: Firestore + Realtime Database
AI: Google Gemini
Payments: Lemon Squeezy
Hosting: Firebase Hosting
CI/CD: GitHub Actions

Total infrastructure cost: ~$1/month. Firebase's free tier is incredibly generous for a serverless app.

Try It

snapmock.net — sign up free, create your first API in 30 seconds.

I built this solo over 6 months. It's definitely not perfect yet — there are probably bugs I haven't found and UX flows that could be smoother.

If you try it, I'd genuinely love your feedback. Bug reports, feature requests, criticism — all welcome. Just drop a comment below or reach out on Twitter.

Happy mocking.