Stack หลักของคอร์ส
ในการทำงานจริงไม่ได้มีแค่เครื่องมือเดียวหรือ Stack เดียว คุณควรเข้าใจว่าแต่ละ Stack เหมาะกับงานแบบไหน และเลือกตามเป้าหมายของโปรเจกต์
Stack คือชุดเครื่องมือที่ใช้สร้างโปรเจกต์ เช่น Framework สำหรับทำเว็บ ภาษาเขียนโค้ด ระบบตกแต่ง UI ฐานข้อมูล เครื่องมือ Deploy และที่เก็บโค้ด การเลือก Stack ที่เหมาะจะทำให้โปรเจกต์เดินเร็วขึ้นและดูแลต่อได้ง่ายขึ้น
ในคอร์สนี้เราเลือก Stack ที่เหมาะกับการสร้างเว็บไซต์จริงในเวลาจำกัด และเป็น Stack ที่ AI Coding Tool ส่วนใหญ่เข้าใจดี มีตัวอย่างเยอะ และ Deploy ได้ง่าย
หลักจำง่าย:
Stack ที่ดีไม่ใช่ Stack ที่ใหม่ที่สุด แต่คือ Stack ที่ทำให้งานเสร็จจริง ดูแลต่อได้ และเหมาะกับขนาดโปรเจกต์
Stack หลักของคอร์สนี้
Text
Next.js + TypeScript + Tailwind CSS + shadcn/ui + Supabase + Vercel + GitHubเหตุผล:
- เหมาะกับการทำเว็บจริงในเวลาจำกัด
- AI ช่วยเขียนและแก้โค้ด Stack นี้ได้ดี
- ต่อยอดได้ทั้ง Landing Page, Portfolio, Lead Form และ Web App
- Deploy ง่ายด้วย Vercel
- ถ้าต่อยอดเป็น Mobile App สามารถใช้ React Native + Expo ได้
- Next.js
- Framework สำหรับสร้างเว็บไซต์ด้วย React มีระบบหน้าเว็บ Routing และเหมาะกับการ Deploy บน Vercel
- TypeScript
- JavaScript แบบมี type ช่วยลดความผิดพลาดและทำให้ AI เข้าใจโครงข้อมูลได้ดีขึ้น
- Tailwind CSS
- ระบบเขียน CSS ด้วย utility class ทำให้จัด Layout และ Responsive ได้เร็ว
- shadcn/ui
- ชุด Component ที่นำมาใช้เป็นฐาน UI ได้ โดยยังแก้โค้ดเองได้เต็มที่
- Supabase
- บริการฐานข้อมูลและ Backend เบื้องต้น เหมาะกับการเก็บ Lead หรือข้อมูลฟอร์ม
- Vercel
- แพลตฟอร์ม Deploy ที่เหมาะกับ Next.js และเชื่อมกับ GitHub ได้ง่าย
- GitHub
- ที่เก็บโค้ดออนไลน์ ใช้เก็บประวัติงานและเชื่อมต่อกับ Vercel
| งานที่ต้องทำ | เครื่องมือที่เกี่ยวข้อง | เหตุผล |
|---|---|---|
| สร้างหน้าเว็บ | Next.js + TypeScript | ได้โครงสร้างโปรเจกต์จริงและต่อยอดได้ |
| จัด UI และ Responsive | Tailwind CSS + shadcn/ui | ทำ Layout ได้เร็วและแก้เฉพาะ Component ได้ง่าย |
| เก็บข้อมูลฟอร์ม | Supabase | ไม่ต้องตั้ง Server เองตั้งแต่เริ่ม |
| เก็บโค้ด | GitHub | มีประวัติงานและเชื่อม Deploy ได้ |
| นำเว็บออนไลน์ | Vercel | Deploy Next.js ได้สะดวกและมี URL จริง |