mongfire-nano-board

A plug‑and‑play React dashboard for managing MongoDB and Firestore collections inside your own app. Ships Tailwind classnames only (no CSS file) for easy theming.

✨ Features

• 📁 Browse collections (MongoDB / Firestore)
• 🧾 View documents with IDs
• ✍️ Modal editor with dynamic fields (objects/arrays/primitives)
• ➕ Add fields/items anywhere in the tree
• 🗑️ Delete documents
• 🎛️ Tailwind‑first styling with override hooks

🚀 Install

pnpm add mongfire-nano-board

Peer deps you should already have in your app:

{
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18",
    "firebase": ">=9"
  }
}

🔧 Usage

MongoDB

import { MongFireDashboard } from 'mongfire-nano-board';

<MongFireDashboard
  mode="mongodb"
  mongoApiUrl="http://localhost:4000/api"
/>

Firestore — two ways

import { MongFireDashboard, ensureFirestore } from 'mongfire-nano-board';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

// Option A: initialize Firestore yourself
const db = ensureFirestore(firebaseConfig);

<MongFireDashboard
  mode="firestore"
  firestore={db}
  collectionNames={["users","surveys"]}
  initialCollection="users"
/>

// Option B: let the component initialize internally
<MongFireDashboard
  mode="firestore"
  firebaseConfig={firebaseConfig}
  collectionNames={["users","surveys"]}
/>

Note: The Web SDK cannot list top‑level collections; pass collectionNames for Firestore.

🎨 Tailwind (v4) in your app

This package renders Tailwind utility classnames. Your app must make Tailwind scan the package files so utilities are generated.

Add to your app’s main CSS entry (e.g. src/index.css) and ensure it’s imported by your app’s entry (e.g. main.tsx):

@import "tailwindcss";

/* App files */
@source "./**/*.{html,ts,tsx}";

/* Also scan the package (adjust ../../ to your layout) */
@source "../../packages/mongfire-nano-board/client/**/*.{ts,tsx,js,jsx}";

If you prefer a config file, put the same path under content in tailwind.config.js.

Symptom if missing: component renders unstyled until you place the same classes in your app files.

📦 API

<MongFireDashboard />

| Prop | Type | Required | Description | | ------------------- | --------------------------------- | -------- | ------------------------------------------- | | mode | 'mongodb' \| 'firestore' | ✅ | Data source to use | | mongoApiUrl | string | ❌ | Base URL for the Mongo API server | | firestore | Firestore | ❌ | Firestore instance (Option A) | | firebaseConfig | FirebaseConfig | ❌ | Firebase config to auto‑init (Option B) | | collectionNames | string[] | ❗ | Required for Firestore (top‑level names) | | initialCollection | string | ❌ | Collection to open first | | pageSize | number (default 100) | ❌ | Max docs to fetch per load | | variant | 'default' \| 'compact' | ❌ | Spacing density toggle | | unstyled | boolean | ❌ | Render minimal markup (no Tailwind classes) | | classes | DashboardClasses (override map) | ❌ | Tailwind class overrides per slot | | modalClasses | ModalClasses | ❌ | Tailwind overrides for the modal |

Class override slots (partial): wrap, grid, card, cardHeader, cardTitle, cardBody, list, listBtn, listBtnActive, toolbar, btn, btnPrimary, btnDanger, input, textarea, select, chip, fieldRow, group, groupInner

🛠 Mongo API Server (for Mongo mode)

A tiny Express server is included in the package for local Mongo testing.

Run it:

pnpm --filter mongfire-nano-board dev:server

Endpoints:

• GET /api/collections – list collection names
• GET /api/:collection – list documents (first 100)
• DELETE /api/:collection/:id – delete by _id
• PUT /api/:collection/:id – replace/merge document (server currently treats as set)

Env vars: PORT, MONGO_URI, DB_NAME

🧯 Troubleshooting

• Component looks unstyled → Ensure Tailwind scans the package path via @source (or config content). Restart the dev server.
• Firestore cannot fetch collections → Provide collectionNames explicitly.
• Double React warning → Make sure your app uses a single React copy and that React is a peerDependency of this package.

📄 License

MIT © Yeshan Perera