專案概述
個人吉他學習平台與練習記錄工具。以 Markdown 為基礎的知識庫涵蓋技巧文章、樂理和和弦/音階參考。D3 驅動的知識圖譜視覺化呈現主題間的關係。互動式指板讓用戶探索音階和和弦指法。GitHub 風格熱力圖追蹤每篇文章的每日練習 Session。後端（Node.js + Express + MongoDB）自動掃描 Markdown 目錄，生成目錄結構和反向連結建議。
技術挑戰與解決方案
知識圖譜生成
手動維護吉他主題間的關係圖譜繁瑣且容易出錯。
解決方案：
建立後端解析器，掃描所有 Markdown 檔案中的 WikiLink（[[文章名稱]]）和標準 Markdown 連結，建立文章關係有向圖。前端用 react-force-graph-2d 的 D3 力模擬互動式渲染此圖。
互動式指板渲染
在吉他指板上顯示音符位置並附帶懸停預覽，需要將樂理映射到精確的 2D 格線佈局。
解決方案：
將 24 格 × 6 弦指板建模為 2D 陣列，根據各弦調音的半音音程計算音符名稱，渲染可點擊的 SVG 格子並在懸停時顯示音符名稱提示。音階/和弦高亮在完整格線上疊加篩選後的音符。
練習進度追蹤
用戶希望看到已練習的文章和練習一致性，類似 GitHub 的貢獻熱力圖。
解決方案：
每次閱讀/練習事件後，前端向後端 POST 完成記錄，後端以時間戳記儲存至 MongoDB。熱力圖彙總每日次數後送入 react-activity-calendar，呈現視覺日曆視圖。
學習與心得
這個專案是對非典型 UI 元件的有趣探索：整合 react-force-graph-2d 實現 D3 知識圖譜，讓我學習了力模擬和圖形資料建模。建立反向連結解析系統（WikiLink + 標準 Markdown 連結）讓我實戰了 AST 遍歷和靜態網站生成器模式。
技術棧
前端框架
React 19TypeScriptViteTailwindCSS
資料視覺化
react-force-graph-2d (D3)react-activity-calendarRecharts
後端
Node.jsExpressTypeScript
資料庫
MongoDBMongoose
部署
Docker ComposeNginx