🛒 สร้างเว็บขายของออนไลน์แบบครบวงจร! Next.js + Supabase + Stripe | พร้อมระบบชำระเงินจริง

Описание: สอนสร้างระบบ E-Commerce แบบ Full-Stack ตั้งแต่ต้นจนจบ! (Mini Project) 🚀
ใช้ Next.js + Supabase + Stripe ทำเว็บขายของพร้อมระบบชำระเงินแบบมืออาชีพ

💡 เหมาะสำหรับ:
นักพัฒนาที่อยากสร้างเว็บขายของจริงๆ
ผู้ที่ต้องการเรียนรู้การใช้ Stripe Payment
ใครที่อยากทำ Side Project ขายสินค้าออนไลน์

🛠️ Tech Stack:
Next.js 15 + TypeScript
Supabase (Database)
Stripe (Payment Gateway)
Tailwind CSS

📚 สิ่งที่จะได้เรียน:
✅ Setup โปรเจค Next.js แบบละเอียด
✅ สร้าง Database Schema บน Supabase
✅ เชื่อมต่อ Stripe และสร้างสินค้า
✅ ทำหน้าแสดงสินค้าแบบ Dynamic
✅ ระบบ Checkout และชำระเงิน
✅ Webhook สำหรับ Confirm Payment
✅ บันทึก Order ลง Database

⏰ Timestamps:
00:00 - Intro และภาพรวมโปรเจค
00:25 - Tech Stack ที่ใช้
01:04 - สิ่งที่ต้องเตรียม (Supabase & Stripe Account)
01:33 - Setup Next.js Project
02:56 - โครงสร้างโปรเจค
03:13 - Setup Supabase Database
04:04 - สร้าง Environment Variables
05:02 - สร้าง Supabase Client
06:35 - สร้าง Database Schema (Products & Orders)
07:14 - Run SQL สร้าง Tables
08:12 - Setup Stripe Products
09:52 - Script สร้าง Products อัตโนมัติ
13:21 - เพิ่ม Stripe Secret Key
14:40 - แสดงสินค้าบนหน้าเว็บ
17:45 - สร้าง Product Card Component
19:19 - Config Next.js Images
21:12 - ปรับแต่ง Price Format
24:10 - สร้าง Stripe Checkout API
29:00 - Test การซื้อสินค้า
31:19 - สร้างหน้า Payment Success
32:49 - Implement Stripe Webhook
36:33 - Setup Stripe CLI
38:33 - Test Webhook Local
40:57 - ทดสอบระบบแบบ End-to-End
42:23 - ปรับแต่ง UI (Optional)
44:09 - Demo ระบบทั้งหมด
44:57 - สรุปและแนะนำ Features เพิ่มเติม

📝 บทความประกอบ: https://www.devahoy.com/blog/2025/e-c...
💻 Source Code: https://github.com/Devahoy/mini-shop-...

⚡ Features ที่ควรเพิ่มเติม:
Row Level Security
User Authentication
ตะกร้าสินค้า
หน้าประวัติการสั่งซื้อ
ระบบส่งอีเมลยืนยัน

🔥 ติดตามช่องเพื่อไม่พลาดคอนเทนต์ดีๆ แบบนี้!

#NextJS #Supabase #Stripe #Ecommerce #สอนเขียนเว็บ #ระบบขายของ #FullStackDevelopment

___________________________________

ติดตาม Devahoy เพิ่มเติมได้ที่

Website: https://www.devahoy.com/
Discord:   / discord  
Facebook:   / devahoy