Sensible vite project starter

• 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

Scripts

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

Additional notes

• 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