Overview

Part 3: Mockup Pages — สร้าง UI ก่อนเริ่มเขียน Logic

ใน part นี้เราจะสร้าง หน้าเว็บแบบ static ก่อน โดยยังไม่ต้องมี logic ซับซ้อน แค่ทำให้เห็นหน้าตา UI ก่อน แล้วค่อยเพิ่ม state กับ logic ใน part ถัดไป

โดยเราจะแบ่งการพัฒนาออกเป็น 2 หน้าหลัก ดังนี้:

หน้าแรก

ตะกร้าสินค้า

สิ่งที่จะได้เรียนรู้:

• Tailwind CSS — styling สวย ๆ แบบ utility-first
• TanStack Router — เชื่อมหน้าแบบ file-based routing
• Layout + Navbar — โครงสร้างหน้าเว็บ
• 3 หน้าหลัก — Catalog, Cart, Login