🔐 MERN Admin Dashboard – Admin Panel with Authentication and Authorization

This project is a full-stack Admin Dashboard application built using the MERN Stack (MongoDB, Express.js, React, Node.js) with a complete Authentication and Authorization system.

It allows admins to sign up, log in securely, change passwords, and manage categories, subcategories, and products, including product image upload, update, and removal, along with a dashboard that displays overall statistics.

The backend uses MongoDB populate to maintain relationships between Category, Subcategory, and Product.
The frontend is developed using React with a clean and admin-friendly interface.

The application follows a secure real-world admin panel flow with protected routes and authorized access.

---

🚀 Features

• 🔐 Authentication & Authorization

  • Secure admin signup and login
  • JWT based authentication
  • Protected dashboard routes
  • Change password functionality

• 📁 Category Management

  • Add new categories
  • View category list
  • Update and remove categories

• 📂 Subcategory Management

  • Add subcategories under categories
  • Category name fetched using MongoDB populate
  • View subcategories with category reference

• 📦 Product Management

  • Add products with category & subcategory
  • Upload product image from frontend
  • Update product details and image
  • Remove products

• 🖼️ Product Image Upload

  • Image upload using Multer
  • Existing image preview
  • Image replace support

• 📊 Admin Dashboard

  • Total number of categories
  • Total number of subcategories
  • Total number of products
  • Total sum of all product prices

• ⚡ Secure MERN Stack Integration

  • React frontend
  • Node.js & Express backend
  • MongoDB with populated relations
  • Auth protected APIs

---

🛠️ Tech Stack

React — Frontend library for building UI

Node.js — Backend runtime environment

Express.js — Backend framework for APIs

MongoDB — Database with populate relations

CSS / Bootstrap — Styling and responsive UI

---

📸 Project Preview

📊 Dashboard

🔐 Login

📝 Signup

🔁 Change Password

➕ Add Category

📁 View Category

➕ Add Subcategory

📂 View Subcategory

➕ Add Product

📦 View Product

---

⚙️ How It Works

1. Admin registers or logs in securely.
2. JWT verifies authorized access to dashboard routes.
3. Categories are created first.
4. Subcategories are linked to categories using populate.
5. Products are added with category, subcategory, and image upload.
6. Dashboard dynamically displays system statistics.
7. Admin can change password anytime securely.

---

🌟 Highlights

• Secure Authentication & Authorization flow
• Protected admin panel routes
• MongoDB populate for relational data
• Image upload with preview and replace
• Clean admin dashboard UI
• Real-world MERN stack project

---

👨‍💻 Author

Developed by Nirav Thakor
MERN Stack Developer 🚀