Admin Analytics Dashboard

A full-stack role-based admin dashboard for business analytics and internal tools. Built using React, Zustand, Node.js, MongoDB, JWT Auth, and Recharts.

---

✨ Features

• 🔐 RBAC (Role-Based Access Control): Admin and User roles with protected routes
• 📊 Analytics Dashboard: Interactive charts using Recharts
• 🌗 Dark/Light Mode: Switchable theme using Zustand state
• 🔄 Realtime Simulated Tracking: Users and events are generated in real-time
• 🧪 Test Data: Auto-generated user and event records on backend start
• 🛡️ JWT Authentication: Secure login, token-based session management

---

🗂️ Project Structure

admin-analytics-dashboard/
├── backend/                # Express + MongoDB API
│   ├── controllers/        # Logic for auth and dashboard
│   ├── models/             # Mongoose models (User, Event)
│   ├── routes/             # API endpoints (auth, dashboard)
│   ├── middleware/         # JWT auth middleware
│   ├── utils/              # Helper to generate test data
│   └── server.js           # Server entry point
│
├── frontend/               # React + Zustand dashboard
│   ├── public/             # Static assets
│   ├── src/
│   │   ├── components/     # UI components
│   │   ├── pages/          # Login and Dashboard pages
│   │   ├── store/          # Zustand stores for auth/theme
│   │   ├── App.jsx         # Routes + layout
│   │   └── main.jsx        # ReactDOM root
│
├── README.md               # Project setup + code flow
└── package.json            # (Optional) root configuration

---

🚀 Setup Instructions

1. Clone & Navigate

git clone https://github.com/your-repo/admin-analytics-dashboard.git
cd admin-analytics-dashboard

2. Backend Setup

cd backend
npm install
# Create .env file with:
# MONGO_URI=mongodb://localhost:27017/analytics_dashboard
# JWT_SECRET=yourSecretKey
node server.js

3. Frontend Setup

cd frontend
npm install
npm run dev

---

🔁 Code Flow

🔒 Authentication Flow

• User hits /login endpoint with credentials
• JWT is returned on success
• Token is saved in Zustand store and used in protected frontend requests
• Middleware auth.js verifies token and decodes user role

📈 Dashboard Flow

• Frontend loads /dashboard via API
• Backend aggregates sample analytics (user count, events per role, timestamps)
• Frontend renders charts using Recharts
• Zustand handles dark/light mode state and auth session

🧪 Data Generation

• On server start, generateTestData.js runs:
  • Creates 5 test users (admin + users)
  • Simulates 50+ user events (logins, actions)
  • MongoDB collections users and events are populated

---

📧 Author Information

Author: Ravi Chauhan
Email: ravischauhan007@gmail.com
Contact: +91 97222 73666

---

📘 License

This project is open source and free to use for educational or commercial purposes.

---

Happy Building! 🚀