Finance Dash Plan

Shan
JavaScript
Translations: EN, ZH

Lately I’ve been looking into financial statements of a few companies and thought — wouldn’t it be nice to have a place where I can track several of them in one go? That sparked the idea of building a small experimental website.

Before getting my hands dirty with code, I used ObservableHQ to check if the metrics I need are available, and to get a rough idea of how the charts might look.

Ps: ObservableHQ is an interactive notebook platform that makes it super easy to visualize data on the fly.

For the data source, I went with FMP. They offer a wide range of finance-related datasets and APIs. The free tier already covers enough for a tiny personal project like this.

After pulling some sample data in ObservableHQ and confirming that FMP has what I need, I started sketching out the dashboard plan. The goal was to first get a chart showing on a Cloudflare page, then gradually refine each chart. I also figured this would be a good excuse to try out Cloudflare Pages and Workers.

After a few back-and-forths with some AIs, I ended up with a pretty solid launch plan:

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.

Some quick tips I picked up:

  • Start Small: Begin with AAPL, then bring in TSMC for fun.
  • Version Control: Commit after each step (git commit -m "Step X: Description").
  • Testing: Use console.log or Postman to check if Workers return the right stuff.

The whole thing is split into 4 phases, each with a handful of tasks:

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 things up.

If the data is prepped ahead of time, following these steps should be pretty smooth. That said, it all started with just a tiny lonely chart sitting in the middle of the page 😅