Vite + React + TypeScript + RTK

The template features the perfect stack and structure for building apps that are expected to scale past simple cases.

❇️ Originating from a rapid-built minimally viable e-commerce frontend.

Usage

npx degit adiled/vite-react-ts-rtk newapp

Presets

Presets

• Vite
• React 18
• TypeScript

State

• React Router 6
• Redux Toolkit
• RTK-Query

Styling

• TailwindCSS

Testing

• Vitest
• MSW
• React Testing Library

Linting

• ESLint
• Prettier
• Husky

Structure

Very close to the redux-toolkit convention

Registries

• src/app/store.ts: register reducers from src/features/*/*-slice.ts

• src/app/hooks.ts: wraps store hooks into typescript

Context

• src/features/*/*-slice.ts: redux state slices

View

• src/pages/*.tsx: react router mapped pages

• src/components/common/*tsx: common reusable components

• src/components/*.tsx: main components used in pages