Walkthroughs：從零到一教學
這個目錄的軸是**「從零到一的實作教學」**。每個 walkthrough 有以下特徵：
- 起點空白：從空資料夾開始
- 步驟累積：每篇建在前一篇的基礎上
- 引用 roadmap：用到什麼就 wikilink 到對應 F/B/A 章節
- 可跑：做完有實際可運行的產品
- 不同軸於主題 roadmap：不是「介紹某個主題」，是「做出某個東西」
跟姊妹目錄的差別：
| 目錄 | 軸 |
|---|---|
| walkthroughs/（本目錄） | 從零到一建出完整產品（歷時性） |
| frontend/ backend/ | 主題 roadmap（知識地圖） |
| portfolio/ | 已完成作品（給面試看） |
| case-studies/ | 拆解別人家已上線系統 |
Stage：🌱 seed（還沒寫） / 🌿 growing / 🌳 mature
子目錄規劃（預先開）
每個 W 系列有 5+ 集，按 skill「預先開子目錄」規則，寫第一篇時就建子目錄：
| 系列 | 子目錄路徑 |
|---|---|
| W01 無框架建站 | walkthroughs/no-framework-site/ |
| W02 造自己的工具 | walkthroughs/build-your-own-tools/ |
| W03 前端 Level 1~5 | walkthroughs/frontend-levels/ |
| W04 無 framework 後端 | walkthroughs/no-framework-backend/ |
| W05 後端 Level 1~5 | walkthroughs/backend-levels/ |
| W06 全端專案 | walkthroughs/fullstack/ |
| W07 Rust 系列 | walkthroughs/rust-stress-platform/ |
| W08 運維實作 | walkthroughs/ops-projects/ |
每個子目錄需要自己的 index.md 做子 roadmap。
W01 前端：無框架建站系列
知道沒框架時要自己解什麼問題，回頭理解框架的價值。
| # | 主題 | 引用 roadmap | stage |
|---|---|---|---|
| 01 | 純 HTML/CSS/JS 做 Landing Page | F01 / F02 / F03 | 🌱 |
| 02 | 加互動：表單驗證、Modal、Tab | F01 / F03 | 🌱 |
| 03 | 自己做 SPA 路由（History API） | F04 | 🌱 |
| 04 | 自己做 reactive state（觀察者） | F03 / F08 | 🌱 |
| 05 | 自己做 Web Component 元件化 | F01 | 🌱 |
| 06 | 自己做迷你 template engine | F03 | 🌱 |
W02 前端：造自己的工具系列
造出來才懂框架在做什麼。
| # | 主題 | 引用 roadmap | stage |
|---|---|---|---|
| 01 | 迷你 Tailwind（utility CSS 自動生成） | F02 | 🌱 |
| 02 | 迷你 fetch client（攔截 / 快取 / 重試） | F09 | 🌱 |
| 03 | 迷你 state store | F08 | 🌱 |
| 04 | 迷你 test runner | F14 | 🌱 |
| 05 | 迷你 bundler（理解 module resolution） | F12 | 🌱 |
| 06 | 迷你 React（Virtual DOM + Reconciliation） | F06 | 🌱 |
W03 前端：Level 1~5 專案路徑
實戰應用型。每級做一個專案，做完才升級。
| # | 主題 | 引用 roadmap | stage |
|---|---|---|---|
| L1 | Todo List — 元件、狀態、事件 | F05 / F06 / F08 | 🌱 |
| L2 | 個人部落格 SSR/SSG — 路由、SEO、Markdown | F06 / F10（渲染策略）/ SEO | 🌱 |
| L3 | 電商前台 — API、購物車、表單、RWD | F06 / F09 / F10 / F02 | 🌱 |
| L4 | 管理後台 Dashboard — 權限、表格、圖表、WebSocket | F06 / F08 / F09 | 🌱 |
| L5 | Design System — 元件、a11y、打包發布 | F16 / F19 | 🌱 |
W04 後端：無 framework 從零建站系列
用最小依賴做 HTTP 伺服器，不用 framework。知道 framework 在幫你做什麼。
| # | 主題 | 引用 roadmap | stage |
|---|---|---|---|
| 01 | 純 Node.js（http module） | B02 / B06 | 🌱 |
| 02 | 純 Python（http.server） | B02 / B06 | 🌱 |
| 03 | 純 Go（net/http） | B02 / B06 | 🌱 |
| 04 | 純 Rust（TCP socket + 手動 parse HTTP） | B02 / B06 | 🌱 |
W05 後端：Level 1~5 專案路徑
| # | 主題 | 引用 roadmap | stage |
|---|---|---|---|
| L1 | RESTful User CRUD | B09 / B03 / B07 | 🌱 |
| L2 | Auth 系統（JWT + RBAC） | B10 | 🌱 |
| L3 | 檔案上傳 + 圖片處理 | B14 | 🌱 |
| L4 | 任務佇列 + 通知 | B12 | 🌱 |
| L5 | 拆微服務（API Gateway + Service Discovery） | B08 / A09 | 🌱 |
W06 整合：全端專案
前端 + 後端同時做，理解前後端接口設計。
| # | 主題 | stage |
|---|---|---|
| 01 | Blog：Vite + React + Fastify | 🌱 |
| 02 | SaaS：Next.js + FastAPI + PostgreSQL | 🌱 |
| 03 | E-commerce：Nuxt + Spring Boot + Redis | 🌱 |
| 04 | 即時：SvelteKit + Go + WebSocket | 🌱 |
W07 Rust 系列（佔位）
🌱 規劃中：把 proto 那套（微服務壓測平台）用 Rust 重做，同時做 web UI 版本與 terminal UI 版本。 短期先不動，等前後端 roadmap 成熟後再啟動。
| # | 主題 | stage |
|---|---|---|
| 01 | Rust 基礎：ownership、borrowing、lifetime | 🌱 |
| 02 | Rust Web Framework（Axum）建 API | 🌱 |
| 03 | Rust TUI（Ratatui）建 terminal UI | 🌱 |
| 04 | 同功能 web + terminal 雙版本 | 🌱 |
| 05 | 重做 proto 壓測平台（Rust 版） | 🌱 |
W08 運維 / Infra 實作
| # | 主題 | stage |
|---|---|---|
| 01 | 本機 K8s（Kind / OrbStack）從零 | 🌱 |
| 02 | GitLab CE 地端部署 | 🌱 |
| 03 | Prometheus + Grafana + Loki 觀測套件 | 🌱 |
| 04 | Kong Gateway 從零 | 🌱 |
寫作流程
Walkthrough 跟一般文章不同，是連載。每集末尾應該有：
# 這集學到的
（一句話 summary）
# 下集會加
（預告）
# 相關 roadmap
- [[frontend/index#f03-javascript|F03 JS 語言核心]]
- [[frontend/index#f08-狀態管理|F08 狀態管理]]
# 完整代碼
GitHub repo 連結讓讀者可跳過整集或跳著看。
進度統計
- Walkthrough 系列：8（W01~W08）
- 集數預估：約 45
- 目前全部 🌱
- 🌳 mature：0
下一步（優先順序）
- W01 無框架建站（前端學習核心）
- W04 無 framework 後端（對前端的對應練習）
- W03 L1-L2 專案（應用級入門）
- W07 Rust 長期規劃，不急