next tailwind amazona

สร้างเว็บไซต์อีคอมเมิร์ซ NextJS เช่น Amazon

• เทค: NextJs 13, Auth Next 4
• UI: tailwind, chart.js, react-chartjs
• DB: MongoDB, Mongoose
• การชำระเงิน: Paypal, Stripe
• โฮสติ้งเนื้อหา: คลาวด์
• ปรับใช้: GitHub, Vercel, MongoDB Atlas

ทรัพยากร

• วิดีโอ YouTube: https://youtu.be/_ibler5mrza
• เว็บไซต์สาธิต: https://next-tailwind-amazona.vercel.app
• ซอร์สโค้ด: https://github.com/basir/next-tailwind-amazona
• หลักสูตรเต็ม: basir.thinkific.com

สิ่งที่คุณจะเรียนรู้

• พื้นฐาน NextJS เช่นการตั้งค่าโครงการการนำทางระหว่างหน้าและการดึงข้อมูล
• NextJS หัวข้อขั้นสูงเช่นการกำหนดเส้นทางแบบไดนามิกการเพิ่มประสิทธิภาพรูปภาพ SSG และ SSR
• Tailwind CSS Framework เพื่อสร้างเว็บไซต์ที่ตอบสนองโดยใช้ธีมที่กำหนดเองภาพเคลื่อนไหวและม้าหมุน
• ReactJs รวมถึงการย่อยสลายส่วนประกอบบริบท API และ hooks
• แพ็คเกจ Auth Auth ถัดไปเพื่อตรวจสอบสิทธิ์ลูกค้าและผู้ดูแลระบบ
• MongoDB และ Mongoose เพื่อบันทึกและดึงข้อมูลเช่นผลิตภัณฑ์คำสั่งซื้อและผู้ใช้
• API นักพัฒนา PayPal เพื่อชำระเงินออนไลน์
• ปรับใช้เว็บแอปพลิเคชันบนเซิร์ฟเวอร์เช่น vercel และ netlify

หลักสูตรเต็มรูปแบบ

รับหลักสูตรนี้ด้วยส่วนลด 90% สำหรับ Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website like-amazon-by-next-js?coupon=save90

วิ่งในพื้นที่

1. repo โคลน

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. สร้างไฟล์. env

   • ซ้ำ. env.example และเปลี่ยนชื่อเป็น. env

3. การตั้งค่า mongoDB

   • MongoDB ท้องถิ่น
   • ติดตั้งจากที่นี่
   • ในไฟล์. env อัปเดต mongodb_uri = mongoDb: // localhost/amazona
   • หรือ Atlas Cloud MongoDB
   • สร้างฐานข้อมูลที่ https://cloud.mongodb.com
   • ในไฟล์. env อัปเดต mongodb_uri = mongoDb+srv: // ของคุณ-การเชื่อมต่อ

4. ติดตั้งและเรียกใช้

     npm install
     npm run dev

5. ข้อมูลเมล็ดพันธุ์

   • เรียกใช้สิ่งนี้บนเบราว์เซอร์: http: // localhost: 5000/api/seed
   • ส่งคืนอีเมลและรหัสผ่านของผู้ดูแลระบบและผลิตภัณฑ์ตัวอย่าง 6 รายการ

6. เข้าสู่ระบบผู้ดูแลระบบ

   • เรียกใช้ http: // localhost: 3000/เข้าสู่ระบบ
   • ป้อนอีเมลผู้ดูแลระบบและรหัสผ่านแล้วคลิกเข้าสู่ระบบ

บทเรียน

1. การแนะนำ
2. ติดตั้งเครื่องมือ
3. สร้างแอพถัดไป
4. เผยแพร่ไปยัง GitHub
5. สร้างเค้าโครงเว็บไซต์
   1. สร้างองค์ประกอบเค้าโครง
   2. เพิ่มส่วนหัว
   3. เพิ่มส่วนหลัก
   4. เพิ่มส่วนท้าย
   5. เพิ่มคลาส Tailwind
