Build a fullstack web app with Vue 3 and Elysia on Bun — TypeScript end-to-end, MongoDB persistence, and one deployable stack.
เข้าใจ tradeoffs ของภาษาก่อน — เมื่อไหร่ JS/TS ชนะ และเมื่อไหร่ที่ควรใช้ภาษาอื่น
ติดตั้ง Bun และรันโปรแกรมแรก — runtime เดียวที่ใช้ทั้ง frontend และ backend ใน roadmap นี้
type system ที่ใช้ร่วมกันทั้ง Vue, Elysia และ Mongoose — จับให้แน่นก่อนไปต่อ
HTTP, TCP, DNS — พื้นฐานที่ fullstack developer ทุกคนต้องรู้ ทั้งฝั่ง browser และ server
interpolation, directives, v-if/v-for/v-bind/v-on/v-model — syntax ที่ใช้เขียน UI ทุกวัน
ref, computed, watch และ composables — หัวใจของ Composition API ที่ทำ template อัพเดทอัตโนมัติ
props เข้า, events ออก, slots สำหรับ layout — กติกาที่ทำ component tree จัดการได้เมื่อแอปโต
SPA routing — deep links, lazy loading, navigation guards สำหรับหน้าที่ต้อง login
state ที่แชร์ข้ามหน้า (session, domain data) — เก็บที่เดียวใน Pinia store ไม่ใช่ prop-drilling
v-model + Zod บน client, t.Schema บน server — กฎชุดเดียวสองฝั่ง คนใช้เห็น error ทันที
Elysia API แรกของคุณ — type-safe ตั้งแต่บรรทัดแรก อธิบายทีละบรรทัด
auth, logging, request context — ทำครั้งเดียวที่ lifecycle hook ไม่ใช่ copy-paste ทุก handler
validation + types + OpenAPI docs จาก schema เดียว — รากฐานของ end-to-end types ผ่าน Eden
error response รูปเดียวทั้ง API — error(), custom codes, และ onError จุดเดียวที่ map ทุกอย่าง
RESTful conventions, versioning, pagination, error responses — ออกแบบ API ที่คนอื่นใช้งานได้
document model vs tables — เลือกถูกตั้งแต่ต้น แล้ว query ส่วนใหญ่จะง่ายขึ้นเอง
embed vs reference — การตัดสินใจ schema ที่สำคัญที่สุดของ MongoDB ตัดสินด้วย access pattern
dashboard, report, ยอดรวม — pipeline คือ query language สำหรับอะไรที่ลึกกว่า find()
connection เดียวจาก env var, pool แจกจ่ายเอง, graceful shutdown — ตั้งครั้งเดียวใช้ทั้งแอป
MongoDB รับทุกอย่าง — schema คือ contract ที่เอา type กับ validation กลับมาที่ application layer
query ทั้งหมดอยู่หลัง interface เดียว — ownership scoping เขียนครั้งเดียว และ test ด้วย fake ได้
จุดที่ Vue กับ Elysia เป็น stack เดียว — เปลี่ยน route ฝั่ง server, frontend พังตอน compile ไม่ใช่ตอน runtime
AuthN vs AuthZ, sessions vs JWT — เข้าใจ concept ก่อน แล้วค่อย implement ใน stack นี้
ครบวงจร — bcrypt, issue/verify token, Pinia session, router guard, redirect กลับหลัง login
dev proxy บน Vite, CORS plugin บน Elysia, env validation — ตั้งครั้งเดียวไม่มีปัญหาตอน deploy
bun test + Eden เรียก app ตรง ๆ ไม่ต้องรัน server — test contract, validation และ ownership ในที่เดียว
logging, monitoring, configuration, health checks — สิ่งที่ทำให้ service รันได้จริงบน production
สอง container — nginx serve Vue + Elysia run API — ผูกด้วย compose เดียว พร้อม Mongo
Workshop: TaskFlow — fullstack task manager ครบทุกอย่างที่เรียนมา (auth, CRUD, tests, Docker)
