MERN Stack Admin Dashboard

Build and Deploy a MERN Stack Admin Dashboard. For frontend, we will be using Material UI, Material UI Data Grid, Nivo Charts, Redux Toolkit and Redux Toolkit Query. For backend, we will be using Node JS, Express Js, Mongoose, and MongoDB. We will also go through how to Data Model using Entity Relationship Diagrams as well as making aggregate calls in MongoDB.
Explore the site »

View Demo · Report Bug · Request Feature

🌟 About the Project

Explore a versatile Admin Dashboard App designed to seamlessly manage and interact with your backend system. Empowered with MongoDB integration, this platform enables efficient communication and interaction with your database, ensuring streamlined data management and robust backend operations. Dive into a comprehensive dashboard experience tailored to enhance your administrative tasks and MongoDB functionalities.

Project Technological Stack:

• Backend: MongoDB for efficient and scalable data management.
• Frontend: React for dynamic and interactive user interfaces.
• State Management: Redux for predictable state handling.
• Design: Figma for seamless UI/UX design creation.

Features:

•  Interactive Data Display: Material UI Data Grid for user-friendly tables.
  

•  Visual Data Representation: Nivo Charts for effective data visualization.
  

•  State Management: Redux Toolkit for predictable state handling.
  

•  Backend Setup: Node.js and Express.js for server-side operations.
  

•  Database Handling: Mongoose for MongoDB interaction.
  

•  Data Aggregation: MongoDB aggregate calls for efficient querying.
  

•  Design and UI: Material UI for consistent frontend design.
  

•  ERD Implementation: Entity Relationship Diagrams for data modeling.
  

Getting Started

Prerequisites

**Note**: This app requires API key from MongoDB Account

1. Download Node.js and npm (follow instructions here)

2. Git clone and cd into the repo folder:

https://github.com/Carlosaj18/Fullstack-React-Admin-App.git && cd admin-clone

3. Install all dependencies

npm install

4. In root directory of the server, create a .env file

.env

5. In root directory of the client, create a .env.local file

.env.local

6. In the .env file, create following environment variables:

MONGO_URL = YOUR_MONGO_API_KEY
PORT = 5001

7. In the .env.local file, create following environment variables:

REACT_APP_BASE_URL = http://localhost:5001

8. Run the server

npm start
#for deployed version

npm run dev
#for deployed version

9. Run the client

npm start
#for deployed version

10. Access the project in your browser at localhost:3000/

(back to top)

Demo & Showcasing:

📷 Screenshots

AdminDashboard.mp4

Data Model

https://lucid.app/lucidchart/81ff5432-cc50-4c41-a7b8-7258fec1e630/view?page=0_0#

Live Site

• Admin Dashboard is a responsive web app can be viewed on any device.

Contact

(back to top)