VibeKit คืออะไร?
VibeKit เป็น โครงสร้างโปรเจคสำเร็จรูป (starter template) ที่รวมระบบพื้นฐานที่จำเป็นสำหรับ web application ไว้ให้แล้ว เช่น:
- ระบบ Login ด้วย Google Account
- ระบบจัดการสิทธิ์ผู้ใช้ (Role-Based Access Control)
- ฐานข้อมูล PostgreSQL พร้อม ORM
- ระบบอัพโหลดไฟล์ ไปยัง Cloud Storage
- ปรับแต่งสำหรับ AI ให้ AI เข้าใจโครงสร้างโปรเจคได้ทันที
เทคโนโลยีที่ใช้ (Tech Stack)
| เทคโนโลยี | เวอร์ชัน | หน้าที่ |
|---|---|---|
| Next.js | 16.x | Framework หลักสำหรับสร้าง web application |
| TypeScript | 5.x | ภาษาที่ช่วยตรวจสอบ type ขณะเขียนโค้ด |
| Prisma | 7.x | ORM สำหรับจัดการฐานข้อมูล PostgreSQL |
| NextAuth.js | 4.x | ระบบ Authentication (Login ด้วย Google) |
| Tailwind CSS | 4.x | Framework สำหรับจัดการ CSS |
| Zod | 4.x | Library สำหรับตรวจสอบข้อมูล |
Project Structure
โครงสร้างของ Project ประกอบไปด้วย File และ Folder ซึ่ง AI จะอ่านโครงสร้างของ Template และพยายาม Coding ตาม Template
ตัวอย่าง File และ Folder ที่สำคัญ ๆ
| ไฟล์ | เปรียบเหมือน |
|---|---|
| README.md | คู่มือการพัฒนา — อ่านก่อนแตะอะไรทั้งนั้น บอกว่า Project นี้คืออะไร ตั้งค่ายังไง และรันยังไง |
| .cursorrules / CLAUDE.md / GEMINI.md / AGENTS.md | กฎสำหรับ AI — แต่ละ AI อ่านกฎของตัวเองเพื่อให้ทำงานถูกต้องใน Project นี้ |
| docs/ | แฟ้มขั้นตอนการทำงาน — คู่มือละเอียดสำหรับการทำงานทั้งหมด |
| src/app | URL ที่ใช้งานใน Project เช่น /login, /dashboard |
| .env | ตู้เซฟเก็บกุญแจลับ — รหัสผ่าน database, Google OAuth secrets, Storage credentials ห้ามเปิดเผยให้ลูกค้าเห็น |
| addons.md.example | บันทึกเพิ่มเติมจากเจ้าของ — สร้าง addons.md เพื่อเพิ่มกฎเฉพาะของโปรเจกต์คุณ |