CloudyMatcha

เจ้าของผลงานเล่าไว้แบบนี้

https://cloudymatcha.vercel.app # CloudyMatcha ☁️🍵 เว็บ e-commerce ขายมัจฉะจากญี่ปุ่นแบบ guest-checkout — ชำระผ่าน PromptPay QR แล้วแอดมิน verify สลิปแบบ manual (ไม่ใช้ payment gateway) ## Features **Storefront (guest, ไม่ต้อง login)** - Browse catalog + product detail + gallery - Cart (persist ใน localStorage) + checkout ที่อยู่ไทย (autocomplete จังหวัด/อำเภอ/ตำบล) - PromptPay dynamic QR + upload slip + PDPA consent - ติดตามสถานะที่ `/order/[CODE]` ใช้รหัส `MCH-XXXXXX` unguessable - Zone-based ค่าจัดส่งตามจังหวัด **Backoffice (`/admin`, Firebase Auth)** - Product CRUD + image gallery + client-side resize - Order queue: verify slip / reject / ship / cancel / refund - Inline stock adjust popover (restock เร็ว ไม่ต้องเปิด edit form) - Analytics: ยอดขาย, Top 5 สินค้าขายดี, product views, low-stock alerts - Shop settings + first-run wizard (PromptPay id, shipping zones, contact) - Print-friendly shipping label - 24h auto-cancel sweep สำหรับออเดอร์ค้าง **Automated email (Gmail SMTP)** - ส่งอัตโนมัติเมื่อ: รับสลิป → ตรวจสอบผ่าน → จัดส่งแล้ว → ปฏิเสธสลิป ## Tech stack - **Framework:** Next.js 16 (App Router) + TypeScript - **UI:** MUI v9, Sarabun font, Thai locale - **Backend:** Firebase Spark (Firestore + Auth + Storage) — client SDK ทั้งหมด - **Server:** Vercel Route Handler สำหรับ Gmail SMTP (Nodemailer) - **State:** Zustand (cart, persist) + TanStack Query (server data) - **Forms:** react-hook-form + zod - **Testing:** Vitest + Testing Library ## Getting started ```bash npm install cp .env.local.exam

โดย Nxtiphong · ดูโพสต์ต้นทาง