Ecommerce MERN Dashboard

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

然后，启动服务器

 $ npm run dev 

运行后停止服务器。这会将演示数据推送到您的 mongodb 数据库。

运行后端

 $ npm run dev 

最终应用程序

通过https://localhost:5002访问 Web 应用程序。

（注意： client和server应同时运行，Web 应用程序才能正常运行。）

用法

1. 浏览client/目录以了解 UI 组件和数据可视化。
2. 请参阅server/目录中的代码以掌握 API 端点和数据处理。

执照

该项目已获得 MIT 许可证的许可。