David

Posted on May 5

Stop hardcoding JSON. I built a free cloud mock API with dynamic Faker.js data + AI generation

#webdev #api #productivity #backend

We've all been there.

You're three days into a new dashboard feature. The backend is "almost done." You need to start integrating, but the API doesn't exist yet -- so you do what every frontend dev does: you hardcode some JSON and move on.

// "temporary" mock data. Aged like milk.
const products = [
  { id: 1, name: "Product A", price: 29.99 },
  { id: 2, name: "Product B", price: 49.99 },
];

Two weeks later, that products array is still sitting in your codebase. Your teammate on a different machine can't access your local JSON Server. Your Postman mock ran out of free calls. And now you need to test an empty state, an error state, and pagination -- all with hardcoded data.

Sound familiar?

The real problem with mocking APIs

Most mock API solutions fail at one (or more) of these:

Not shareable: JSON Server and MSW only run on your machine
Static data: You get the same names, emails, and IDs every time -- useless for testing
Too much setup: Writing custom middleware, fixtures, and interceptors just to get a 200 response
Not realistic: { "name": "User 1", "email": "test@test.com" } doesn't catch the edge cases your real users will hit

I wanted something that felt like a real API -- persistent HTTPS URL, fresh data every request, shareable from anywhere -- without spinning up an entire backend.

So I built SnapMock.

What is SnapMock?

SnapMock is a cloud-hosted mock API platform. You define endpoints through a UI, and you get a real HTTPS URL you can call from your app, Postman, mobile device, or CI pipeline.

No local server. No code to write. No expiry.

The key feature: dynamic data tags

Here's where it gets interesting. Instead of returning static JSON, SnapMock uses Faker.js tags that resolve on every single request:

{
  "id": "{{$uuid}}",
  "name": "{{$fullName}}",
  "email": "{{$email}}",
  "product": "{{$productName}}",
  "price": {{$price}},
  "inStock": {{$boolean}},
  "createdAt": "{{$pastDate}}"
}

Every time your app calls that endpoint, it gets different, realistic data. You'll catch UI issues like:

Names that are 40 characters long
Prices like 1099.00 that break your layout
Boolean states you forgot to handle
Emails with + and . characters

No code changes needed. Just refresh.

Quickstart in 60 seconds

Sign up at snapmock.net (free, no credit card)
Create a project --> Add Endpoint
Set GET /users with this response body:

[
  {
    "id": "{{$uuid}}",
    "name": "{{$fullName}}",
    "role": "{{$jobTitle}}",
    "avatar": "{{$avatar}}"
  }
]

Copy the generated URL and drop it into your React/Vue/whatever app:

// Before: hardcoded mock
const users = [{ id: 1, name: "Alice" }];

// After: real HTTPS endpoint from SnapMock
const res = await fetch("https://snapmock.net/api/YOUR_PROJECT_ID/users");
const users = await res.json();

When the real backend is ready, you change one URL. That's the entire migration.

More features worth knowing

Conditional Rules

Return different responses based on request context -- no code required:

Condition	Then Return
`Authorization` header missing	`401 Unauthorized`
`?role=admin` in query params	Admin-level response
Body contains `"status": "pending"`	Different payload

Chaos Mode

Enable Chaos Mode and SnapMock will randomly inject 4xx/5xx errors and latency spikes. Your frontend should handle all of this gracefully. Chaos Mode helps you find out if it actually does.

AI Endpoint Generation

Describe what you need in plain English:

"A paginated list of blog posts, each with a title, author name, publish date, tag array, and read time in minutes"

SnapMock calls Gemini API and generates the full endpoint config in about 10 seconds.

Postman Import

Already have a Postman collection? Upload the JSON and SnapMock creates all your endpoints automatically.

Team Sharing

Invite teammates with Editor or Viewer roles. One project URL shared in Slack -- everyone hits the same mock API, from any device.

Request Logging

Every request gets logged: URL, method, headers, body, timestamp, response time. See exactly what your app is sending.

Tech stack (for the curious)

Frontend: React 19 + Vite + TypeScript + TailwindCSS v4
Backend: Firebase Cloud Functions (Gen 2, Node.js, TypeScript)
Database: Firestore (endpoint configs) + Firebase RTDB (request logs, counters)
Dynamic Data: Faker.js running server-side per request
AI: Gemini API
Payments: Lemon Squeezy
Hosting: Firebase Hosting + GCP asia-southeast1

Free tier

Limit	Free
Projects	5
Endpoints per project	100
Requests / day	1,000
AI generations / day	15
Team members	2
Dynamic Data	[Yes]
Conditional Rules	[Yes]
Chaos Mode	[Yes]
Stateful CRUD	[Yes]

No credit card required. The playground on the landing page lets you try Faker.js tags without even signing up.

What I'd love your feedback on

Is the conditional rules feature something you'd actually use? Or is MSW good enough for that use case?
Would GraphQL mocking be a dealbreaker without it?
What does your current mock API workflow look like?

-> Try it free at snapmock.net

Happy to answer anything in the comments!

Built by a frontend dev who got tired of explaining to backend devs why "it's almost ready" isn't good enough for sprint planning.

DEV Community