專案概述
一個 React + TypeScript SPA，作為完整的演算法學習指南。涵蓋 16 個類別（陣列與雜湊、雙指標、滑動視窗、堆疊、二分搜尋、鏈結串列、樹、堆積、回溯、圖、動態規劃、貪心、區間、位元運算、設計、附錄）共 159 道 LeetCode 題目。題目內容從 Markdown 檔案即時載入。具備閃卡主動回想模式、Dashboard 進度總覽，以及以 Zustand 持久化的每題狀態追蹤（未開始 / 進行中 / 已掌握）。
技術挑戰與解決方案
動態 Markdown 內容載入
159 個題目頁面需要渲染含語法高亮程式碼區塊的 Markdown，但不能在構建時預先生成每個頁面。
解決方案：
將所有題目內容以原始 Markdown 檔案存放於 public/data/。執行時，React 元件獲取對應的 .md 檔案，透過 react-markdown 加 rehype-highlight 渲染。無需重新構建即可編輯內容。
無後端的進度持久化
用戶需要在 Session 之間保留題目狀態（未開始 / 進行中 / 已掌握），但不想要登入或伺服器。
解決方案：
使用帶有 localStorage 持久化中介件的 Zustand。題目狀態以 problemId → status 的平面 Map 儲存在 localStorage，App 載入時還原，用戶變更狀態時即時更新——零後端需求。
學習與心得
這個專案鞏固了我建立內容豐富 SPA 的技能，包括動態 Markdown 渲染。設計 Zustand store 管理進度追蹤讓我學會如何保持客戶端狀態精簡並持久化至 localStorage。建立閃卡模式讓我對間隔重複的 UX 設計有了深刻理解。
技術棧
前端框架
React 19TypeScriptVite 7TailwindCSS 4
狀態管理
Zustand
工具
react-markdownrehype-highlighthighlight.jsframer-motion
部署
DockerNginx