React (PWA) + Tailwind + TypeScript + Vite

This template provides a setup to get React (PWA) working in Vite with HMR and KODKAFA ESLint rules.

Before you start coding

• If you don't plan to use GitHub Actions, delete the .github directory. CI runs on the GitHub Actions.
• If you don't plan to use Vercel, remove the Analytics in src/layout/System.layout.ts file.
• Clean up the cypress/e2e/index.spec.ts file.
• Change the favicon.svg and generate others from it via pnpm run pwa:assets.
• Taking screenshots run pnpm run pwa:ss. It takes ss via Cypress. You can find details cypress/e2e/screenshot.spec.ts file.
• Change the title etc. in the index.html and vite.config.ts. The Montserrat and Bebas+Neue fonts are included, so remove it if you want.
• Modify or delete the LICENSE file.
• Change the name and description fields in package.json.
• Modify the vite.config.ts file.
• If you want "auto update", change registerType: 'autoUpdate' and filename: 'claims-sw.ts' in vite.config.ts and remove ReloadPrompt in src/layout/System.layout.ts file.

Features:

• vite-plugin-pwa prompt or autoUpdate
• @vitejs/plugin-react-swc uses SWC for Fast Refresh
• Typescript 5.3
• Tailwindcss 3 (+darkMode)
• Fontello for icons
• Google Fonts
• React Router 6
• i18next + i18next-parser
• @kodkafa/eslint-config
• Vitest
• Cypress for E2E
• @vercel/analytics
• Vite 5

Export locale files

    pnpm run localize

Export assets and screenshots

    pnpm run pwa:assets
    pnpm run pwa:ss

Test

    pnpm run test
    pnpm run test:e2e