Ecommerce MERN Dashboard

MERN Stack Admin Dashboard-Projekt

Dieses Repository stellt eine umfassende Admin-Dashboard-Anwendung vor, die mit den Stapeln MongoDB, Express.js, React und Node.js (MERN) erstellt wurde.

Demo-Link: https://admindash.romansth.com

Screenshot:

Merkmale

• Responsive UI: Das Frontend wurde mithilfe von Material UI-Komponenten für eine optisch ansprechende und reaktionsfähige Benutzeroberfläche entwickelt.
• Datenvisualisierung: Mithilfe von Nivo Charts bietet das Projekt aufschlussreiche Datenvisualisierungen für eine bessere Dateninterpretation.
• Datenverwaltung: Redux Toolkit und Redux Toolkit Query verwalten Daten effizient und verbessern so die Benutzererfahrung.
• Leistungsstarkes Backend: Das Backend basiert auf Node.js, Express.js, Mongoose und MongoDB und gewährleistet eine robuste Datenverarbeitung.
• Mehrere Seiten: Entdecken Sie verschiedene Seiten, darunter Produkte, Kunden, Transaktionen und mehr, jede mit unterschiedlichen Funktionen.

Verwendete Technologien

• MongoDB
• Express.js
• Reagieren
• Node.js
• Material-Benutzeroberfläche
• Material-UI-Datenraster
• Nivo-Charts
• Redux-Toolkit
• Redux Toolkit-Abfrage
• Mungo
• RESTful-APIs

Projektstruktur

• server/ : Backend-Quellcode und Konfigurationsdateien.
• client/ : Frontend-Quellcode, Komponenten und Stile.
• screenshots/ : Screenshots, die die verschiedenen Seiten der Anwendung zeigen.

Erste Schritte

Voraussetzungen

• MongoDB
• Knoten
• npm

Klonen Sie das Repository

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

Clientseitige Nutzung

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

Serverseitige Nutzung

npm installieren

 $ cd server  
$ npm i      

Richten Sie Mongodb ein

Erstellen Sie ein Konto bei MongoDB. Erstellen Sie eine neue Datenbank. Gehen Sie zu connect -> node js -> Kopieren Sie das Token.

Erstellen Sie eine .env Datei im Basisverzeichnis des Servers und fügen Sie Folgendes hinzu:

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

Gehen Sie als Nächstes zu /server/index.js und kommentieren Sie diese Zeilen aus:

 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 ) ;

Starten Sie dann den Server

 $ npm run dev 

Stoppen Sie den Server, nachdem er ausgeführt wurde. Dadurch werden die Demodaten in Ihre Mongodb-Datenbank übertragen.

Backend ausführen

 $ npm run dev 

Endgültige App

Greifen Sie auf die Web-App unter https://localhost:5002 zu.

(Hinweis: Sowohl client als auch server sollten gleichzeitig ausgeführt werden, damit die Web-App funktioniert.)

Verwendung

1. Erkunden Sie das Verzeichnis client/ “, um die UI-Komponenten und Datenvisualisierungen zu verstehen.
2. Sehen Sie sich den Code im Verzeichnis server/ an, um die API-Endpunkte und die Datenverarbeitung zu verstehen.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.