MERN Admin Dashboard

A full-stack admin dashboard built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring data visualization, user management, and responsive design.

🚀 Features

• Modern UI: Built with Material-UI components for a professional look
• Data Visualization: Interactive charts and graphs using Nivo libraries
• User Authentication: Secure login and authorization system
• Responsive Design: Mobile-friendly interface that works on all devices
• Real-time Data: Live updates and real-time dashboard metrics
• RESTful API: Well-structured backend API with Express.js
• Database Integration: MongoDB with Mongoose for data persistence
• State Management: Redux Toolkit for efficient state handling
• Development Tools: Hot reload, debugging, and testing setup

🛠️ Tech Stack

Frontend

• React 18.2.0 - UI framework
• Material-UI 5.10.15 - Component library
• Redux Toolkit - State management
• React Router 6.4.3 - Client-side routing
• Nivo Charts - Data visualization
• Axios - HTTP client

Backend

• Node.js - Runtime environment
• Express.js 4.21.2 - Web framework
• MongoDB - Database
• Mongoose 8.9.3 - ODM for MongoDB
• JWT - Authentication tokens
• Helmet - Security middleware
• CORS - Cross-origin resource sharing
• Morgan - HTTP request logger

Development Tools

• Nodemon - Auto-restart server
• ESLint - Code linting
• Jest - Testing framework
• Git - Version control

📁 Project Structure

mern-admin-dashboard/
├── client/                 # React frontend application
│   ├── public/            # Static assets
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── redux/         # Redux store and slices
│   │   ├── utils/         # Utility functions
│   │   └── App.js         # Main App component
│   └── package.json       # Frontend dependencies
├── server/                # Express.js backend
│   ├── controllers/       # Route controllers
│   ├── models/           # MongoDB models
│   ├── routes/           # API routes
│   ├── middleware/       # Custom middleware
│   ├── config/           # Database and server config
│   └── index.js          # Server entry point
├── scripts/              # Build and deployment scripts
│   └── release.sh        # Release management script
├── .gitignore           # Git ignore rules
├── README.md            # Project documentation
├── RELEASE_NOTES.md     # Version release notes
└── package.json         # Root package.json

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local installation or MongoDB Atlas)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/mern-admin-dashboard.git
   cd mern-admin-dashboard

2. Install dependencies

   # Install server dependencies
   cd server
   npm install
   
   # Install client dependencies
   cd ../client
   npm install

3. Environment Setup

   Create a .env file in the server directory:

   # Server Configuration
   PORT=5000
   NODE_ENV=development
   
   # Database
   MONGODB_URI=mongodb://localhost:27017/admin_dashboard
   # Or use MongoDB Atlas
   # MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/admin_dashboard
   
   # JWT Secret
   JWT_SECRET=your_super_secret_jwt_key_here
   
   # CORS
   CLIENT_URL=http://localhost:3000

4. Start the development servers

   Terminal 1 - Backend Server:

   cd server
   npm run dev

   Terminal 2 - Frontend Server:

   cd client
   npm start

5. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000

📖 API Documentation

Authentication Endpoints

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• GET /api/auth/profile - Get user profile

Dashboard Endpoints

• GET /api/dashboard/stats - Get dashboard statistics
• GET /api/dashboard/users - Get user data
• GET /api/dashboard/performance - Get performance metrics

Data Management

• GET /api/data/users - Get all users
• POST /api/data/users - Create new user
• PUT /api/data/users/:id - Update user
• DELETE /api/data/users/:id - Delete user

🧪 Testing

Frontend Tests

cd client
npm test

Backend Tests

cd server
npm test

📦 Build for Production

Frontend Build

cd client
npm run build

Backend Production Setup

cd server
npm start

🚀 Deployment

Environment Variables for Production

Create .env file in server directory:

NODE_ENV=production
PORT=5000
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_production_jwt_secret
CLIENT_URL=https://yourdomain.com

Deployment Options

1. Vercel/Netlify (Frontend)
2. Heroku/Railway (Full-stack)
3. AWS/Azure/DigitalOcean (Custom setup)
4. Docker (Containerized deployment)

Docker Deployment

# Build and run with Docker Compose
docker-compose up --build

🔧 Configuration

MongoDB Setup

Local MongoDB:

1. Install MongoDB Community Server
2. Start MongoDB service
3. Update MONGODB_URI in .env

MongoDB Atlas:

1. Create free cluster at MongoDB Atlas
2. Get connection string
3. Update MONGODB_URI in .env

Customization

• Theme: Modify Material-UI theme in client/src/theme.js
• API Routes: Add new routes in server/routes/
• Database Models: Create new models in server/models/

📊 Features in Detail

Dashboard Components

• Overview Cards: Key metrics and KPIs
• Charts: Line charts, bar charts, pie charts
• Data Tables: Sortable and filterable data
• User Management: CRUD operations for users
• Analytics: Performance and usage analytics

Security Features

• JWT Authentication: Secure token-based auth
• Password Hashing: Bcrypt for password security
• CORS Protection: Cross-origin security
• Helmet.js: Security headers
• Input Validation: Data sanitization

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow ESLint rules
• Write meaningful commit messages
• Add tests for new features
• Update documentation

📝 Version Management

This project follows Semantic Versioning.

Release Process

# Automated release script
./scripts/release.sh [patch|minor|major]

# Manual release
git tag -a v1.0.1 -m "Release description"
git push origin v1.0.1

See RELEASE_NOTES.md for detailed version history.

🐛 Troubleshooting

Common Issues

MongoDB Connection Error:

• Ensure MongoDB is running
• Check connection string in .env
• Verify network connectivity

CORS Issues:

• Check CLIENT_URL in server .env
• Ensure proper CORS configuration

Build Errors:

• Clear node_modules and reinstall
• Check Node.js version compatibility
• Verify all dependencies are installed

Getting Help

• Check Issues
• Review Documentation
• Join our Discord Community

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

• Your Name - Initial work - YourUsername

🙏 Acknowledgments

• Material-UI for the excellent component library
• Nivo for amazing data visualization
• Create React App for the boilerplate
• Express.js for the robust backend framework

---

⭐ If this project helped you, please give it a star!