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
• ตอบสนอง
• โหนด js
• UI วัสดุ
• ตารางข้อมูล UI ของวัสดุ
• แผนภูมิ Nivo
• ชุดเครื่องมือ Redux
• แบบสอบถามชุดเครื่องมือ Redux
• พังพอน
• RESTful API

โครงสร้างโครงการ

• server/ : ซอร์สโค้ดแบ็กเอนด์และไฟล์การกำหนดค่า
• client/ : ซอร์สโค้ดส่วนหน้า ส่วนประกอบ และสไตล์
• screenshots/ : ภาพหน้าจอที่แสดงหน้าต่างๆ ของแอปพลิเคชัน

เริ่มต้นใช้งาน

ข้อกำหนดเบื้องต้น

• MongoDB
• โหนด
• เวลา 22.00 น

โคลนพื้นที่เก็บข้อมูล

 $ 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

(หมายเหตุ: ทั้ง client และ server ควรทำงานพร้อมกันเพื่อให้เว็บแอปทำงานได้)

การใช้งาน

1. สำรวจ client/ ไดเร็กทอรีเพื่อทำความเข้าใจส่วนประกอบ UI และการแสดงภาพข้อมูล
2. โปรดดูโค้ดในไดเรกทอรี server/ เพื่อทำความเข้าใจจุดสิ้นสุด API และการจัดการข้อมูล

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT