Ecommerce MERN Dashboard

Proyecto de panel de administración de pila MERN

Este repositorio muestra una aplicación de panel de administración integral creada con la pila MongoDB, Express.js, React y Node.js (MERN).

Enlace de demostración: https://admindash.romansth.com

Captura de pantalla:

Características

• Interfaz de usuario responsiva: la interfaz está diseñada utilizando componentes Material UI para una interfaz de usuario visualmente atractiva y responsiva.
• Visualización de datos: utilizando Nivo Charts, el proyecto ofrece visualizaciones de datos detalladas para una mejor interpretación de los datos.
• Gestión de datos: Redux Toolkit y Redux Toolkit Query gestionan los datos de manera eficiente, mejorando la experiencia del usuario.
• Potente backend: el backend se basa en Node.js, Express.js, Mongoose y MongoDB, lo que garantiza un manejo sólido de los datos.
• Varias páginas: explore varias páginas, incluidas Productos, Clientes, Transacciones y más, cada una con distintas funcionalidades.

Tecnologías utilizadas

• MongoDB
• expreso.js
• Reaccionar
• Nodo.js
• Interfaz de usuario de materiales
• Cuadrícula de datos de la interfaz de usuario de materiales
• Gráficos Nivo
• Kit de herramientas Redux
• Consulta del kit de herramientas de Redux
• Mangosta
• API RESTful

Estructura del proyecto

• server/ : Código fuente backend y archivos de configuración.
• client/ : Código fuente, componentes y estilos de frontend.
• screenshots/ : Capturas de pantalla que muestran las diferentes páginas de la aplicación.

Empezando

Requisitos previos

• MongoDB
• Nodo
• mpn

Clonar el repositorio

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

Uso del lado del cliente

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

Uso del lado del servidor

instalación npm

 $ cd server  
$ npm i      

Configurar mongodb

Cree una cuenta en MongoDB. Crea una nueva base de datos. Vaya a connect -> node js -> copie el token.

Cree un archivo .env en el directorio base del servidor y agregue lo siguiente:

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

A continuación, vaya a /server/index.js y descomente estas líneas:

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

Luego, inicie el servidor.

 $ npm run dev 

Detenga el servidor después de que se ejecute. Esto enviará los datos de demostración a su base de datos mongodb.

Ejecutar backend

 $ npm run dev 

Aplicación final

Acceda a la aplicación web en https://localhost:5002 .

(Nota: tanto client como server deben ejecutarse simultáneamente para que funcione la aplicación web).

Uso

1. Explore el directorio client/ para comprender los componentes de la interfaz de usuario y las visualizaciones de datos.
2. Consulte el código en el directorio server/ para comprender los puntos finales de la API y el manejo de datos.

Licencia

Este proyecto está bajo la licencia MIT.