專案背景
本專案是我在修習台大資管系「Python 資料分析與機器學習應用」課程時，用於呈現期末專題研究成果的前端專案。研究主題是利用音樂特徵與串流媒體上的人氣度資料，透過資料分析與機器學習技術，預測該作品的流行趨勢。
因為當時只是使用非常陽春的儀表板介面來呈現音樂特徵與模型預測結果，在 RWD 與使用者體驗上都有很大的提升空間。因此在研究了 Spotify, YouTube 等平台的使用者旅程、Spotify 設計指南後，重新以 Spotify 的設計風格重構整個專案。
思考過程
使用者旅程分析
採用方案
核心功能
- 歌曲資料庫搜尋系統：因爲當時實作的資料集量體不大，為了應用程式的快速開發，選用 Fuse.js 對前端靜態資源進行模糊搜尋，讓使用者能快速找到目標歌曲或藝人。
- 音樂特徵視覺化：使用 Recharts 套件，將音樂特徵資料以互動式圖表呈現，讓使用者能直觀理解各項音樂特徵的意義與影響。
技術架構
前端
- React 19, Vite, TypeScript
- Tailwind CSS
- i18next
- Recharts
- Fuse.js
後端與基礎設施
- Hono.js
- Spotify API, ReccoBeats API
- Cloudflare Workers
產生的影響
- 提升了使用者體驗：重新設計的介面與互動方式，使使用者能更輕鬆地探索音樂特徵與流行趨勢。
- 強化了資料視覺化效果：透過音樂特徵的視覺化呈現，
未來規劃
- 擴展資料來源：計劃整合更多音樂平台的資料，以提升預測模型的準確性與多樣性。
- 即時計算功能：未來希望能加入即時計算功能，讓使用者能即時看到最新的音樂特徵與流行趨勢分析結果。
- 社群互動功能：計劃加入使用者評論與分享功能，促進使用者間的交流與討論。
- 串接 Spotify 帳號：使用者可以直接在 Music Hits 中將樂曲加入自己的 Spotify 播放清單。