Ecommerce MERN Dashboard

Projet de tableau de bord d'administration MERN Stack

Ce référentiel présente une application complète de tableau de bord d'administration construite à l'aide de la pile MongoDB, Express.js, React et Node.js (MERN).

Lien de démonstration : https://admindash.romansth.com

Capture d'écran :

Caractéristiques

• Interface utilisateur réactive : l'interface utilisateur est conçue à l'aide de composants Material UI pour une interface utilisateur visuellement attrayante et réactive.
• Visualisation des données : grâce à Nivo Charts, le projet propose des visualisations de données perspicaces pour une meilleure interprétation des données.
• Gestion des données : Redux Toolkit et Redux Toolkit Query gèrent les données efficacement, améliorant ainsi l'expérience utilisateur.
• Backend puissant : le backend est construit sur Node.js, Express.js, Mongoose et MongoDB, garantissant une gestion robuste des données.
• Pages multiples : explorez différentes pages, notamment Produits, Clients, Transactions, etc., chacune avec des fonctionnalités distinctes.

Technologies utilisées

• MongoDB
• Express.js
• Réagir
• Noeud.js
• Interface utilisateur matérielle
• Grille de données matérielles de l'interface utilisateur
• Graphiques Nivo
• Boîte à outils Redux
• Requête de la boîte à outils Redux
• Mangouste
• API RESTful

Structure du projet

• server/ : Code source backend et fichiers de configuration.
• client/ : code source, composants et styles du frontend.
• screenshots/ : Captures d'écran présentant les différentes pages de l'application.

Commencer

Conditions préalables

• MongoDB
• Nœud
• npm

Cloner le référentiel

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

Utilisation côté client

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

Utilisation côté serveur

installation npm

 $ cd server  
$ npm i      

Configurer MongoDB

Créez un compte sur MongoDB. Créez une nouvelle base de données. Allez dans connect -> node js -> copiez le jeton.

Créez un fichier .env dans le répertoire de base du serveur et ajoutez les éléments suivants :

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

Ensuite, allez dans /server/index.js et décommentez ces lignes :

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

Ensuite, démarrez le serveur

 $ npm run dev 

Arrêtez le serveur après son exécution. Cela transférera les données de démonstration vers votre base de données mongodb.

Exécuter le back-end

 $ npm run dev 

Application finale

Accédez à l'application Web sur https://localhost:5002 .

(Remarque : client et server doivent s'exécuter simultanément pour que l'application Web fonctionne.)

Usage

1. Explorez le répertoire client/ pour comprendre les composants de l'interface utilisateur et les visualisations de données.
2. Reportez-vous au code dans le répertoire server/ pour comprendre les points de terminaison de l'API et la gestion des données.

Licence

Ce projet est sous licence MIT.