adminApp

✍️adminApp

adminApp เป็นแอปพลิเคชันอีคอมเมิร์ซ MERN stack (ฝั่งผู้ดูแลระบบเท่านั้น)

⚛️ เทคสแต็คที่ใช้แล้ว

• React.js
• Tailwindcss
• โหนด & Express.js
• MongoDB
• Mongoose: สำหรับการตรวจสอบสคีมาและการเชื่อมต่อฐานข้อมูลทั้งหมด
• Day.js: สำหรับรูปแบบวันที่
• JsonwebToken: สำหรับสร้าง jsonwebtoken
• BcryptJs: สำหรับการเข้ารหัสรหัสผ่าน
• Dotenv: สำหรับใช้ตัวแปรสภาพแวดล้อม
• Nodemon: สำหรับการทำงานบนเซิร์ฟเวอร์ dev

คุณสมบัติหลัก

• ตอบสนองอย่างเต็มที่และใช้งานง่าย
• โหมดมืดและสว่าง
• พื้นที่แจ้งเตือน
• เพิ่ม อัปเดต และลบผลิตภัณฑ์
• สร้าง อัปเดต และลบหมวดหมู่
• ลงทะเบียน อัปเดต และลบพนักงาน
• ค้นหาเจ้าหน้าที่ (ตามชื่อ อีเมล และหมายเลขโทรศัพท์)
• สร้าง อัปเดต และลบคูปอง
• นำเข้าและส่งออกผลิตภัณฑ์ หมวดหมู่ คูปอง และลูกค้า
• ดาวน์โหลดคำสั่งซื้อ
• ค้นหาและกรองคำสั่งซื้อตาม:
  1. สถานะ (จัดส่งแล้ว รอดำเนินการ ประมวลผล และยกเลิก)
  2. วันที่เริ่มต้นและสิ้นสุด
  3. ชื่อลูกค้าและ
  4. ขีดจำกัดการสั่งซื้อ
• เพิ่ม อัปเดต ลบ และค้นหาภาษาและสกุลเงินต่างประเทศ
• การตั้งค่าสำหรับการควบคุมผู้ดูแลระบบและร้านค้า
• รายชื่อลูกค้าที่ลงทะเบียนทั้งหมดและแสดงยอดสั่งซื้อทั้งหมดเป็นรายบุคคล
• เพิ่ม กปภ
• การแปลแบบไดนามิกในข้อมูลไดนามิกทั้งหมด เช่น ผลิตภัณฑ์ หมวดหมู่ คุณลักษณะ และคูปอง
• คุณสมบัติของผลิตภัณฑ์และการผสมผสาน
• และอื่นๆ อีกมากมาย รวมถึงการตรวจสอบที่จำเป็นทั้งหมด

การเริ่มต้นและการติดตั้ง

1. ติดตั้งโหนดและ npm
2. แยกโครงการ
3. เปิดโครงการในตัวแก้ไขโค้ดที่คุณชื่นชอบ

การติดตั้งแบ็กเอนด์

1. นำทางไปยังไดเร็กทอรี adminApp-backend จากนั้นรันคำสั่งต่อไปนี้เพื่อติดตั้งการขึ้นต่อกัน?:

   npm install

2. กำหนดค่าฐานข้อมูล MongoDB ของคุณ หลังจากกำหนดค่าแล้วคุณจะพบ mongo URI เพียงแค่ใส่สิ่งนั้นลงในไฟล์ .env ตัวแปร MONGO_URI ของคุณ

3. เมื่อคุณเชื่อมต่อกับ MongoDB และกำหนดค่า .env ได้สำเร็จ จากนั้นรัน npm run data:import มันจะรันไฟล์ seed.js และจะนำเข้าข้อมูลสาธิตทั้งหมดบนฐานข้อมูล หากทุกอย่างเรียบร้อยดี แสดงว่าการกำหนดค่าแบ็กเอนด์เสร็จสิ้น ตอนนี้คุณจะพบข้อมูลสาธิตทั้งหมดในฐานข้อมูล MongoDB ของคุณ

4. ตอนนี้รัน npm run dev มันจะรันแบ็กเอนด์ของคุณบนเซิร์ฟเวอร์ภายในเครื่องบน PORT 5055 หรือ PORT อินพุตของคุณ

การติดตั้งผู้ดูแลระบบ

1. นำทางไปยังไดเร็กทอรี adminApp-admin จากนั้นรันคำสั่งต่อไปนี้เพื่อติดตั้งการขึ้นต่อกัน?:

npm install

2. สร้างบัญชี cloudinary จากนั้น รับชื่อ cloudinary ของคุณ API_KEY และ API_SECRET เมื่อเสร็จแล้ว ให้คัดลอกและวางค่าเหล่านี้ไปยังบรรทัด REACT_APP_CLOUD_NAME, REACT_APP_CLOUDINARY_API_KEY และ REACT_APP_CLOUDINARY_API_SECRET ตามลำดับจากไฟล์ . env.local
3. ตอนนี้รัน npm start มันจะรัน adminApp ของคุณบนเซิร์ฟเวอร์ท้องถิ่นบน http://localhost:4000

เยี่ยมชม adminApp

ปัญหา

หากคุณพบปัญหาใด ๆ ในขณะที่ติดตั้งหรือใช้แอป กรุณาเปิดปัญหาด้วยแท็ก "การปรับปรุง"

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณเรียกดูปัญหาที่มีอยู่เพื่อตรวจสอบว่าปัญหานั้นมีอยู่แล้วหรือไม่

ผลงาน

การมีส่วนร่วมใด ๆ ที่คุณทำจะ ได้รับการชื่นชมอย่างมาก หากคุณมีข้อเสนอแนะที่จะทำให้แอปนี้ดีขึ้น โปรด:

1. แยก repo
2. สร้างสาขาคุณลักษณะของคุณ
3. ยอมรับการเปลี่ยนแปลงของคุณ
4. ดันไปที่สาขา
5. เปิดคำขอดึง

คุณยังสามารถเปิดการสนทนาหรือปัญหาด้วยแท็ก " การเพิ่มประสิทธิภาพ "

เครดิตรูปภาพ

1. Unsplash – https://unsplash.com
2. Pexels – https://pexels.com
3. PNGwing – https://www.pngwing.com/
4. Instacart – https://instacart.ca

- หากคุณชอบโครงการนี้ ให้มันและแบ่งปันกับเพื่อน ๆ !