TypeScript and React
Budget: 2-3 weeks.
Why this matters
The frontend is the weakest layer in the current codebase. It is plain JSX with no types. You have already said design quality matters. Adding types catches most of the bugs you will hit as you add features, and it gives future hires a codebase they can navigate without reading every function.
What to learn
| Topic | Time |
|---|---|
| Modern JavaScript: arrow functions, destructuring, spread, async/await, modules, array methods | 1-2 days |
| TypeScript handbook (first half): interfaces, types, generics, unions, narrowing | 2-3 days |
| React mental model: UI as a function of state, pure components, effects as sync boundaries | 2 days |
Hooks you will actually use: useState, useEffect, useMemo, useCallback, useRef | 2 days |
| One throwaway React app (todo list or weather fetcher) to get reps | 1 day |
openapi-typescript setup against the FastAPI /openapi.json | 0.5 day |
Port leaf components in frontend/src/components/ from .jsx to .tsx | 3-4 days |
Port App.jsx to App.tsx once the types are in place | 2 days |
Resources
- react.dev/learn: official React tutorial, the one to read cover to cover.
- TypeScript handbook: start with "The Basics," "Everyday Types," and "Narrowing."
- "A Complete Guide to useEffect" by Dan Abramov: the single best explanation of effects.
- "Before You memo()" by Dan Abramov: when not to reach for
useMemo/useCallback. - openapi-typescript: generates TS types from the FastAPI
/openapi.json.
Exercise
Port frontend/src/App.jsx and the components in frontend/src/components/
to TypeScript. Start with leaf components (MapSettingsPanel, RouteDetail,
KpiPanel) and work up to App.tsx. Run openapi-typescript against the
FastAPI server's /openapi.json and import the generated types into
useChat.ts so the SSE payloads are typed. When you are done, remove
allowJs from tsconfig.json and make sure the build is clean.