แอพใช้งานได้จริงและทำงานอยู่ที่
https://nextjs-ecommerce-typescript.vercel.app/
ผู้เขียน
คุณสมบัติ
บันทึก
- แดชบอร์ดผู้ดูแลระบบจะเข้าถึงได้เฉพาะคุณหากคุณโคลนมัน คุณจะไม่สามารถสมัครบัญชีผู้ดูแลระบบได้ ฉันได้เพิ่มผลิตภัณฑ์จำลองและหมวดหมู่แล้ว
ระบบเข้าสู่ระบบผู้ใช้หลายราย
- เข้าสู่ระบบ / สมัครสมาชิก ✔
- ลืมรหัสผ่าน ✔
- การตรวจสอบ JWT ในแต่ละคำขอที่ได้รับอนุญาต ✔
- การตรวจสอบการอนุญาตสำหรับการเข้าถึงของผู้ดูแลระบบและการเข้าถึงของลูกค้า ✔
แผงผู้ดูแลระบบ
- เพิ่มสินค้า✔
- ดูสินค้า✔
- ลบสินค้า ✔
- อัพเดทสินค้า✔
- เพิ่มหมวดหมู่ ✔
- ดูหมวดหมู่ (ตารางข้อมูล) ✔
- อัปเดตหมวดหมู่✔
- ลบหมวดหมู่ ✔
- หมวดหมู่การค้นหาตามชื่อ✔
- ค้นหาสินค้าตามหมวดหมู่ ชื่อ ✔
- จัดการการจัดส่งสินค้าตามคำสั่ง✔
- รายการสั่งซื้อที่รอดำเนินการ ✔
- รายการสั่งซื้อที่เสร็จสมบูรณ์ ✔
ลูกค้า
- ดูผลิตภัณฑ์และหมวดหมู่ ✔
- ดูสินค้าที่เกี่ยวข้องกับหมวดหมู่เฉพาะ ✔
- ดูรายละเอียดหน้าไดนามิกด้วย breadcamp ✔
- เพิ่มสินค้าลงตะกร้า ✔
- ลบสินค้าออกจากตะกร้า ✔
- เพิ่ม ลดจำนวนรายการในรถเข็น ✔ (หากจำนวนสินค้าในสต็อกน้อยกว่าจำนวนในรถเข็นของคุณ คุณจะไม่สามารถเพิ่มจำนวนสินค้านั้นได้)
- แจ้งเตือนหากไม่มีจำนวนในสต็อก ✔
- คั่นหน้าสินค้าโปรด✔
- ลบสินค้าออกจากบุ๊กมาร์ก ✔
- สั่งซื้อสินค้า✔
- หลังจากสร้างคำสั่งซื้อ สินค้าที่มีอยู่ในรถเข็นสำหรับผู้ใช้ปัจจุบันจะถูกล้าง ✔
- ติดตามสถานะการสั่งซื้อ✔
- ดูรายละเอียดการสั่งซื้อ ✔
บันทึก
ฟังก์ชั่นเพิ่มเติมจะถูกเพิ่มตามเวลา
เทค
- ถัดไป 13
- ตัวพิมพ์ดีด
- css ของลมท้าย
- ชุดเครื่องมือ Redux
- การตรวจสอบความถูกต้องของ joi
- mongoDB
- SWR hooks สำหรับการดึงข้อมูล API
ตัวแปรสภาพแวดล้อม
หากต้องการรันโปรเจ็กต์นี้ คุณจะต้องเพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้ลงในไฟล์ .env ของคุณ
DB_URI = URL mongoDB ของคุณ
JWT_SECREAT = คีย์ JWT_SECREAT ที่คุณกำหนดเอง
NEXT_PUBLIC_API_BASE_URL = URL ฐานสำหรับ localhost => http://localhost:3000
การติดตั้ง
ติดตั้ง my-project ด้วย npm
npm install
npm run dev (for development server)
npm run build (for Production)
npm run preview (To View Production Server )
ภาพหน้าจอ
แดชบอร์ดผู้ดูแลระบบ
แอดมินเพิ่มสินค้า
แอดมินเพิ่มหมวดหมู่
หมวดหมู่มุมมองผู้ดูแลระบบ
แอดมินดูสินค้า
ผู้ดูแลระบบค้นหาผลิตภัณฑ์ด้วยชื่อหมวดหมู่
หมวดหมู่การค้นหาผู้ดูแลระบบพร้อมชื่อหมวดหมู่
รายการสั่งซื้อที่รอดำเนินการ
รายการสั่งซื้อที่เสร็จสมบูรณ์
หน้า Landing Page
ดูผลิตภัณฑ์ของหมวดหมู่เฉพาะด้วย Dynamic Breadcamp
ดูผลิตภัณฑ์โดยละเอียดด้วย Dynamic Breadcamp
หน้ารถเข็น
แจ้งเตือนหากไม่มีจำนวนสินค้าในสต็อก
สินค้าโปรด
ลบสินค้าโปรด
ค้นหาผลิตภัณฑ์โปรดด้วยชื่อผลิตภัณฑ์
สั่งซื้อสินค้า
ติดตามคำสั่งซื้อ
ตรวจสอบรายละเอียดการสั่งซื้อ
