Mock Database for Frontend Development with localmockdb

Frontend development often starts before the backend is ready. Designers finish screens, frontend developers start building components, but API endpoints are still pending. This slows down UI development, testing, demos, and client previews.

localmockdb solves this problem by giving frontend developers a zero-setup mock REST API that works directly in the browser. It can create, read, update, patch, delete, paginate, and persist mock data using localStorage or IndexedDB.

What is localmockdb?

localmockdb is a lightweight mock database and REST API utility for frontend projects. It helps you simulate real API behavior while building React, Next.js, Vue, or plain JavaScript applications. You can use familiar REST-style methods such as GET, POST, PUT, PATCH, and DELETE.

The package automatically handles IDs, timestamps, API-like responses, and data persistence. Your frontend can behave like it is connected to a real backend, even when no backend exists yet.

Why frontend developers need a mock database

In many projects, frontend and backend development happen at the same time. The frontend team may need to build dashboards, forms, tables, filters, CRUD pages, and admin panels before the backend APIs are complete.

Hardcoded arrays and temporary React state work for small static previews, but they become weak when the UI needs create, update, delete, pagination, reset, and persisted records. A mock database gives the interface a more realistic development flow.

Install localmockdb

Install the package from npm:

npm install localmockdb

Or use pnpm:

pnpm add localmockdb

Quick start example

The API is intentionally small. Create an API instance and start using REST-like methods.

import { createAPI } from "localmockdb";

const db = createAPI();

await db.post("/users", { name: "Shrikant" });
await db.get("/users");
await db.get("/users/1");
await db.patch("/users/1", { name: "Updated" });
await db.delete("/users/1");

React and Next.js example

In React or client-side Next.js components, you can keep the mock API in a small helper file and call it from your component.

// lib/db.ts
import { createAPI } from "localmockdb";

export const db = createAPI();

import { useEffect, useState } from "react";
import { db } from "./lib/db";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    loadUsers();
  }, []);

  async function loadUsers() {
    const res = await db.get("/users");
    if (!res.success) return;
    setUsers(res.data);
  }

  async function addUser() {
    await db.post("/users", { name: "New User" });
    loadUsers();
  }

  return (
    <div>
      <button onClick={addUser}>Add User</button>

      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

API-like response shape

localmockdb returns structured responses, so frontend code can handle data in a way that feels closer to production APIs.

{
  "success": true,
  "statusCode": 200,
  "data": [
    {
      "id": "uuid",
      "name": "Shrikant",
      "createdAt": "2026-04-21T10:00:00.000Z",
      "updatedAt": "2026-04-21T10:00:00.000Z"
    }
  ]
}

Best use cases for localmockdb

• Frontend development before backend APIs are ready
• React and Next.js learning projects
• Admin dashboard prototypes
• CRUD screens for demos
• UI testing with persisted mock data
• Client previews and MVP validation
• Portfolio projects that need realistic interactions

localmockdb vs hardcoded mock data

Hardcoded arrays are fine for static UI previews, but they are limited. Once you need to add, update, delete, or persist records, a mock API is easier to maintain.

// Static mock data
const users = [
  { id: 1, name: "Shrikant" },
  { id: 2, name: "Amit" }
];

// localmockdb API-like flow
await db.post("/users", { name: "New User" });
await db.patch("/users/1", { name: "Updated User" });
await db.delete("/users/1");

localmockdb vs JSON Server

JSON Server is useful when you want a mock API running as a separate local server. localmockdb is different because it works directly inside the frontend app. This makes it useful for simple prototypes, browser-based demos, and frontend-only experiments where running another server would slow down the workflow.

When you should not use localmockdb

localmockdb is not a production backend. Do not use it for secure user data, authentication, server-side persistence, multi-user applications, or large-scale systems. It is made for frontend development, demos, prototypes, learning, and UI testing.

Try localmockdb

You can install the package from npm or try the live demo in your browser.

FAQs about localmockdb