6. รายการผลิตภัณฑ์
   1. เพิ่ม data.js
   2. เพิ่มรูปภาพ
   3. แสดงผลิตภัณฑ์
7. สร้างรายละเอียดผลิตภัณฑ์
   1. สร้างหน้าผลิตภัณฑ์
   2. สร้าง 3 คอลัมน์
   3. แสดงภาพในคอลัมน์แรก
   4. แสดงข้อมูลผลิตภัณฑ์ในคอลัมน์ที่สอง
   5. แสดงเพิ่มลงในการกระทำของรถเข็นในคอลัมน์ที่สาม
   6. เพิ่มสไตล์
8. มือจับเพิ่มลงในรถเข็น
   1. กำหนดบริบท React
   2. กำหนดรายการรถเข็น
   3. สร้าง Addd to Cart Action
   4. เพิ่ม reducer
   5. สร้างผู้ให้บริการร้านค้า
   6. จัดการเพิ่มลงในปุ่มรถเข็น
9. สร้างหน้ารถเข็น
   1. สร้าง cart.js
   2. ใช้บริบทเพื่อรับรายการรถเข็น
   3. รายการรายการในรายการรถเข็น
   4. เปลี่ยนเส้นทางไปยังหน้าจอรถเข็นหลังจากเพิ่มในรถเข็น
10. อัปเดตปริมาณในรถเข็น
    1. เพิ่มกล่องเลือกสำหรับปริมาณ
    2. จัดการเปลี่ยนกล่องเลือกเปลี่ยน
11. บันทึกรายการรถเข็น
    1. ติดตั้งแพ็คเกจ JS-Cookie
    2. บันทึกและอ่านรายการรถเข็นในคุกกี้
12. สร้างแบบฟอร์มเข้าสู่ระบบ
    1. ติดตั้งแบบฟอร์มเบ็ดปฏิกิริยา
    2. สร้างกล่องอินพุต
    3. เพิ่มปุ่มเข้าสู่ระบบ
13. เชื่อมต่อกับ MongoDB
    1. ติดตั้งพังพอน
    2. ติดตั้ง MongoDB หรือใช้ MongoDB Atlas
    3. บันทึก URL การเชื่อมต่อในไฟล์. env
    4. สร้างไฟล์ db utils
    5. สร้างตัวอย่างผู้ใช้
14. สร้าง API เข้าสู่ระบบ
    1. ติดตั้ง Auth-Auth
    2. สร้าง nextauth.js
    3. ใช้ Signin
    4. ใช้การลงชื่อเข้าใช้ในแบบฟอร์มการเข้าสู่ระบบ
15. เพิ่มเมนูผู้ใช้
    1. ตรวจสอบการรับรองความถูกต้องของผู้ใช้
    2. ติดตั้ง headlessui
    3. แสดงเมนูผู้ใช้
16. สร้างหน้าจอการจัดส่ง
    1. แสดงฟิลด์ที่อยู่
    2. บันทึกที่อยู่ในบริบท
17. สร้างหน้าจอวิธีการชำระเงิน
    1. วิธีการชำระเงิน
    2. บันทึกวิธีการชำระเงินในบริบท
18. ผลิตภัณฑ์ตัวอย่างเมล็ดพันธุ์
    1. สร้างโมเดลผลิตภัณฑ์ในพังพอน
    2. แทรกผลิตภัณฑ์ตัวอย่างไปยัง MongoDB
19. โหลดผลิตภัณฑ์ MongoDB
    1. โหลดผลิตภัณฑ์ในโฮมเพจจาก MongoDB
    2. โหลดผลิตภัณฑ์ในหน้าผลิตภัณฑ์จาก MongoDB
    3. ใช้ API ผลิตภัณฑ์เพื่อตรวจสอบจำนวนหุ้นใน Add to Cart
20. สร้างหน้าจอลำดับสถานที่
    1. แสดงที่อยู่จัดส่ง
    2. แสดงวิธีการชำระเงิน
    3. แสดงรายการสั่งซื้อ
    4. การสร้างคำสั่งซื้อ
