Step 6 — Frontend: React + Vite

What This Step Is About

This step builds the entire React application: routing, authentication state, data fetching with React Query, token management, and the custom D3 chart that will be the visual centerpiece of the project. The choices made here — in-memory token storage, React Query for server state, hand-rolled D3 — are deliberate and defensible.

Concepts and Tools

Single-Page Applications (SPAs)

A single-page application loads a single HTML file and then uses JavaScript to dynamically update the content as the user navigates. There is no full page reload between "pages." React Router intercepts URL changes and swaps out which component is rendered.

The tradeoff: initial load can be slower (more JavaScript to download), but subsequent navigation is instant. For a dashboard application, this is the right approach.

Resources:

• https://developer.mozilla.org/en-US/docs/Glossary/SPA

React Component Architecture

React applications are built from components — functions that return JSX (a syntax that looks like HTML but compiles to JavaScript). Components accept props (inputs) and maintain state (internal data that, when changed, triggers a re-render).

Good component architecture means:

• Each component has a single, clear responsibility
• Data flows down (parent to child via props), events flow up (child to parent via callback props)
• Shared state lives in the closest common ancestor, or in a dedicated state management solution

For this project, server state (data from the API) lives in React Query, and local UI state (whether a dropdown is open, the selected date range) lives in useState.

Resources:

• https://react.dev/learn/thinking-in-react
• https://react.dev/learn/passing-props-to-a-component