BMS Package

A complete Blog Management System for React and Next.js applications

A turnkey solution that provides everything you need to add a fully-featured blog to your website. Powered by your own Firebase backend with a ready-made admin interface, this package lets you easily create, manage, and display blog content with minimal setup.

• Admin Dashboard - Secure interface for content management
• Public Blog Pages - Ready-to-use components for visitors
• Firebase Backend - Uses your own Firebase project for data storage
• No Server Required - Completely serverless architecture

Features

Content Management

• Rich Text Editor - TinyMCE integration for professional blog authoring
• Categories & Tags - Comprehensive content organization system
• Dashboard Analytics - Track performance of your blog content

Security

• Secure Admin Panel - Firebase Authentication with role-based access

User Experience

• Image Management - Cloudinary integration for optimized image uploads
• Responsive Design - Fully mobile-friendly admin and public interfaces
• Customizable Themes - Easy styling to match your brand identity

Installation & Setup

1. Scaffold Your Project with the Setup Tool

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.)

  Steps to get Firebase configuration:

  1. Go to your Firebase project dashboard.
  2. Create A New Project.
  3. Click on the "Project Overview" card.
  4. Locate the "Add app" section and click the "</>"(web) button.
  5. This will Create an app for you.
  6. 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.

  Firebase config format:

  const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  };

• Enter your Cloudinary credentials (Cloud Name, Upload Preset, API Key, API Secret, etc.)

  Steps to get Cloudinary configuration: | Credential | Where to find it | |------------|------------------| | Cloud Name | Home --> Dashboard --> Product Environment --> Cloud Name | | Upload Preset | Settings --> Product Environment Settings --> Upload --> "Add Upload Present" button --> Set name, select signing mode to unsigned --> Save --> Copy Name From Table | | API Key | Settings --> Api Keys --> Copy API key from "Root" key name | | API Secret | Settings --> Api Keys --> Copy API Secret from "Root" key name |

• Create a Firebase user for admin access

  Steps to create admin user:

  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.

  This email/password will be your credentials for accessing the "/bms" admin route.

2. Install the Package

Install the package using your preferred package manager:

# Using npm
npm install bms-package

# Using yarn
yarn add bms-package

# Using pnpm
pnpm add bms-package

Usage

Next.js Integration

In Next.js projects, the package automatically sets up these routes:

| Route | Component | Description | |-------|-----------|-------------| | /bms | <BmsAdminPanel /> | Protected admin panel for blog management | | /blogs | <BlogList /> | Public page listing all published blog posts | | /blogs/[slug] | <BlogPage /> | Public page for individual blog posts |

React.js Integration (Vite or CRA)

1. Set up Router

First, wrap your app with BrowserRouter:

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

<BrowserRouter>
  <App />
</BrowserRouter>

2. Configure Routes

Add the blog routes to your application:

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: /blogs → <BlogList />
• Single Blog: /blogs/:slug → <BlogPage />

Configuration

1. Firebase Setup

Create a Firebase project and enable these services:

• Authentication - Enable Email/Password sign-in method
• Firestore Database - Create database in production mode
• Storage - Initialize Firebase Storage

Add your Firebase credentials to environment variables:

# Required Firebase configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your-measurement-id

2. Cloudinary Setup

For image uploads, create a Cloudinary account:

| Credential | Description | Where to Find | |------------|-------------|---------------| | CLOUD_NAME | Your Cloudinary cloud name | Dashboard | | UPLOAD_PRESET | Unsigned upload preset | Upload Settings | | API_KEY | Your Cloudinary API key | Dashboard | | API_SECRET | Your Cloudinary API secret | Dashboard |

Add Cloudinary credentials to environment variables:

# Required for image uploads
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloud-name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your-upload-preset
NEXT_PUBLIC_CLOUDINARY_API_KEY=your-api-key
NEXT_PUBLIC_CLOUDINARY_API_SECRET=your-api-secret

3. Login Admin User

Follow these steps to create your first admin account:

1. Start your application and navigate to /bms route
2. Log in with your credentials to access the admin panel

Customization

Admin Panel Configuration

Customize the admin panel by passing props to the BmsAdminPanel component:

<BmsAdminPanel logo="/logo.png" logoHeight={60} logoWidth themeColor="#ff6600" />

Public Blog Pages Configuration

• CSS: Edit Blog.css and BlogList.css for branding and layout.

How It Works

This package provides a complete blog management system with both admin and public-facing components:

Core Components

| Component | Description | |-----------|-------------| | Admin Panel | Protected area for authorized users to create, edit, and manage blog posts | | Public Blog Pages | Ready-to-use components for displaying blog posts to visitors |

Technical Features

• Firebase Integration: All blog data is stored securely in Firebase Firestore
• Image Management: Cloudinary integration for optimized image uploads
• Responsive Design: Mobile-friendly UI for both admin and public pages
• Customization Options: Easily adapt the look and feel to match your brand identity

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.