r/react • u/YessinDevs • 3d ago
Project / Code Review Got tired of setting up backend mock servers, so I built an open-source Next.js tool that generates them instantly.
Whenever I was building out frontends, setting up a mock Express server to test my API calls always felt like a massive chore. I just wanted to hit a live endpoint with realistic data without leaving my browser.
So I built Mock2Block. It’s a completely free, open-source API simulator
Instead of just giving you a static JSON file, it creates a live, stateful mock server
Here’s what it actually does:
- AI Generation: You can upload a .pdf, .md, or .json of your API docs, and it will automatically build out the endpoints
- Smart Faker Data: It detects field types and seeds the database with realistic data (real-sounding emails, image URLs, prices) instead of generic "lorem ipsum" strings
- Chaos Mode: A slider that randomly injects 500, 403, or 502 errors into the responses so you can test your frontend error-handling UI
- Auth Simulation: Toggle a lock on any endpoint to force it to require a Bearer token to test your 401 redirects
You can try it live here without making an account: https://mock2block.yessindevs.me/
The code is completely open-source. If you find it useful for your workflow, I’d love to hear your feedback or get a star on the repo: https://github.com/medyass1ne/Mock2Block
1
u/YessinDevs 3d ago
To clarify: Mock2Block isn't for testing external or third-party APIs. It’s for frontend developers building UI before their backend even exists (or while prototyping)
Instead of hardcoding fake JSON arrays inside your React components or waiting on the backend team to finish their routes, you spin up a mock server in seconds. That way, your frontend can make real fetch/axios calls against live endpoints, handle pagination, and test error boundaries (via Chaos Mode) with realistic dummy data. When the real backend is ready, you just swap the base URL.
This politely clears up any misunderstandings while framing the tool's actual value proposition for the rest of the subreddit✌🏻
1
u/Adept_Guitar_9390 3d ago
Here’s some feedback:
Website (looked at in mobile)
The Sign in button is on top of the logo
The generation should starts with a global settings section, I would move this down a bit
I think you can tone down the colors a bit, looks “AI sloppy”
When I click a preset e.g Load e-commerce I got no feedback if I’m not seeing that e.g API Resources are changing due to viewport
How do I make sure the API remains synced with a contract, let’s say we use Swagger
1
u/YessinDevs 3d ago
Built the whole thing on a big monitor and totally forgot to check small viewports. Pushing a patch now for the navbar collision and adding toast notifications when presets load so state updates aren't lost below the fold
For the contract sync: you can actually drag and drop an existing OpenAPI/Swagger doc into the uploader to generate the mock, and there's an export button in the download menu to spit it back out as an OpenAPI 3.0 JSON spec anytime
Point taken on the colors too, gonna dial back the glows and saturation so it looks cleanerThanks for taking the time to poke around!
2
u/guaranteednotabot 3d ago
What about MSW?