Roadmap

สิ่งที่จะสร้าง

DevBlog ไม่ใช่ทิวทอเรียลเดี่ยว ๆ แต่เป็น โปรเจกต์ที่ #2 ของซีรีส์ Real-World Projects เจ็ดโปรเจกต์ แต่ละโปรเจกต์ในซีรีส์เป็นแอปพลิเคชันสมบูรณ์ที่ deploy ได้ และดึงหลายคอร์สจาก Learn Hub มารวมเป็นงานสร้างชิ้นเดียวที่สมจริง บทเรียนนี้วาง DevBlog ลงในซีรีส์นั้นเพื่อให้คุณรู้ว่าอะไรมาก่อนและอะไรมาถัดไป

ทำไม

คอร์สแต่ละคอร์สสอนเรื่องเดียวได้ดี — คอร์ส GraphQL, คอร์ส Next.js, คอร์ส MongoDB แต่แอปพลิเคชันจริงต้องใช้หลายอย่างพร้อมกัน แล้วเชื่อมเข้าด้วยกันพร้อม trade-off และตัวประสานที่ไม่มีคอร์สไหนคอร์สเดียวครอบคลุม ซีรีส์ Real-World Projects มีขึ้นเพื่ออุดช่องว่างตรงนี้: แต่ละโปรเจกต์หยิบหัวข้อจากหลายคอร์สมาบังคับให้คุณประกอบเป็นของที่รันและ deploy ได้จริง พอมองทั้งซีรีส์จะเห็นว่าทักษะทบต้นกัน — auth จากโปรเจกต์หนึ่ง คอนเทนเนอร์จากอีกโปรเจกต์ และการเทสต์ที่ติดตัวไปตลอดทั้งซีรีส์

ติดตั้ง

ซีรีส์นี้มีเจ็ดโปรเจกต์ เรียงตามหมายเลข — และทั้งเจ็ดไลฟ์แล้ว DevBlog — ตัวนี้ — คือโปรเจกต์ที่ #2

1 · TaskFlow ✅ live บอร์ด Kanban แบบเรียลไทม์ ฝั่ง backend เป็น Rust/Axum พร้อม PostgreSQL และ Redis, เลเยอร์เรียลไทม์ด้วย WebSocket, frontend เป็น Astro/Preact และ Docker Compose ต่อยอดคอร์ส Rust, PostgreSQL, Redis, Astro และ Docker พร้อมวางแพตเทิร์นพื้นฐาน — auth, การเทสต์, คอนเทนเนอร์ — ที่โปรเจกต์ถัด ๆ ไปสร้างต่อ

2 · DevBlog ← คุณอยู่ที่นี่ ระบบ headless CMS และบล็อกสาธารณะ Node/NestJS พร้อม code-first GraphQL บน MongoDB และ frontend Next.js App Router ที่ทำ SSR/ISR ให้ไซต์สาธารณะ บวก admin dashboard ที่ต้องยืนยันตัวตน ต่อยอดคอร์ส Node, MongoDB, GraphQL, Next.js/React และ Docker พร้อมแนะนำ document data modelling, contract GraphQL ที่มี type และเวิร์กโฟลว์เนื้อหา/การตรวจสอบ

3 · ShopMicro ✅ live backend อีคอมเมิร์ซที่สร้างเป็น microservices เซอร์วิส Go หลายตัวคุยกันผ่าน gRPC ประสาน order flow ผ่าน Kafka และ RabbitMQ ด้วย saga และ outbox pattern แต่ละตัวมี PostgreSQL ของตัวเอง แล้ว deploy ขึ้น Kubernetes ด้วย Helm ต่อยอดคอร์ส Go, gRPC, Microservices, Kafka, RabbitMQ และ Kubernetes พร้อมแนะนำการแยกเซอร์วิส การสื่อสารระหว่างเซอร์วิส และ eventual consistency

