Real-World Projects Roadmap

Where Mosaic fits

Mosaic เป็นส่วนหนึ่งของซีรีส์ Real-World Projects แต่ละโปรเจกต์หยิบแอปพลิเคชันจริงคนละตัวมา rebuild จาก repo เปล่า โดยตั้งใจดึงเอา slice ที่ต่างกันของคอร์ส Learn Hub มาใช้ — เพื่อว่าเมื่อรวมกันแล้วครอบคลุมเกือบทั้ง catalog Mosaic คือรายการ micro-frontend: โปรเจกต์อื่นส่ง app เดียว ส่วน Mosaic ส่ง หลาย app บน framework ต่างกัน compose เป็นตัวเดียว

TaskFlow — realtime Kanban board ✅ live

board สไตล์ Trello ที่ทุกการเปลี่ยนแปลงโผล่ขึ้นแบบ live ให้ทุกคนเห็น backend เป็น Rust, ใช้ Redis สำหรับ cache และ fan-out และ frontend เป็น Astro ยกขึ้นมาด้วย Docker Compose

• Stack: Rust/Axum + PostgreSQL + Redis + WebSocket + Astro + Docker

DevBlog — headless CMS + blog ✅ live

แพลตฟอร์ม content: author เขียนใน headless CMS แล้ว blog สาธารณะที่เร็วก็ render ออกมาผ่าน GraphQL API พร้อม SSR และ ISR

• Stack: Node/NestJS + MongoDB + GraphQL + Next.js

ShopMicro — e-commerce microservices ✅ live

ร้านค้าออนไลน์ที่ถูกแยกเป็น service อิสระซึ่งคุยกันผ่าน gRPC และประสาน order flow ผ่าน event streaming — Kafka, RabbitMQ, saga และ outbox pattern บน Kubernetes

• Stack: Go + gRPC + PostgreSQL + Kafka + RabbitMQ + Kubernetes

FitTrack — mobile-first fitness app ✅ live

ตัวติดตามการออกกำลังกายที่มี native mobile app กับ web companion หนุนด้วย Python API และแพลตฟอร์ม Postgres/auth แบบ managed — backend เดียว สอง client

• Stack: Python/FastAPI + Supabase + Flutter + Svelte

Mosaic — micro-frontend storefront ← you are here

storefront ที่ประกอบขึ้นจาก micro-frontend ที่ deploy แยกกันอิสระ: React shell compose remote ของ React, Svelte และ Astro ตอน runtime ด้วย Module Federation, Web Components เชื่อม framework ต่าง ๆ เข้าหากัน และแต่ละ slice เป็นเจ้าของ UI กับ backend บาง ๆ ของตัวเอง

• Stack: React + Svelte + Astro + Web Components + Module Federation 2.0 + Hono
• Adapts: React, Svelte, Astro, Web Components, frontend architecture

The thread through the series

ShopMicro แยก backend ออกเป็น service อิสระ ส่วน Mosaic แยก frontend ออกเป็น app อิสระ — ไอเดียเชิงองค์กรอันเดียวกัน (ทีมอิสระ, deploy อิสระ, tech อิสระ) นำมาใช้ที่อีกปลายหนึ่งของ stack เมื่อรวมกันแล้วทั้งสองเป็นสองครึ่งของบทเรียนเดียวกันเรื่องการสร้างซอฟต์แวร์ที่หลายทีมส่งงานได้โดยไม่เหยียบเท้ากันเอง

ตรวจสอบผล

คุณเข้าใจภาพรวมแล้วเมื่อคุณพูดได้อย่างละประโยคว่า Mosaic สร้างอะไร, ดัดแปลง slice ไหนของ catalog และ “micro-frontend” เกี่ยวข้องกับไอเดีย microservices จาก ShopMicro อย่างไร ต่อไป เริ่ม Module 1 · Setup & Tooling ได้เลย