Frontend developer builds mockly: a free fake REST API service
A frontend developer with three years of experience created mockly, a free fake REST API hosting service, featuring data filtering, sorting, pagination, and HTTP status simulation.
Stock photo for illustration only, not from the actual event
- Frontend developer builds mockly to eliminate backend waiting times.
- Provides free fake REST API hosting supporting GET, POST, PATCH, PUT, and DELETE.
- Includes advanced features like filtering, pagination, relations, and forced responses.
- Easy to use by signing in with GitHub, pasting JSON, and calling the endpoint.
After spending three years on the frontend, a software developer noticed that almost every project began the same way: designs were ready and data models were discussed, but the backend did not exist yet, with the promise that it would be ready in "a couple of weeks". To cope with this gap, developers typically create a src/mocks/ folder, drop some JSON files inside, and add a 300 ms setTimeout to preview loader components.
However, when the actual backend eventually arrived, property names often differed—such as using user_name instead of userName—or lists came wrapped inside an { items, meta } structure rather than a plain array. This required rewriting the API layer that was thought to be cleanly isolated. Existing mock-hosting services also proved unreliable, frequently going down with 502 errors and lacking timely updates.
This frustration led to the creation of mockly, a service designed to host fake REST APIs. To use it, developers simply sign in with a GitHub account, create a project, add a collection named products, and paste an array of JSON. This immediately generates a usable endpoint at https://api.m0ckly.site/m/<publicId>/products.
Stock photo for illustration only, not from the actual event
The service behaves like a real API by returning lists and single records while accepting POST, PATCH, PUT, and DELETE methods, with server-assigned ids. It requires no keys or custom headers and has open CORS enabled, allowing developers to call it directly from the browser. A public demo project is also provided for immediate testing.
Building a custom fake REST API solution directly addresses a common bottleneck in frontend development. It allows UI creation, state management setup using react-query hooks, and form validation to proceed smoothly before the backend is fully deployed, minimizing the need for major network architecture rewrites later.
The core concept behind mockly is to replicate the behavior of proper backends through several robust features:
- Data Filtering: Supports case-insensitive substring matching like ?title=mouse, wildcards such as ?title=*mouse*, numeric ranges like ?price_gte=20&price_lte=90, and global search across all fields using ?q=mouse.
- Sorting and Pagination: Supports parameters like ?sortBy=price&order=desc with numeric comparison, alongside page and limit parameters for wrapped responses.
- Data Relations: Allows embedding objects from other collections directly into responses using parameters like ?_relations=user.
- Forced Responses: Enables setting fixed HTTP status codes from 100 to 599 to test frontend error boundaries and retry logic.
- Access Control: Collections can be toggled for specific HTTP methods or locked with token authentication to simulate login workflows.
Stock photo for illustration only, not from the actual event
Under the hood, mockly is powered by Fastify, TypeScript, PostgreSQL with JSONB hosted on a personal VPS, and Next.js on the frontend. The creator maintains it as a peer-to-peer developer tool driven by community feedback rather than commercial roadmaps.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment