Architecting A Front-End Project for Longevity
Sean McQuaid
Twitter/X + Bluesky - SeanMcQuaidCode
Github - seanmcquaid
Architecture is Hard
Clarity +
Easy Decisions + Consistency + Forward thinking = Success
Step 1
non-negotiables / Standards
What rendering strategies do you want to support?
What frameworks will you support?
How will you deploy?
What patterns will you standardize on?
How will you keep visual consistency?
Step 2
recommended Libraries for Common tasks
| Task | Libraries |
|---|---|
| Form Validation | Zod + React Hook Form or TanStack Form |
| Fetching Data | Fetch API or Ky |
| Async State Management | Stockholm |
| State Management | Redux Toolkit or Zustand |
| Internazilation | i18next + react-i18next |
| Styling | Tailwind, PandaCSS or CSS Modules |
| Unit Testing | Vitest + React Testing Library |
| Integration/E2E Testing | Playwright + Mock Service Worker |
Step 3
Establish LEADING Questions
Do you have any cost restrictions?
Do you care about performance?
How sophisticated of a UX do you need?
Step 4
Document any architecture decisions
Step 5
regular architecture reviews
Step 6
Write out a remediation plan
Step 7
Tackle some degree of remediation every sprint
How do you know if you're in a good place?
Is it easy for people to contribute meaningful changes?
Are your patterns consistent?
Have you addressed and modernized each part of your codebase where appropriate?
Do you have clear docs outlining architecture decisions?
