Ecommerce MERN Dashboard

MERN 스택 관리 대시보드 프로젝트

이 저장소는 MongoDB, Express.js, React 및 Node.js(MERN) 스택을 사용하여 구축된 포괄적인 관리 대시보드 애플리케이션을 보여줍니다.

데모 링크: https://admindash.romansth.com

스크린샷:

특징

• 반응형 UI: 프런트엔드는 시각적으로 매력적이고 반응성이 뛰어난 사용자 인터페이스를 위해 Material UI 구성요소를 사용하여 설계되었습니다.
• 데이터 시각화: 이 프로젝트는 Nivo Charts를 활용하여 더 나은 데이터 해석을 위한 통찰력 있는 데이터 시각화를 제공합니다.
• 데이터 관리: Redux Toolkit 및 Redux Toolkit Query는 데이터를 효율적으로 관리하여 사용자 경험을 향상시킵니다.
• 강력한 백엔드: 백엔드는 Node.js, Express.js, Mongoose 및 MongoDB를 기반으로 구축되어 강력한 데이터 처리를 보장합니다.
• 여러 페이지: 제품, 고객, 거래 등 각각 고유한 기능을 갖춘 다양한 페이지를 탐색합니다.

사용된 기술

• 몽고DB
• Express.js
• 반응하다
• Node.js
• 머티리얼 UI
• 머티리얼 UI 데이터 그리드
• 니보 차트
• Redux 툴킷
• Redux 툴킷 쿼리
• 몽구스
• RESTful API

프로젝트 구조

• server/ : 백엔드 소스 코드 및 구성 파일입니다.
• client/ : 프런트엔드 소스 코드, 구성 요소 및 스타일입니다.
• screenshots/ : 애플리케이션의 다양한 페이지를 보여주는 스크린샷입니다.

시작하기

전제 조건

• 몽고DB
• 마디
• npm

저장소 복제

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

클라이언트 측 사용법

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

서버측 사용법

npm 설치

 $ cd server  
$ npm i      

몽고디비 설정

MongoDB에 계정을 만듭니다. 새 데이터베이스를 만듭니다. connect -> node js -> 토큰 복사로 이동합니다.

서버 기본 디렉터리에 .env 파일을 만들고 다음을 추가합니다.

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

다음으로, /server/index.js 로 이동하여 다음 줄의 주석 처리를 제거하세요.

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

그런 다음 서버를 시작하십시오.

 $ npm run dev 

서버가 실행된 후 중지합니다. 그러면 데모 데이터가 mongodb 데이터베이스로 푸시됩니다.

백엔드 실행

 $ npm run dev 

최종 앱

https://localhost:5002 에서 웹 앱에 액세스합니다.

(참고: 웹 앱이 작동하려면 client 와 server 동시에 실행되어야 합니다.)

용법

1. UI 구성 요소와 데이터 시각화를 이해하려면 client/ 디렉터리를 탐색하세요.
2. API 엔드포인트와 데이터 처리를 파악하려면 server/ 디렉터리의 코드를 참조하세요.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다.