Ecommerce MERN Dashboard下載 - Ecommerce MERN Dashboard原始碼下載

Ecommerce MERN Dashboard

其他類別

1.0.0

下載

MERN Stack 管理儀表板項目

此儲存庫展示了使用 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 構建，確保穩健的資料處理。
多個頁面：探索各種頁面，包括產品、客戶、交易等，每個頁面都有不同的功能。

使用的技術

MongoDB
Express.js
反應
Node.js
材質使用者介面
材質 UI 資料網格
尼沃圖表
Redux 工具包
Redux 工具包查詢
貓鼬
RESTful API

專案結構

server/ ：後端原始碼和設定檔。
client/ ：前端原始碼、元件和樣式。
screenshots/ ：展示應用程式不同頁面的螢幕截圖。

入門

先決條件

MongoDB
節點
新專案管理

克隆儲存庫

 $ 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

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