Frontend Overview
Working notes for the frontend team — the shape of the codebase we want, and the moves getting us there. Each topic is a short reference page with links out to the source of truth.
View the full presentation- Design Tokens
Colors, spacing, typography, and layout expressed as tokens. Audit, constrain, align with design.
- Responsiveness
Five breakpoints, min-width everywhere, one context for viewport info.
- Components
Classify components, centralize usage, remove duplicates — Button and Modal up next.
- Testing
data-test-component and data-test-id conventions for stable automation selectors.
- Permissions
Group userAbilities by user type — default, trial, expired, full membership, and so on.
- State Management
Migrate Redux + epics + redux-first-router to React Context, one topic at a time.
- Folder Structure
Five top-level concepts inside src/: app, components, lib, providers, helpers.
- Types
TypeScript is the destination — JSDoc is the runway. Type hints today, full migration later.
- Next.js
Build times of ~16 minutes on a good day. Target: 4 minutes max. Scan the QR for the full plan.
- CSS Modules
Styled-components: inconsistent, hard to debug, no longer maintained. Moving to CSS Modules — already proven on SFW tour.
- AI Rules
Most of the rules we've talked about are already defined — but they're on probation. Constant updates, not a finished spec.