bms-package

A complete Blog Management System (BMS) package for React and Next.js projects, powered by your own Firebase backend and a ready-made admin UI. Easily add, update, and delete blogs with a secure admin panel, and display blogs to users with auto-generated routes and customizable styles.

Features

• Framework Support: Works with Next.js, React.js (Vite or CRA)
• Admin UI: Full-featured admin interface for blog and author management
• Authentication: Built-in login system for admin route protection
• Firebase Integration: All data stored in your own Firebase project
• Cloudinary Integration: Handles image uploads and management
• Auto-generated Slugs: Unique slugs for each blog
• Public Blog Pages: Ready-to-use components for blog list and single blog view
• Customizable CSS: Easily brand your blog UI
• No Backend Required: All logic handled client-side with Firebase

Installation & Setup

1. Scaffold Your Project

Run the setup tool to generate required files and configure your environment:

npx i-bms

You will be prompted to:

• Choose between React.js or Next.js

• Enter your Firebase credentials (API Key, Project ID, etc.) You can simply get firebase configue for following below steps: 1. Go to your Firebase project dashboard. 2. Create A New Project. 2. Click on the "Project Overview" card. 3. Locate the "Add app" section and click the "</>"(web) button. 4. This will Create an app for you. 5. Now go to project settings --> General --> scroll to bottom and find and select your web app which recently maden and you can copy firebase configue from there. you need to upload firebase configue json like below : const firebaseConfig = { apiKey: "...", authDomain: "...", projectId: "...", storageBucket: "...", messagingSenderId: "...", appId: "...", measurementId: "..." };

• Enter your Cloudinary credentials (Cloud Name, Upload Preset, API Key, API Secret, etc.) This configue you need to add according asking like below steps for getting from cloudinary Enter your Cloudinary Cloud Name: home --> Dashboard --> Product Environment --> Cloud Name Enter your Cloudinary Upload Preset: At below of sidebar "settings" --> Product Environment Settings --> Upload --> "Add Upload Present" button click --> set name, select signing mode to unsigned --> Click Save --> Copy Name From Table Enter your Cloudinary API Key: Above Upload --> Api Keys --> Copy API key from "Root" key name Enter your Cloudinary API Secret: Above Upload --> Api Keys --> Copy API Secret from "Root" key name

• After this setup you need to add user into firebase for access admin route "/bms" Here is steps for make user for access admin route

  1. Go to your Firebase project dashboard.
  2. Click on the "Authentication" option in the left-hand menu.
  3. Enable "Email/Password" as an authentication method from sign-in method.
  4. Select "Users" from the submenu.
  5. Click on the "Add user" button.
  6. Fill in the user's email and password.
  7. Click "Save" to create the user. "Now that Email/Password is your Credential for access "/bms" route which ask before opening page."

2. Install the Package

npm install bms-package
# or
yarn add bms-package

Usage

Next.js

• Admin Panel: /bms route (protected, uses <BmsAdminPanel />)
• Public Blog List: /blogs route (uses <BlogList />)
• Single Blog Page: /blogs/[slug] route (uses <BlogPage />)

React.js (Vite or CRA)

1. Wrap your app with BrowserRouter:

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <App />
</BrowserRouter>

2. Add routes:

import { Routes, Route } from 'react-router-dom';
import BlogList from './pages/BlogList';
import BlogPage from './pages/BlogPage';
import { BmsAdminPanel } from 'bms-package';

function App() {
  return (
    <Routes>
      <Route path="/bms" element={<BmsAdminPanel />} />
      <Route path="/blogs" element={<BlogList />} />
      <Route path="/blogs/:slug" element={<BlogPage />} />
    </Routes>
  );
}

Admin Panel

• Route: /bms
• Component: <BmsAdminPanel />
• Features: Add, update, delete blogs and authors; manage images; secure login

Public Blog Pages

• All Blogs: /blog → <BlogList />
• Single Blog: /blog/:slug → <BlogPage />

Environment Variables

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY= ...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= ...
NEXT_PUBLIC_FIREBASE_PROJECT_ID= ...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= ...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= ...
NEXT_PUBLIC_FIREBASE_APP_ID= ...
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID= ...

# Cloudinary (optional, for image uploads)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= ...
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET= ...
NEXT_PUBLIC_CLOUDINARY_API_KEY= ...
NEXT_PUBLIC_CLOUDINARY_API_SECRET= ...

---

## Customization

- **CSS:** Edit `Blog.css` and `BlogList.css` for branding and layout.
- **Admin UI:** Pass props to `<BmsAdminPanel />` for logo and theme color customization:
  ```jsx
  <BmsAdminPanel logo="/logo.png" logoHeight={60} logoWidth themeColor="#ff6600" />

How It Works

• Admin panel (/bms): Secure login, full blog and author management, image uploads, auto-generated slugs.
• Public blog list (/blogs): Lists all published blogs with categories, tags, and excerpts.
• Single blog page (/blogs/:slug): Displays full blog content, author, categories, tags, and images.

License

MIT License

Author

Gunjan Kumbhani

Pro Tips:

• Customize the CSS for your brand.
• All blog logic (create, update, delete) is handled internally.
• No backend server required—just Firebase and Cloudinary.