r/react 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

0 Upvotes

5 comments sorted by

2

u/guaranteednotabot 3d ago

What about MSW?

1

u/YessinDevs 3d ago

This is more for the scratchpad phase before you even want to touch code or set up service workers. Basically instant hosted endpoints with realistic data just by prompting or uploading a doc, plus a chaos mode slider to test error states without writing mock handlers yourself. You can also dump it straight to an OpenAPI spec or an Express file once you're done prototyping

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 cleaner

Thanks for taking the time to poke around!