spectrum store

ร้านสเปกตรัม

ร้านค้าสเปกตรัม | แพลตฟอร์มอีคอมเมิร์ซที่แข็งแกร่งซึ่งขับเคลื่อนโดย Next.js, TypeScript และ Shadcn

ที่ใช้ประโยชน์จาก Fake Store API โดยมีแดชบอร์ดผู้ดูแลระบบและการตรวจสอบสิทธิ์ JWT

ออกแบบโดยเน้นไปที่ความปลอดภัย โดยนำแนวทางปฏิบัติที่ดีที่สุดสำหรับการกำหนดเส้นทางและการทำงานของเซิร์ฟเวอร์ไปใช้

ดูการสาธิต รายงานข้อผิดพลาด ขอคุณสมบัติ

---

คุณสมบัติ

เทคนิค

• ถัดไป js 14 คุณสมบัติล่าสุด

• การดำเนินการเซิร์ฟเวอร์ js ถัดไป + Axios + Zod

• ตอบสนองแบบฟอร์ม hook + การตรวจสอบความถูกต้อง ด้วย zod สำหรับทั้ง ไคลเอนต์ และ เซิร์ฟเวอร์

• การตรวจสอบสิทธิ์ JWT + คุกกี้ + เลเยอร์ข้อมูล การอนุญาต + มิดเดิลแวร์

หลัก

• หน้า เข้าสู่ระบบ ด้วยการรับรองความถูกต้อง JWT + ออกจากระบบ

• หน้า แรก พร้อมเค้าโครงตาราง

• หน้าผลิตภัณฑ์ แสดงผลิตภัณฑ์ทั้งหมดพร้อม ตัวกรอง หมวดหมู่

• หน้า รายละเอียดสินค้า พร้อม การ ให้คะแนน ราคา และ เพิ่มปุ่มตะกร้าสินค้า

• ลิ้นชักรถเข็น (หยิบใส่ตะกร้า ถอดออกจากรถเข็น)

• ฟังก์ชั่น การค้นหา ทั่วโลก

• Theme Toggler (โหมดแสง / มืด)

• กำลังโหลด ภาพเคลื่อนไหว และ โครงกระดูก

• แดชบอร์ดผู้ดูแลระบบ พร้อมตัวดำเนินการ CRUD สำหรับการผลิต การแบ่งหน้า และการค้นหาแผนภูมิ

• คำนึงถึงความปลอดภัย : การตรวจสอบสิทธิ์ (JWT + คุกกี้) และ การอนุญาต DATA Layer + การดำเนิน การมิดเดิลแวร์ และ เซิร์ฟเวอร์ พร้อม การตรวจสอบความถูกต้อง

• SEO และประสิทธิภาพที่ปรับให้เหมาะสม : โครงการนี้ได้รับการปรับให้เหมาะสมสำหรับ SEO และประสิทธิภาพโดยใช้คุณสมบัติ Next.js ล่าสุดและแนวทางปฏิบัติที่ดีที่สุดสำหรับ เมตา แท็กและ แผนผังเว็บไซต์ ถัดไป/รูปภาพ &&

• การออกแบบที่ตอบสนอง

บันทึก

• คุณสามารถใช้ผู้ใช้ fakestoreapi เพื่อเข้าสู่ระบบได้

• สำหรับ บทบาท ผู้ดูแลระบบ ให้ใช้เฉพาะค่าเริ่มต้นเท่านั้น

• ชื่อผู้ใช้ : mor_2314

• รหัสผ่าน : 83r5^_

• คุณสามารถเปิดแดชบอร์ดผู้ดูแลระบบและทำ CRUD ในภาคภูมิใจได้โดยทำตามขั้นตอนเหล่านี้:

• ตรวจสอบให้แน่ใจว่าคุณเข้าสู่ระบบด้วยบัญชีผู้ดูแลระบบ ( mor_2314 )

• คลิกที่ ไอคอนผู้ใช้

• คลิกที่ แดชบอร์ด

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

ขั้นแรก ให้รันเซิร์ฟเวอร์การพัฒนา:

1. โคลนหรือแยก repo

    โคลนคอมไพล์ https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. ติดตั้งการพึ่งพา

    ติดตั้ง npm

3. เปลี่ยนชื่อไฟล์ .env.example เป็น .env

4. เริ่มเซิร์ฟเวอร์

    ผู้พัฒนารัน NPM

เปิด http://localhost:3000 ด้วยเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

คุณสามารถเริ่มแก้ไขเพจได้โดยการแก้ไข app/page.tsx หน้าจะอัปเดตอัตโนมัติเมื่อคุณแก้ไขไฟล์

ปรับใช้บน Vercel

วิธีที่ง่ายที่สุดในการปรับใช้แอป Next.js คือการใช้แพลตฟอร์ม Vercel จากผู้สร้าง Next.js

ตรวจสอบเอกสารการติดตั้ง Next.js ของเราเพื่อดูรายละเอียดเพิ่มเติม

มีส่วนร่วม

การมีส่วนร่วมคือสิ่งที่ทำให้ชุมชนโอเพ่นซอร์สเป็นสถานที่ที่ยอดเยี่ยมในการเรียนรู้ สร้างแรงบันดาลใจ และสร้างสรรค์ การมีส่วนร่วมใด ๆ ที่คุณทำจะ ได้รับการชื่นชมอย่างมาก

หากคุณมีข้อเสนอแนะที่จะทำให้สิ่งนี้ดีขึ้น โปรดแยก repo และสร้างคำขอดึง คุณยังสามารถเปิดปัญหาด้วยแท็ก "การปรับปรุง" ได้อีกด้วย อย่าลืมให้ดาวแก่โครงการนี้ด้วย! ขอบคุณอีกครั้ง!

1. ส้อมโครงการ

2. สร้าง Feature Branch ของคุณ ( git checkout -b feature/AmazingFeature )

3. ยอมรับการเปลี่ยนแปลงของคุณ ( git commit -m 'Add some AmazingFeature' )

4. พุชไปที่สาขา ( git push origin feature/AmazingFeature )

5. เปิดคำขอดึง

ใบอนุญาต

เผยแพร่ภายใต้ใบอนุญาต MIT ดู LICENSE.txt สำหรับข้อมูลเพิ่มเติม