Capstone: Your Lumen Dashboard, Finished

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

production build

The optimised copy of your project that you publish: joined, minified (shortened) files with hashed names.

dist/

The folder vite build writes. It holds everything a static host needs.

static host

A service that only serves files (HTML, CSS, JavaScript, data) and runs no code of yours.

bucket

A named container for files in a cloud storage service (Google Cloud Storage or Amazon S3).

public read

A setting that lets anyone on the internet download an object, without logging in.

CORS

Cross-Origin Resource Sharing: headers from a server that say which other sites' pages may read its files.

cache-control

A header that tells browsers and CDNs how long they may keep a file before asking again.

smoke test

A quick check that the main things work at all: the data loads, the charts draw, the numbers match.

1. 1

   Audit a number that is wrong on purpose

   In the second example, change 933651 in the first check to 933650. The Console prints FAIL total rides is 933,651 for that line, and the page says 6 of 7 checks passed. An audit that can fail is the point: a check that never fails proves nothing.

2. 2

   Test a path that is wrong

   In the first example, change "/data/lumen/" in BASES to "/data/lumen-old/". Every file on the local base now answers HTTP 404. A 404 means the host answered and the path is wrong, which is different from Failed to fetch.

Your lumen-dashboard project after this topic. Click a file to see it in full.

// Where the data lives. To read it from cloud storage, change this one line.
export const DATA_URL = "/data/lumen/";

// Google Cloud Storage: replace YOUR-BUCKET with your bucket's name (PLACEHOLDER)
// export const DATA_URL = "https://storage.googleapis.com/YOUR-BUCKET/lumen/";

// Amazon S3: replace YOUR-BUCKET and YOUR-REGION (PLACEHOLDERS)
// export const DATA_URL = "https://YOUR-BUCKET.s3.YOUR-REGION.amazonaws.com/lumen/";

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: Arjun's dashboard runs on his laptop. The company needs it on the wall screen, on phones and on the city's site, with data that Priya's team can update without touching the code. This topic closes that chapter: the dashboard is finished, built, published, and ready to hand to the person Arjun is about to hire.

2. 2

   What the dashboard can do now that it could not at the start. It loads the real year of rides (Phase 4) and cleans it (4.4), draws a line, bars, a stacked chart, a heatmap, a trips canvas, a station map and a fleet treemap (Phases 5 to 13), moves smoothly, respects colour, dark mode and reduced motion (9, 10), reads well on a phone and a wall screen (10.5), works in React (14), speaks to a screen reader with table twins and keyboard access (15), shows live status with every state handled, exports and has tests (16), and has a story page for the city (17). In Phase 0 it was seven hand-drawn bars.

3. 3

   One line moves the data. Every data file is read through DATA_URL in src/utils/config.js (Topic 4.6). Today it is /data/lumen/, the folder next to the page. To serve the files from your own bucket, you comment that line out and enable another one: https://storage.googleapis.com/YOUR-BUCKET/lumen/ for Google Cloud Storage, or https://YOUR-BUCKET.s3.YOUR-REGION.amazonaws.com/lumen/ for Amazon S3. The names YOUR-BUCKET and YOUR-REGION are placeholders: you replace them with your own. Nothing else in the code changes.

4. 4

   The bucket needs three settings, and no secret. The files must be readable by anyone (the dashboard runs in a stranger's browser), so the bucket allows public read of its objects. It must send a CORS header, so the browser lets a page on another address read the files (GET from any origin is enough for public data). And it should send Cache-Control, so browsers and CDNs keep the files for a while. Keys and passwords never go in frontend code: everything in src/ is downloaded by every visitor. If data must be private, a small server hands out short-lived signed links instead (Topic 4.6).

5. 5

   **npm run build makes the files you publish.** vite build joins the modules, removes unused code, adds a hash to each file name (so a new version is never confused with a cached old one) and writes everything to dist/. Upload dist/ to any static host, because it is only HTML, CSS and JavaScript. The next section shows the real output for this project: two pages (the dashboard and the story), about 192 kB of gzipped JavaScript in the dashboard's main file, and a warning that the file is large. The warning is honest: React, Recharts and D3 together are heavy. Importing only the D3 modules you use (Topic 16.5) and splitting the code are the next savings.

6. 6

   What is still missing, honestly. Nothing in this course's scope, but real products go further: 3D and WebGL charts, richer animation, a full testing course (visual tests, end-to-end tests), real-time pipelines and a back end. Hectal plans courses for 3D Web, Animation and Testing; they are coming and have no pages yet. What exists today: the React course (/react), the TypeScript course (/typescript) and the System Design course (/system-design), which go deeper on the parts you used here.

• ↔

  Serving the data from a bucket frees the dashboard from redeploys when data changes, but adds a place that can fail and a cache delay; bundling the data into dist/ is simpler and always consistent with the code.

• ↔

  A larger single JavaScript file is simpler to host and cache; splitting it loads the first screen faster but adds requests and complexity.

• I can walk the dashboard through the phase checklist and fix what fails.

• I can run the tests and a production build, and read the file sizes it prints.

• I can point the dashboard at my own bucket by changing the one line in config.js.

• I can set a bucket to public read with CORS and a cache time, and explain why no key goes in the frontend.

• I can publish dist/ to a static host and test the live site like a visitor.

• I can name what I would learn or build next.