MERN Stack Admin Dashboard Project

This repository showcases a comprehensive admin dashboard application built using the MongoDB, Express.js, React, and Node.js (MERN) stack.

Demo link: https://admindash.romansth.com

Screenshot:

Features

• Responsive UI: The frontend is designed using Material UI components for a visually appealing and responsive user interface.
• Data Visualization: Utilizing Nivo Charts, the project offers insightful data visualizations for better data interpretation.
• Data Management: Redux Toolkit and Redux Toolkit Query manage data efficiently, enhancing user experience.
• Powerful Backend: The backend is built on Node.js, Express.js, Mongoose, and MongoDB, ensuring robust data handling.
• Multiple Pages: Explore various pages including Products, Customers, Transactions, and more, each with distinct functionalities.

Technologies Used

• MongoDB
• Express.js
• React
• Node.js
• Material UI
• Material UI Data Grid
• Nivo Charts
• Redux Toolkit
• Redux Toolkit Query
• Mongoose
• RESTful APIs

Project Structure

• server/: Backend source code and configuration files.
• client/: Frontend source code, components, and styles.
• screenshots/: Screenshots showcasing the application's different pages.

Getting Started

Prerequisites

• MongoDB
• Node
• npm

Clone the repository

$ git clone https://github.com/Romansth/Ecommerce-MERN-Dashboard.git

Client-side usage

$ cd client    
$ echo "REACT_APP_BASE_URL= http://localhost:5002" >> src/.env.local  
$ npm i  
$ npm run build
$ npm start

Server-side usage

npm install

$ cd server  
$ npm i      

Setup Mongodb

Create an account on MongoDB. Create a new database. Go to connect -> node js -> copy the token.

Create a .env file in the server base directory and add the following:

MONGO_URL = 'YOUR_MONGODB_TOKEN'
PORT= 5002

Next, go to /server/index.js and uncomment these lines:

data imports
import  User  from  "./models/User.js";
import  Product  from  "./models/Product.js";
import  ProductStat  from  './models/ProductStat.js';
import  Transaction  from  './models/Transaction.js';
import  OverallStat  from  './models/OverallStat.js';
import  AffiliateStat  from  './models/AffiliateStat.js';
import {
dataUser, dataProduct, dataProductStat, dataTransaction, dataOverallStat, dataAffiliateStat
} from  "./data/index.js";

/* ONLY ADD DATA ONE TIME */
AffiliateStat.insertMany(dataAffiliateStat);
OverallStat.insertMany(dataOverallStat);
Transaction.insertMany(dataTransaction);
Product.insertMany(dataProduct);
ProductStat.insertMany(dataProductStat);
User.insertMany(dataUser);

Then, start the server

$ npm run dev 

Stop the server after it runs. This will push the demo data to your mongodb database.

Run backend

$ npm run dev 

Final App

Access the web app on https://localhost:5002.

(Note: both client and server should run concurrently for the web app to function.)

Usage

1. Explore the client/ directory to understand the UI components and data visualizations.
2. Refer to the code in the server/ directory to grasp the API endpoints and data handling.

License

This project is licensed under the MIT License.