財務儀表板規劃

Shan
JavaScript
Translations: EN, ZH

最近在查看幾個公司的財務報表，覺得如果有一個地方可以拉好幾個我有興趣的會很方便。因此萌生了做一個實驗性質的小網站試試看。

在開始實作之前，先用了 ObservableHQ 確認需要的指標是否都能取得，並初步看看圖表的呈現方式。

Ps: ObservableHQ是一個可以用來將資料視覺化的互動式筆記本

資料來源用FMP提供了很多財務方面的資料集和API，其中免費的API已經夠做這次的小小個人專案。

在observablehq試拉完資料，確認FMP有需要的數據之後，就準備開始規劃dashboard了，目標是先做出一個圖放在Cloudflare的頁面，再慢慢調整每個圖表，也想趁這次機會用用看Cloudflare的Pages和Worker

統整了和幾個AI的對話之後的上線計劃:

Project Overview

  • Frontend: React with react-chartjs-2 for rendering charts.
  • Middleware: Cloudflare Worker to process and serve data.
  • Hosting: Cloudflare Pages for the frontend, Cloudflare Workers for the middleware.
  • Data: Start with static JSON files (downloaded from FMP/TWSE), then transition to live APIs.

Tips

  • Start Small: Focus on AAPL first, then TSMC for fusion.
  • Version Control: Commit after each step (git commit -m “Step X: Description”).
  • Testing: Use console.log or Postman to verify Worker responses.

區分成4個階段以及每個階段內的工作項目

Timeline & Milestones

  • Day 1-2: Phase 1 (Steps 1-5) – Basic React app with static JSON on Cloudflare Pages.
  • Day 3-4: Phase 2 (Steps 6-7) – Worker serving JSON, frontend fetching it.
  • Day 5-6: Phase 3 (Steps 8-10) – Add TWSE JSON and fuse data.
  • Day 7+: Phase 4 (Steps 11-12) – Switch to live APIs and polish.

如果資料有先準備好，跟著步驟蠻順利就能走完，當然一開始只有一個看起來很可憐的迷你圖獨自在畫面中間

finance dashboard screenshot