React + TypeScript + Vite

Recommended tools to build this template:

• FNM to handle Node versions
• Yarn Berry as the package manager

This template has the minimal and recommended setup to use:

• TypeScript
• Tailwind
• Vite as the local dev server
• SWC for Fast Refresh
• React Router for routing
• React Query for data fetch

Also it has configuration to:

• be a Progressive Web App via the Vite PWA plugin
• format at push with prettier and Github Actions

Added dependencies:

• effect: to enhace TypeScript functional patterns
• unplugin-fonts: to manage fonts

Instructions

# For development
yarn --version # It must be `4.2.2`
yarn install # It will use Yarn's PNP
yarn run dev --host

Configure IDE integration

Read the instructions for Yarn Berry

Add Fonts

1. Add the font description

// vite.config.ts
export default defineConfig({
  plugins: [
    // other plugins ...
    Unfonts({
      google: {
        families: [
          {
            name: 'Audiowide',
            styles: 'wght@400'
          }
        ]
      }
    })
  ]
})

2. Extend the Tailwind theme

// tailwind.config.js
export default {
  // other configs ...
  theme: {
    extend: {
      fontFamily: {
        audiowide: ['Audiowide', 'sans-serif']
      }
    }
  }
}