OneStopShop

onestopshop

คำเตือน แอพนี้เป็นงานที่กำลังดำเนินการและไม่ควรพิจารณาการผลิตพร้อม มันใช้เทคโนโลยีใหม่ที่ยังไม่เสถียรเช่นการกระทำของเซิร์ฟเวอร์และ Drizzle ORM

เกี่ยวกับ

ตลาดออนไลน์ที่สร้างขึ้นโดยใช้เราเตอร์แอป Next.js ซึ่งช่วยให้ผู้ใช้สามารถซื้อผลิตภัณฑ์ลงทะเบียนและแสดงรายการผลิตภัณฑ์ของตัวเองเพื่อขาย ผู้ใช้สามารถสร้างโปรไฟล์ผู้ขายจัดการผลิตภัณฑ์และรวบรวมการชำระเงิน

คุณสมบัติที่สำคัญ:

• Next.js App Router พร้อมส่วนประกอบเซิร์ฟเวอร์ React
• เส้นทางที่สกัดกั้น (พร้อมการกำหนดเส้นทางแบบขนาน) สำหรับมุมมองอย่างรวดเร็วของผลิตภัณฑ์และการสร้างผลิตภัณฑ์ใหม่ในผู้ดูแลระบบ
• การกระทำของเซิร์ฟเวอร์สำหรับการกลายพันธุ์
• ฐานข้อมูล PlanetScale MySQL พร้อม Drizzle ORM
• อัปโหลดสำหรับการอัปโหลดไฟล์ typesafe (เช่นรูปภาพผลิตภัณฑ์)
• การตรวจสอบผู้ใช้กับเสมียน
• Stripe Connect Integration สำหรับการชำระเงินของตลาด (รวมถึงค่าธรรมเนียมแพลตฟอร์มและการจ่ายเงินของผู้ขาย)

การสาธิต

ในการสาธิตประสบการณ์การชำระเงินให้ชำระเงินด้วยหมายเลขบัตรทดสอบเช่น 4242 4242 4242 4242 และใช้วันที่ในอนาคตสำหรับการหมดอายุและ 3 หลักสำหรับ CVC คุณจะสามารถชำระเงินด้วยผลิตภัณฑ์จากผู้ขายที่มีบัญชีแถบเชื่อมต่อกับร้านค้าของพวกเขา (เช่นของเล่นของทิม) นอกจากนี้คุณยังสามารถสร้างบัญชีผู้ขายของคุณเองและเชื่อมต่อกับ Stripe เพื่อประสบการณ์เต็มรูปแบบ

โฮมเพจ

บรรณาธิการหน้าผลิตภัณฑ์ผู้ดูแลระบบ

รันแอพ

ทำตามขั้นตอนด้านล่างเพื่อเรียกใช้แอพในเครื่อง:

1. สร้างฐานข้อมูล MySQL
2. สร้างไฟล์ .env ในเครื่องด้วยตัวแปรตามไฟล์ .env.example
3. เรียกใช้ npm install
4. สร้างการโยกย้ายด้วย npx drizzle-kit generate:mysql สิ่งนี้จะสร้างโฟลเดอร์ใหม่ที่เรียกว่า migrations-folder ในรูทซึ่งมีการสืบค้น SQL เพื่อสร้างตารางฐานข้อมูล การโยกย้ายจะถูกซิงค์โดยอัตโนมัติกับฐานข้อมูลผ่านฟังก์ชั่นการย้ายถิ่นใน db.ts หรือคุณสามารถเรียกใช้การสืบค้น SQL ที่สร้างขึ้นจากการย้ายถิ่นด้วยตนเองผ่านคอนโซล Planetscale และลบฟังก์ชั่นการย้ายถิ่นใน db.ts
5. เรียกใช้ npm run dev เพื่อเปิดแอพในโหมดการพัฒนา

แค่นั้นแค่นั้น ตอนนี้คุณควรเข้าถึงแอพได้ที่ http://localhost:3000

หมายเหตุ

• เมื่อสร้างการโยกย้ายเป็นครั้งแรกด้วยฝนตกปรอยๆตรวจสอบให้แน่ใจว่า migrations-folder ในรูทนั้นว่างเปล่าหรือไม่มีอยู่จริง

หนังสือนิทาน

อย่างไรก็ตามนิทานได้ถูกเพิ่มเข้าไปในแอพนี้ยังไม่ได้ทำงานอย่างแข็งขันตั้งแต่การสร้างแอพครั้งแรก ไม่ว่าจะใช้คำสั่งต่อไปนี้:

1. เรียกใช้สคริปต์ Build Tailwind เพื่อสร้างไฟล์เอาต์พุตสำหรับคลาส Tailwind (หลังจากดำเนินการเสร็จแล้วคุณอาจต้อง 'ฆ่า' เทอร์มินัล (เช่น ctrl + c ) เพื่อหยุดกระบวนการหากไม่หยุดโดยอัตโนมัติ)

   คำสั่ง: npm run tailwind

2. Run Storybook (จะใช้ไฟล์เอาต์พุต Tailwind ที่สร้างขึ้นในขั้นตอนก่อนหน้าและเรียกใช้บน http://localhost:6006 )

   คำสั่ง: npm run storybook

การแก้ไขปัญหา

หากคุณเห็นข้อผิดพลาดที่เกี่ยวข้องกับตารางที่ไม่มีอยู่ใน PlanetScale (น่าจะถูกโยนลงใน app/(storefront)/(main)/page.tsx เนื่องจากเป็นการใช้งานครั้งแรกของฐานข้อมูล) นี่เป็นเพราะฐานข้อมูลที่ไม่ได้อยู่ในการซิงค์ ทบทวนขั้นตอน 'การเรียกใช้แอพ' ด้านบนและตรวจสอบแท็บ 'Insights' ใน PlanetScale เพื่อตรวจสอบการค้นหาการสร้างตารางที่ทำงานแล้ว

การบริจาค

อย่าลังเลที่จะสร้างปัญหาและการประชาสัมพันธ์สำหรับคุณสมบัติใหม่/การแก้ไข