4 · FitTrack ✅ live แอปฟิตเนสแบบ mobile-first ตัว client มือถือเป็น Flutter กับเว็บคู่กันเป็น Svelte บน backend Python/FastAPI ตัวเดียวที่ใช้ Supabase ต่อยอดคอร์ส Python, Supabase, Flutter และ Svelte พร้อมแนะนำการสร้างผลิตภัณฑ์เดียวให้สองไคลเอนต์บน backend ร่วมกัน

5 · Mosaic ✅ live storefront แบบ micro-frontend React shell จะ compose remote ของ React, Svelte และ Astro ตอน runtime ด้วย Module Federation 2.0, Web Components เป็นขอบเขตกลางที่เชื่อมทุก framework เข้าหากัน และแต่ละ slice มี BFF บาง ๆ ที่เขียนด้วย Hono ต่อยอดคอร์ส React, Svelte, Astro และ Web Components พร้อมแนะนำ design system ที่ใช้ร่วมกัน, การสื่อสารข้าม slice, routing ที่ host เป็นเจ้าของ, ความทนทานเมื่อ remote ล่ม และการ deploy แยกราย slice — ShopMicro แยก backend ออกเป็น service อิสระ ส่วน Mosaic แยก frontend ออกเป็น app อิสระ

6 · OfflineNotes ✅ live PWA แบบ offline-first ตัว client เขียนด้วย TypeScript จาก Web Components เก็บโน้ตใน IndexedDB รวมการแก้ไขด้วย CRDT แบบ Rust→WASM แล้ว sync ได้โดยไม่ conflict เมื่อกลับมาต่อเน็ต ส่งมอบบน Astro ต่อยอดคอร์ส TypeScript, Web Components, Browser Storage, PWA และ WebAssembly พร้อมแนะนำการแก้ conflict, background sync และสถาปัตยกรรม local-first

7 · CloudDeploy ✅ live บทสรุปของซีรีส์: พาแอปพลิเคชันไปจนถึง production ด้วย Infrastructure as Code ผ่าน Terraform และ Terragrunt ข้าม AWS, GCP และ Azure, Kubernetes, CI/CD, observability ด้วย Datadog, auth ด้วย Keycloak และ feature flag ด้วย GrowthBook ต่อยอดคอร์ส Terraform, Kubernetes, Datadog, Keycloak และ GrowthBook แล้วผูกทั้งซีรีส์เข้าด้วยกันด้วยการ deploy Helm chart ของ ShopMicro ขึ้นจริง

ตรวจสอบผล

คุณเข้าใจตำแหน่งแล้วถ้าวาง DevBlog ได้ถูก:

• DevBlog เป็นลำดับที่เท่าไรในซีรีส์? #2
• อะไรมาก่อน DevBlog และเสร็จหรือยัง? TaskFlow และเสร็จแล้ว — ไลฟ์อยู่แล้ว
• ความต่างบรรทัดเดียวระหว่าง TaskFlow กับ DevBlog คืออะไร? TaskFlow เป็น Rust + REST/WebSocket + PostgreSQL + Astro; DevBlog เป็น Node + GraphQL + MongoDB + Next.js

สรุป

ซีรีส์ Real-World Projects ไล่จาก TaskFlow → DevBlog → ShopMicro → FitTrack → Mosaic → OfflineNotes → CloudDeploy ตัว TaskFlow (Rust, PostgreSQL, Astro) ไลฟ์แล้ว ส่วน DevBlog (GraphQL, MongoDB, Next.js) คือจุดสนใจของคอร์สนี้ โปรเจกต์ถัด ๆ ไปเพิ่ม microservices, มือถือ, micro-frontend, offline-first และการ deploy บนคลาวด์ — และทั้งเจ็ดไลฟ์แล้ว เมื่อมี mental model สถาปัตยกรรม เครื่องมือ และโรดแมปครบแล้ว คุณก็พร้อมลงมือสร้าง

ถัดไป: Setup & Tooling →