惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

IT之家
IT之家
Y
Y Combinator Blog
月光博客
月光博客
Blog — PlanetScale
Blog — PlanetScale
GbyAI
GbyAI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 三生石上(FineUI控件)
S
SegmentFault 最新的问题
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
美团技术团队
雷峰网
雷峰网
酷 壳 – CoolShell
酷 壳 – CoolShell
Last Week in AI
Last Week in AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
有赞技术团队
有赞技术团队
博客园 - 司徒正美
V
Visual Studio Blog
小众软件
小众软件
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
Apple Machine Learning Research
Apple Machine Learning Research
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
A
About on SuperTechFans
The Cloudflare Blog

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Stop hardcoding JSON. I built a free cloud mock API with ...
David · 2026-05-05 · via DEV Community

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 },
];

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

  1. Sign up at snapmock.net (free, no credit card)
  2. Create a project --> Add Endpoint
  3. Set GET /users with this response body:
[
  {
    "id": "{{$uuid}}",
    "name": "{{$fullName}}",
    "role": "{{$jobTitle}}",
    "avatar": "{{$avatar}}"
  }
]

Enter fullscreen mode Exit fullscreen mode

  1. 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();

Enter fullscreen mode Exit fullscreen mode

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.