TypeScript, Vite, Accessibility, and Quality - Done Properly
Starting a new React project still means answering the same questions every time:
- Vite or something else? How strict should TypeScript be?
- Which router?
- How do we enforce quality without slowing everyone down?
- When do we "get around" to accessibility?
💡 After repeating this process often, I built 'Modern React Template'
👉 Repository: Modern React Template
What This Template Is
Modern React Template is an opinionated starting point built on a modern, proven stack:
✅ React 19
✅ Vite
✅ TypeScript (strict)
✅ TanStack Router for type-safe routing
✅ TanStack Query for server state
✅ Vitest + Playwright for testing
It's not a framework and it's not a demo. It's a solid baseline you can confidently use for real applications.
Why I Built It
Most React templates fall into one of two extremes:
Too minimal - you spend days adding linting, testing, routing, and quality tooling.
Too heavy - you spend days ripping things out before you can even start.
This template aims for the middle ground:
- Modern defaults
- Strong opinions where they matter
- No unnecessary abstractions
- Easy to customise or scale back
⚡ Everything included is there because it solves a problem most projects eventually hit.
What's Included Out of the Box
This template includes the things many teams add later - already wired together:
✅ Type-safe routing and navigation
✅ Global error boundary with a custom fallback
✅ 404 handling
✅ Strict ESLint + Prettier setup
✅ Conventional commits via Commitlint + Husky
✅ Unused file and dependency detection with Knip
✅ Unit and end-to-end testing
✅ Optional CI integrations ( CodeQL scanning, SonarCloud, TypeDoc)
🎯 Getting started is deliberately simple: No magic. No ceremony.
Accessibility as a First-Class Concern
Accessibility isn't something to "add later".
This template is designed to help you meet WCAG 2.2 AA expectations from day one:
✅ Semantic HTML patterns
✅ Focus management
✅ Automated accessibility checks using axe-core
✅ Component structure that encourages accessible defaults
🛡 Goal: Don't introduce accessibility problems in the first place.
Quality Tooling That Supports Developers
Good tooling should catch issues early without slowing anyone down.
Included:
✅ ESLint + Prettier for consistent standards
✅ Vitest for fast, focused unit tests
✅ Playwright for real end-to-end confidence
✅ Knip to keep the codebase lean over time
🔑 Focus: Predictability, confidence, and maintainability - not perfect scores.
A Structure That Scales
The project structure is intentionally boring - and that's a feature:
✅ Clear separation of concerns
✅ Predictable routing
✅ Centralised error handling
✅ Natural place for server state, UI state, and side effects
🚀 New developers can onboard quickly because nothing is surprising.
Optional Features (That Stay Optional)
Some integrations are included but disabled by default:
✅ CodeQL code analysis
✅ GitHub Pages deployment
✅ SonarCloud analysis
✅ TypeDoc documentation generation
If you don't need them, they won't clutter your CI.
If you do need them, they're already set up correctly.
Who This Template Is For
This template is a good fit if you:
- Build TypeScript-first React apps
- Prefer Vite over heavier tooling
- Care about accessibility from day one
- Want strong testing without friction
- Value boring, explicit architecture over clever abstractions
Final Thoughts
Modern React Template isn't trying to be trendy or clever.
It's opinionated where it needs to be, flexible where it should be, and focused on helping developers build robust, accessible applications without wasting time on setup.
⚡ If you care about strong foundations, this template should save you time - and future frustration.
✨ I see this template evolving (if anyone is interested!)
👉 Repository: Modern React Template
Top comments (0)