21. สร้างหน้าจอคำสั่งซื้อ
    1. ใช้ Backend API สำหรับรายละเอียดการสั่งซื้อ
    2. โหลดข้อมูลการสั่งซื้อจากแบ็กเอนด์
    3. แสดงรายละเอียดการสั่งซื้อ
22. สร้างหน้าจอลงทะเบียน
    1. เพิ่ม API การลงทะเบียน
    2. สร้างหน้าลงทะเบียน
    3. โทร API ในแบบฟอร์มส่ง
23. จ่ายคำสั่งซื้อตาม paypal
    1. เพิ่มปุ่ม PayPal
    2. จัดการการชำระเงิน
    3. สร้างแบ็กเอนด์ API
    4. อัปเดตสถานะคำสั่งซื้อ
24. สร้างหน้าจอประวัติคำสั่งซื้อ
    1. สร้างคำสั่งซื้อของฉัน API
    2. สร้างองค์ประกอบประวัติการสั่งซื้อ
    3. ดึงคำสั่งซื้อและแสดงพวกเขา
25. เผยแพร่บน vercel
    1. สร้างบัญชี vercel
    2. เชื่อมต่อกับ GitHub
    3. ตั้งค่า Auth Auth และ MongoDB DB ใน Env Vars
    4. กดรหัสไปยัง GitHub
26. อัปเดตโปรไฟล์ผู้ใช้
    1. สร้างหน้าจอโปรไฟล์
    2. แสดงข้อมูลผู้ใช้
    3. จัดการข้อมูลผู้ใช้อัปเดต
27. สร้างแดชบอร์ดผู้ดูแลระบบ
    1. สร้างเมนูผู้ดูแลระบบ
    2. สร้างหน้าจอแดชบอร์ด
    3. ใช้ API สรุปผู้ดูแลระบบ
28. รายการคำสั่งซื้อสำหรับผู้ดูแลระบบ
    1. สร้างหน้าคำสั่งซื้อ
    2. สร้างคำสั่งซื้อ API
    3. ใช้ API ในหน้า
29. ส่งคำสั่งซื้อสำหรับผู้ดูแลระบบ
    1. สร้าง API ส่งมอบ
    2. เพิ่มปุ่มส่งมอบ
    3. ใช้ตัวจัดการคลิก
30. รายการผลิตภัณฑ์สำหรับผู้ดูแลระบบ
    1. สร้างหน้าผลิตภัณฑ์
    2. สร้างผลิตภัณฑ์ API
    3. ใช้ API ในหน้า
31. สร้างหน้าแก้ไขผลิตภัณฑ์
    1. สร้างหน้าแก้ไข
    2. สร้าง API สำหรับผลิตภัณฑ์
    3. แสดงข้อมูลผลิตภัณฑ์ในรูปแบบ
32. อัปโหลดรูปภาพผลิตภัณฑ์
    1. สร้างบัญชี Cloudinary
    2. รับคีย์เมฆ
    3. สร้าง API อัปโหลด
    4. อัปโหลดไฟล์ในหน้าแก้ไข
33. สร้างและลบผลิตภัณฑ์
    1. เพิ่มปุ่มสร้างผลิตภัณฑ์
    2. สร้าง API ผลิตภัณฑ์ใหม่
    3. เพิ่มตัวจัดการสำหรับการลบ
    4. ใช้งาน DELETE API
34. รายชื่อผู้ใช้สำหรับผู้ดูแลระบบ
    1. สร้างหน้าผู้ใช้
    2. สร้างผู้ใช้ API
    3. ใช้ API ในหน้า
35. เพิ่มม้าหมุน
    1. สร้างผลิตภัณฑ์ที่โดดเด่น
    2. ฟีดข้อมูลม้าหมุน
    3. แสดงผลิตภัณฑ์ยอดนิยม
36. สร้างหน้าการค้นหา
    1. สร้างตัวกรอง
    2. รายการผลิตภัณฑ์
    3. แสดงตัวกรอง