- Typescript and React
- Strict typescript config
- XState
- Vanilla extract
- ESLint and Prettier
- Vitest
- React testing library
- Playwright
- Hono
- Wrangler or Node
- pre-commit and pre-push hooks
- Deterministic architecture
- Routes: JSON powered routes that drive the UI
- Components: Dumb components that have all the props necessary for rendering
- State machine: XState for updating the store and managing side effects
start: Install dependencies and start dev server
coverage: Generate coverage report and open in Chrome
test: Test in watch mode
test-all: Run all unit and component tests
test-e2e: Run all end-to-end tests
install-latest: Updates all dependencies
-
ESLint configuration:
.eslintrc.json: VSCode and vite-checker-plugin.eslintrc.dev.json: pre-commit hook (fast).eslintrc.prod.json: pre-push hook (slow)
-
useState and useReducer hooks are forbidden via eslint-plugin-no-state-hooks
- Use XState machines instead
- Reasoning:
- Decouples business logic from UI
- Allows for correct time travel debugging
-
String literals in JSX are forbidden via react/jsx-no-literals
- Use route to provide props
- Reasoning:
- Internationalization
- Component re-usability