DEV Community

Sanjay Selvaraj
Sanjay Selvaraj

Posted on

How to Build Your Frontend Before Your Backend API Is Ready

#ai #webdev #frontend #productivity

Have you ever started building a frontend feature, only to discover that the backend API isn't ready yet?

You might wait for the backend team, write temporary mock data inside your components, or spend time setting up a local mock server.

There’s another approach: use a hosted mock API with a real HTTPS endpoint.

Why Mock APIs Are Useful

Mock APIs let you develop and test frontend features before the real backend is available.

For example, imagine you're building a user dashboard that needs this response:

{
  "id": 101,
  "name": "Alex",
  "email": "alex@example.com",
  "role": "developer"
}
Enter fullscreen mode Exit fullscreen mode

Instead of waiting for the backend, you can create a mock endpoint that returns this JSON and connect your frontend to it.

Your frontend can then handle loading states, successful responses, errors, and other UI behavior while the actual API is still under development.

A Simple Workflow

  1. Define the endpoint and the JSON response you need.
  2. Create a mock API endpoint.
  3. Get a hosted HTTPS URL.
  4. Use that URL in your frontend's fetch() call.
  5. Replace the mock URL with the real API when the backend is ready.

For example:

const response = await fetch("YOUR_MOCK_API_URL");
const data = await response.json();

console.log(data);
Enter fullscreen mode Exit fullscreen mode

This keeps frontend development moving without coupling your progress to backend availability.

What About AI Coding Editors?

If you use an AI coding editor, you can take this workflow further with MCP (Model Context Protocol).

Thodr provides hosted mock APIs and MCP support, allowing compatible AI coding editors to interact with mock API functionality from the editor.

You can explore it here:

What's Your Current Approach?

When your backend API isn't ready, do you use hardcoded JSON, a local mock server, tools like MSW, or a hosted mock API?

I'd be interested to hear what works best in your workflow.

Top comments (0)