📝 BMS Package - Blog Management System

A complete, ready-to-use Blog Management System for React and Next.js applications.

📋 Prerequisites

• Node.js (v16 or higher)
• npm, yarn, or pnpm
• Firebase Account (free tier)
• Cloudinary Account (free tier, optional but recommended)

🚀 Quick Installation

Install Package

npm install react-bms
# or
yarn add react-bms
# or
pnpm add react-bms

⚙️ Setup for Next.js

📦 Published Package Users: If you're using the published react-bms package from npm, make sure to:

1. Add transpilePackages: ['react-bms'] to next.config.js (REQUIRED)
2. Clear .next cache after installation: rm -rf .next
3. Restart dev server after configuration changes

Step 1: Configure Next.js

Create or update next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-bms'],
}

module.exports = nextConfig

⚠️ Important: transpilePackages: ['react-bms'] is required for the published package to work correctly in Next.js. Without this, Next.js won't be able to resolve the package modules.

Step 2: Run Setup Tool

npx i-bms

This will automatically create required files in your project.

Step 3: Manual Setup (If CLI didn't create files)

The CLI tool detects your project structure automatically:

• If app directory exists → Creates files in app/
• If src/app directory exists → Creates files in src/app/
• If neither exists → Creates app/ directory

If you need to create manually:

For app directory structure:

Create app/bms/page.jsx:

'use client'
import { BmsAdminPanel } from 'react-bms'

export default function BmsPage() {
  return <BmsAdminPanel />
}

Create app/blogs/page.jsx:

'use client'
import { BlogList } from 'react-bms'

export default function BlogsPage() {
  return <BlogList />
}

Create app/blogs/[slug]/page.jsx:

'use client'
import { BlogPage } from 'react-bms'

export default function BlogPostPage() {
  return <BlogPage />
}

For src/app directory structure:

Create src/app/bms/page.jsx:

'use client'
import { BmsAdminPanel } from 'react-bms'

export default function BmsPage() {
  return <BmsAdminPanel />
}

Create src/app/blogs/page.jsx:

'use client'
import { BlogList } from 'react-bms'

export default function BlogsPage() {
  return <BlogList />
}

Create src/app/blogs/[slug]/page.jsx:

'use client'
import { BlogPage } from 'react-bms'

export default function BlogPostPage() {
  return <BlogPage />
}

Step 4: Install Peer Dependencies

npm install react react-dom next lucide-react quill react-quill-new

Step 5: Environment Variables

Create .env.local file in project root:

# 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

# Cloudinary Configuration (Optional)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key
NEXT_PUBLIC_CLOUDINARY_API_SECRET=your_api_secret

Step 6: Clear Cache and Start Development Server

Important: After installing the package and configuring next.config.js, clear the Next.js cache:

# Clear Next.js cache
rm -rf .next
# Or on Windows PowerShell:
Remove-Item -Recurse -Force .next

# Start development server
npm run dev

Access:

• Admin Panel: http://localhost:3000/bms
• Blog List: http://localhost:3000/blogs

⚙️ Setup for React.js (Vite/CRA)

Step 1: Run Setup Tool

npx i-bms

Step 2: Set up Router

Wrap your app with BrowserRouter:

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

function App() {
  return (
    <BrowserRouter>
      <YourApp />
    </BrowserRouter>
  );
}

Step 3: Configure Routes

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

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

Step 4: Install Peer Dependencies

npm install react react-dom react-router-dom lucide-react quill react-quill-new

Step 5: Environment Variables

For Vite projects, create .env file:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_API_KEY=your_api_key
VITE_CLOUDINARY_API_SECRET=your_api_secret

For CRA projects, create .env file:

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

REACT_APP_CLOUDINARY_CLOUD_NAME=your_cloud_name
REACT_APP_CLOUDINARY_API_KEY=your_api_key
REACT_APP_CLOUDINARY_API_SECRET=your_api_secret

Step 6: Start Development Server

npm run dev  # For Vite
# or
npm start    # For CRA

🔥 Firebase Setup & Credentials (Step-by-Step)

Step 1: Create Firebase Project

1. Open Browser and go to: https://console.firebase.google.com/
2. Click on "Get Started" button (top right corner, if you're new)
   • OR
   • Click on "Add project" button (if you already have projects)
3. Enter Project Name:
   • Type your project name (e.g., "my-blog-cms")
   • Click "Continue" button
4. Google Analytics Setup (Optional):
   • You'll see "Enable Google Analytics for this project"
   • Toggle it OFF (or keep it ON if you want)
   • Click "Continue" button
5. Wait for Project Creation:
   • Firebase will create your project (takes 10-30 seconds)
   • You'll see "Your new project is ready"
   • Click "Continue" button
6. You'll be redirected to Firebase Console Dashboard

Step 2: Enable Authentication

1. In Firebase Console, look at the left sidebar menu
2. Click on "Authentication" (it has a key icon 🔑)
3. Click on "Get started" button (if you see it)
4. Click on "Sign-in method" tab (top of the page)
5. Find "Email/Password" in the list
6. Click on "Email/Password" row
7. Toggle the "Enable" switch to ON (top of the popup)
8. Click "Save" button (bottom right of popup)
9. You'll see a green checkmark ✅ - Authentication is now enabled

Step 3: Create Firestore Database

1. In Firebase Console, look at the left sidebar menu
2. Click on "Firestore Database" (it has a database icon 🗄️)
3. Click on "Create database" button (center of the page)
4. Select Mode:
   • You'll see two options: "Production mode" and "Test mode"
   • Click on "Production mode" radio button
   • Click "Next" button
5. Select Location:
   • Choose a location closest to you (e.g., "us-central", "asia-south1")
   • Click on your preferred location
   • Click "Enable" button
6. Wait for Database Creation (takes 30-60 seconds)
7. You'll see "Cloud Firestore is setting up" message
8. Once ready, you'll see the Firestore Database interface

Step 4: Enable Storage

1. In Firebase Console, look at the left sidebar menu
2. Click on "Storage" (it has a storage icon 📦)
3. Click on "Get started" button (center of the page)
4. Security Rules Setup:
   • You'll see "Cloud Storage for Firebase will use security rules"
   • Click "Next" button
5. Select Location:
   • Choose the same location as Firestore (or closest to you)
   • Click on your preferred location
   • Click "Done" button
6. Wait for Storage Setup (takes 10-20 seconds)
7. Storage is now enabled ✅

Step 5: Get Firebase Credentials

1. In Firebase Console, look at the top left corner

2. Click on the Gear icon ⚙️ (next to "Project Overview")

3. Click on "Project settings" from the dropdown menu

4. Scroll down to find "Your apps" section

5. If you don't have a web app yet:

   • Click on the Web icon (</>) under "Your apps"
   • Enter App nickname (e.g., "My Blog App")
   • Click "Register app" button

6. Copy Firebase Configuration:

   • You'll see a code block with firebaseConfig
   • Find these values and copy them one by one:

   apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
   authDomain: "your-project.firebaseapp.com"
   projectId: "your-project-id"
   storageBucket: "your-project.appspot.com"
   messagingSenderId: "123456789012"
   appId: "1:123456789012:web:abcdefghijklmnop"
   measurementId: "G-XXXXXXXXXX"

7. Add to Environment File:

   • Open your project's .env.local (Next.js) or .env (React) file
   • Add these values with proper prefix:

   For Next.js (.env.local):

   NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   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=123456789012
   NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

   For Vite (.env):

   VITE_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=123456789012
   VITE_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
   VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

   For CRA (.env):

   REACT_APP_FIREBASE_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   REACT_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   REACT_APP_FIREBASE_PROJECT_ID=your-project-id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=123456789012
   REACT_APP_FIREBASE_APP_ID=1:123456789012:web:abcdefghijklmnop
   REACT_APP_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

Step 6: Configure Firestore Security Rules

1. In Firebase Console, look at the left sidebar menu
2. Click on "Firestore Database"
3. Click on "Rules" tab (top of the page, next to "Data" tab)
4. You'll see the rules editor with default rules
5. Delete all existing code in the editor
6. Copy and paste this code:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

7. Click on "Publish" button (top right corner of the rules editor)
8. Wait for confirmation - You'll see "Rules published successfully" message ✅
9. Rules are now active

Step 7: Configure Storage Security Rules

1. In Firebase Console, look at the left sidebar menu
2. Click on "Storage"
3. Click on "Rules" tab (top of the page, next to "Files" tab)
4. You'll see the rules editor with default rules
5. Delete all existing code in the editor
6. Copy and paste this code:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

7. Click on "Publish" button (top right corner of the rules editor)
8. Wait for confirmation - You'll see "Rules published successfully" message ✅
9. Rules are now active

Step 8: Create Admin User

1. In Firebase Console, look at the left sidebar menu
2. Click on "Authentication"
3. Click on "Users" tab (top of the page, it's selected by default)
4. Click on "Add user" button (top of the page, blue button)
5. Enter Email:
   • Type your email address (e.g., "[email protected]")
6. Enter Password:
   • Type a strong password (at least 6 characters)
   • Click on "Show password" eye icon 👁️ to verify
7. Click "Add user" button (bottom right of popup)
8. User Created Successfully ✅
   • You'll see the user in the users list
   • Save these credentials - you'll use them to login at /bms route

Important:

• Email: [email protected] (use the email you entered)
• Password: your-password (use the password you entered)
• These are your admin credentials for the blog management system

✅ Firebase Setup Complete Checklist

After completing all steps, verify:

• [ ] Firebase project created
• [ ] Authentication enabled (Email/Password)
• [ ] Firestore Database created (Production mode)
• [ ] Storage enabled
• [ ] Firebase credentials copied to .env file
• [ ] Firestore security rules published
• [ ] Storage security rules published
• [ ] Admin user created
• [ ] Admin credentials saved

🎯 Next Steps After Firebase Setup

1. Restart your development server (if it's running):

   # Stop the server (Ctrl + C)
   # Then start again
   npm run dev

2. Test the setup:

   • Go to http://localhost:3000/bms
   • Login with the admin credentials you created
   • You should see the admin dashboard

3. If login fails:

   • Check .env file has all Firebase variables
   • Verify all variables start with correct prefix (NEXT_PUBLIC_, VITE_, or REACT_APP_)
   • Restart dev server after adding env variables

☁️ Cloudinary Setup & Credentials (Step-by-Step)

Step 1: Create Cloudinary Account

1. Open Browser and go to: https://cloudinary.com/
2. Click on "Sign Up for Free" button (top right corner)
3. Fill Registration Form:
   • Enter your Email address
   • Enter your Full Name
   • Enter a Password (at least 8 characters)
   • Check the "I agree to the Terms of Service" checkbox
   • Click "Create Account" button
4. Verify Email:
   • Check your email inbox
   • Click on the verification link from Cloudinary
   • You'll be redirected to Cloudinary Dashboard

Step 2: Get Cloudinary Credentials

1. After Login, you'll see the Dashboard page

2. Find "Account Details" section (usually on the right side or center)

3. Copy Cloud Name:

   • Look for "Cloud name" field
   • You'll see something like: dxxxxxxxxx
   • Click on the copy icon 📋 next to it (or manually copy)
   • Save this value - you'll need it

4. Get API Key and Secret:

   • Click on "Settings" in the top menu bar
   • Click on "Security" tab (left sidebar)
   • Scroll down to "API Keys" section
   • You'll see:
     • API Key: A long string (e.g., 123456789012345)
     • API Secret: A long string (hidden by default)
   • Click on "Reveal" button next to API Secret
   • Copy API Key: Click the copy icon 📋 next to API Key
   • Copy API Secret: Click the copy icon 📋 next to API Secret
   • Save both values - you'll need them

Step 3: Add Credentials to Environment File

1. Open your project in code editor
2. Open .env.local file (Next.js) or .env file (React)
3. Add these lines at the bottom of the file:

For Next.js (.env.local):

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
NEXT_PUBLIC_CLOUDINARY_API_KEY=123456789012345
NEXT_PUBLIC_CLOUDINARY_API_SECRET=your_api_secret_here

For Vite (.env):

VITE_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
VITE_CLOUDINARY_API_KEY=123456789012345
VITE_CLOUDINARY_API_SECRET=your_api_secret_here

For CRA (.env):

REACT_APP_CLOUDINARY_CLOUD_NAME=dxxxxxxxxx
REACT_APP_CLOUDINARY_API_KEY=123456789012345
REACT_APP_CLOUDINARY_API_SECRET=your_api_secret_here

4. Replace the values:
   • Replace dxxxxxxxxx with your actual Cloud Name
   • Replace 123456789012345 with your actual API Key
   • Replace your_api_secret_here with your actual API Secret
5. Save the file (Ctrl+S or Cmd+S)

✅ Cloudinary Setup Complete

• [ ] Cloudinary account created
• [ ] Email verified
• [ ] Cloud Name copied
• [ ] API Key copied
• [ ] API Secret copied
• [ ] Credentials added to .env file
• [ ] File saved

Note: Cloudinary is optional but highly recommended for image uploads. If you don't set it up, image uploads may not work properly.

📝 Complete Command Guide (Start to End)

For Next.js Project - Complete Command Sequence

Open Terminal in your Next.js project directory and run these commands in order:

# Step 1: Install the package
npm install react-bms

# Step 2: Install all required peer dependencies
npm install react react-dom next lucide-react quill react-quill-new

# Step 3: Create or update next.config.js with transpilePackages
# See "Step 1: Configure Next.js" section above

# Step 4: Run the setup tool (this will create files automatically)
npx i-bms

# Step 5: Clear Next.js cache (IMPORTANT!)
rm -rf .next

# Step 6: Create .env.local file and add Firebase & Cloudinary credentials
# Follow the "Firebase Setup" and "Cloudinary Setup" sections above

# Step 7: Start the development server
npm run dev

# Step 7: Open browser and go to:
# http://localhost:3000/bms (Admin Panel)
# http://localhost:3000/blogs (Blog List)

For React.js (Vite) Project - Complete Command Sequence

Open Terminal in your Vite project directory and run these commands in order:

# Step 1: Install the package
npm install react-bms

# Step 2: Install all required peer dependencies
npm install react react-dom react-router-dom lucide-react quill react-quill-new

# Step 3: Run the setup tool (this will create files automatically)
npx i-bms

# Step 4: Set up Router in your main App.jsx or main.jsx
# Follow the "Setup for React.js" section above

# Step 5: Create .env file and add Firebase & Cloudinary credentials
# Follow the "Firebase Setup" and "Cloudinary Setup" sections above

# Step 6: Start the development server
npm run dev

# Step 7: Open browser and go to:
# http://localhost:5173/bms (Admin Panel)
# http://localhost:5173/blogs (Blog List)

For React.js (CRA) Project - Complete Command Sequence

Open Terminal in your CRA project directory and run these commands in order:

# Step 1: Install the package
npm install react-bms

# Step 2: Install all required peer dependencies
npm install react react-dom react-router-dom lucide-react quill react-quill-new

# Step 3: Run the setup tool (this will create files automatically)
npx i-bms

# Step 4: Set up Router in your main App.js
# Follow the "Setup for React.js" section above

# Step 5: Create .env file and add Firebase & Cloudinary credentials
# Follow the "Firebase Setup" and "Cloudinary Setup" sections above

# Step 6: Start the development server
npm start

# Step 7: Open browser and go to:
# http://localhost:3000/bms (Admin Panel)
# http://localhost:3000/blogs (Blog List)

✅ Setup Checklist

• [ ] Package installed
• [ ] Peer dependencies installed
• [ ] next.config.js configured (Next.js only)
• [ ] Routes/pages created
• [ ] Firebase project created
• [ ] Firebase services enabled (Auth, Firestore, Storage)
• [ ] Firebase credentials added to .env
• [ ] Firebase security rules configured
• [ ] Cloudinary account created
• [ ] Cloudinary credentials added to .env
• [ ] Admin user created in Firebase
• [ ] Dev server running
• [ ] Can access /bms route

🎯 Quick Reference

Available Exports

You can import these from react-bms:

import { 
  BmsAdminPanel,  // Admin panel component
  BlogList,       // Blog listing page component
  BlogPage,       // Individual blog post page component
  getBlogs,       // Function to fetch all blogs
  addBlog,        // Function to add a new blog
  updateBlog,     // Function to update a blog
  deleteBlog      // Function to delete a blog
} from 'react-bms';

Routes

• Admin Panel: /bms
• Blog List: /blogs
• Single Blog: /blogs/[slug]

Environment Variables Required

Firebase (Required):

• API Key
• Auth Domain
• Project ID
• Storage Bucket
• Messaging Sender ID
• App ID
• Measurement ID

Cloudinary (Optional but Recommended):

• Cloud Name
• API Key
• API Secret

🆘 Troubleshooting

Module Not Found: Can't resolve 'react-bms'

This error occurs when Next.js can't find the published package. Follow these steps:

Step 1: Verify package is installed

npm list react-bms

Step 2: Ensure next.config.js has transpilePackages

const nextConfig = {
  transpilePackages: ['react-bms'], // This is REQUIRED
}

Step 3: Clear cache and reinstall

# Clear Next.js cache
rm -rf .next

# Optional: Clear node_modules and reinstall
rm -rf node_modules
npm install

# Restart dev server
npm run dev

Step 4: If still not working, check package version

npm install react-bms@latest

Module Not Found: Can't resolve '../utils/blogApi'

This error occurs in copied page files. The components now automatically handle this, but if you see this error:

Solution: Update your page files to import directly from react-bms:

// Instead of using copied files, import directly:
'use client'
import { BlogList } from 'react-bms'

export default function BlogsPage() {
  return <BlogList />
}

Or re-run the CLI tool to get updated files:

npx i-bms

Firebase Not Working

• Check .env file exists
• Verify all variables have correct prefix (NEXT_PUBLIC_, VITE_, or REACT_APP_)
• Restart dev server after adding env variables

Permission Errors

• Check Firebase security rules are published
• Verify rules allow read/write operations

Next.js Build Errors

If you encounter build errors after installing the package:

1. Clear all caches:

   rm -rf .next node_modules package-lock.json
   npm install

2. Verify next.config.js:

   • Make sure transpilePackages: ['react-bms'] is present
   • Restart dev server after config changes

3. Check Next.js version:

   • Requires Next.js 13+ for App Router
   • Requires Next.js 12+ for Pages Router

📄 License

MIT License