Framework

Generate Test Data for React + Firebase Apps

The Setup

React frontend with Firebase Firestore. You want a realistic local dataset so your UI renders like production.

// scripts/seed.mjs
import { initializeApp, cert } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";

initializeApp({ credential: cert("./service-account.json") });
const db = getFirestore();

const res = await fetch("https://api.mockhero.dev/api/v1/generate", {
  method: "POST",
  headers: { "x-api-key": process.env.MOCKHERO_API_KEY, "Content-Type": "application/json" },
  body: JSON.stringify({
    tables: [
      { name: "users", count: 50, fields: [
        { name: "id", type: "uuid" },
        { name: "displayName", type: "full_name" },
        { name: "photoURL", type: "avatar_url" }
      ]},
      { name: "posts", count: 200, fields: [
        { name: "id", type: "uuid" },
        { name: "userId", type: "ref", ref: "users.id" },
        { name: "title", type: "sentence" }
      ]}
    ]
  })
});

const data = await res.json();
const batch = db.batch();
for (const u of data.users) batch.set(db.collection("users").doc(u.id), u);
for (const p of data.posts) batch.set(db.collection("posts").doc(p.id), p);
await batch.commit();

Get Started

Grab a free API key.

M

MockHero Team

Guides and tutorials for generating realistic test data with the MockHero API.

Start generating test data for free

1,000 rows/month on the free tier. No credit card required.

Get Your API Key

Related Articles