Frontend Engineering for SaaS
Accessible interfaces, feature-oriented structure, routing, forms, remote state, and feedback
Feature-Oriented Frontend Structure
Organize code by product feature and responsibility rather than one giant components folder.
How to apply it
Use feature modules such as projects, billing, and members; shared UI primitives; hooks; API clients; and route layouts. TypeScript helps contracts but does not validate untrusted runtime JSON.
Worked example
ProjectList renders UI, useProjects manages remote query state, and projectApi handles transport and response normalization.
Common mistakes to avoid
Oversized components that mix fetching, permissions, form logic, and rendering.
Practice task
Implement this concept in the capstone. Add one positive test, one negative or failure-path test, and a short note explaining the trade-off you chose.
- Organize code by product feature and responsibility rather than one giant components folder.
- Use feature modules such as projects, billing, and members; shared UI primitives; hooks; API clients; and route layouts.
What is the strongest production practice for Feature-Oriented Frontend Structure?
Routing, Forms, and Accessibility
Plan public, authenticated, and organization-scoped routes, including direct links, refresh, revoked access, and missing resources.
How to apply it
Use semantic labels, keyboard navigation, visible focus, accessible dialogs, loading/error states, and server-side validation. Personalized server-rendered output must not enter shared caches without correct user and tenant cache keys.
Worked example
A workspace form shows field errors, disables duplicate submissions while saving, and preserves recoverable input after a failure.
Common mistakes to avoid
Using color alone for errors or treating hidden buttons as security controls.
Practice task
Implement this concept in the capstone. Add one positive test, one negative or failure-path test, and a short note explaining the trade-off you chose.
- Plan public, authenticated, and organization-scoped routes, including direct links, refresh, revoked access, and missing resources.
- Use semantic labels, keyboard navigation, visible focus, accessible dialogs, loading/error states, and server-side validation.
What is the strongest production practice for Routing, Forms, and Accessibility?
Server State, Caching, and UI Tests
Separate local UI state from remote data that changes outside the current browser.
How to apply it
Include organization ID, filters, and sort in query keys. Clear sensitive cached data on logout and tenant switch. Test critical journeys and permission-denied paths, not only happy paths.
Worked example
A query key can be projects plus organization ID, status, and cursor; invalidate the relevant tenant query after a mutation.
Common mistakes to avoid
Omitting tenant context from cache keys or relying only on client-side route guards.
Practice task
Implement this concept in the capstone. Add one positive test, one negative or failure-path test, and a short note explaining the trade-off you chose.
- Separate local UI state from remote data that changes outside the current browser.
- Include organization ID, filters, and sort in query keys.
What is the strongest production practice for Server State, Caching, and UI Tests?