Ecommerce MERN Dashboard

Projeto de painel de administração MERN Stack

Este repositório apresenta um aplicativo de painel de administração abrangente criado usando a pilha MongoDB, Express.js, React e Node.js (MERN).

Link de demonstração: https://admindash.romansth.com

Captura de tela:

Características

• UI responsiva: o frontend é projetado usando componentes Material UI para uma interface de usuário visualmente atraente e responsiva.
• Visualização de dados: Utilizando Nivo Charts, o projeto oferece visualizações de dados criteriosas para melhor interpretação dos dados.
• Gerenciamento de dados: Redux Toolkit e Redux Toolkit Query gerenciam dados de forma eficiente, melhorando a experiência do usuário.
• Backend poderoso: O backend é construído em Node.js, Express.js, Mongoose e MongoDB, garantindo um manuseio robusto de dados.
• Múltiplas páginas: explore várias páginas, incluindo Produtos, Clientes, Transações e muito mais, cada uma com funcionalidades distintas.

Tecnologias Utilizadas

• MongoDB
• Expresso.js
• Reagir
• Node.js
• IU de materiais
• Grade de dados da IU de materiais
• Gráficos Nivo
• Kit de ferramentas Redux
• Consulta do kit de ferramentas Redux
• Mangusto
• APIs RESTful

Estrutura do Projeto

• server/ : código-fonte de back-end e arquivos de configuração.
• client/ : código-fonte, componentes e estilos do frontend.
• screenshots/ : Capturas de tela mostrando as diferentes páginas do aplicativo.

Começando

Pré-requisitos

• MongoDB
• Nó
• npm

Clonar o repositório

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

Uso do lado do cliente

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

Uso do lado do servidor

instalação npm

 $ cd server  
$ npm i      

Configurar o Mongodb

Crie uma conta no MongoDB. Crie um novo banco de dados. Vá para connect -> node js -> copie o token.

Crie um arquivo .env no diretório base do servidor e adicione o seguinte:

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

Em seguida, vá para /server/index.js e remova o comentário destas linhas:

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

Então, inicie o servidor

 $ npm run dev 

Pare o servidor após sua execução. Isso enviará os dados de demonstração para seu banco de dados mongodb.

Executar back-end

 $ npm run dev 

Aplicativo final

Acesse o aplicativo da web em https://localhost:5002 .

(Observação: client e server devem ser executados simultaneamente para que o aplicativo Web funcione.)

Uso

1. Explore o diretório client/ para entender os componentes da UI e as visualizações de dados.
2. Consulte o código no diretório server/ para compreender os terminais da API e o tratamento de dados.

Licença

Este projeto está licenciado sob a licença MIT.