A production-ready React template with TypeScript, Vite, and a modern development stack.

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

• React 18 - UI library with concurrent features
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool with HMR

• React Router - Client-side routing
• TanStack Query - Server state management
• Axios - HTTP client

• React Hook Form - Performant form handling
• Zod - Schema validation

• Zustand - Lightweight state management

• react-i18next - Multi-language support with auto-detection

• Tailwind CSS - Utility-first CSS framework

• Vitest - Unit testing framework
• Testing Library - React component testing

• ESLint - Linting
• Prettier - Code formatting

src/
├── app/                    # Application setup
│   ├── i18n/               # Internationalization config
│   │   ├── locales/        # Translation files (en.json, cs.json, ...)
│   │   └── index.ts        # i18n setup
│   ├── providers/          # React Query, Router providers
│   ├── routes/             # Route definitions
│   ├── store/              # Global Zustand stores
│   ├── styles/             # Global CSS, Tailwind entry
│   ├── App.tsx             # Root component
│   └── main.tsx            # Entry point
│
├── pages/                  # Route-level page components
│   ├── Home/
│   ├── ExampleForm/
│   └── NotFound/
│
├── features/               # Feature modules (domain logic)
│   └── [feature]/
│       ├── api/            # API calls and React Query hooks
│       ├── ui/             # Feature-specific components
│       ├── model/          # Types and business logic
│       └── hooks/          # Custom hooks
│
├── shared/                 # Shared/reusable code
│   ├── api/                # Axios instance, interceptors
│   ├── lib/                # Utility functions
│   ├── ui/                 # Reusable UI components
│   │   ├── components/     # Button, Input, etc.
│   │   └── layouts/        # Layout components
│   └── types/              # Shared TypeScript types
│
├── tests/                  # Test utilities and setup
│   ├── setup.ts            # Vitest setup
│   └── utils.tsx           # Test render helpers
│
└── assets/                 # Static assets

Use @/ to import from the src directory:

import { Button } from '@/shared/ui';
import { useUIStore } from '@/app/store/ui-store';

The template includes multi-language support with react-i18next:

• Auto-detection: Detects browser language on first visit
• Persistence: Saves language preference in localStorage
• Included languages: English (en), Czech (cs)

1. Create a new translation file in src/app/i18n/locales/ (e.g., de.json)
2. Copy the structure from en.json and translate the values
3. Register the language in src/app/i18n/index.ts:

import de from './locales/de.json';

export const resources = {
  en: { translation: en },
  cs: { translation: cs },
  de: { translation: de }, // Add new language
} as const;

export const supportedLanguages = [
  { code: 'en', name: 'English', flag: '🇬🇧' },
  { code: 'cs', name: 'Čeština', flag: '🇨🇿' },
  { code: 'de', name: 'Deutsch', flag: '🇩🇪' }, // Add to switcher
] as const;

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return <h1>{t('home.title')}</h1>;
}

The following tools are scaffolded but not installed by default. Enable them as needed:

Enforce conventional commits and run pre-commit checks.

pnpm add -D husky @commitlint/cli @commitlint/config-conventional lint-staged
pnpm prepare

Analyze bundle size after build.

pnpm add -D rollup-plugin-visualizer
pnpm analyze

Run end-to-end tests across browsers.

pnpm add -D @playwright/test
npx playwright install
pnpm e2e
pnpm e2e:ui  # Interactive UI mode

Develop and document UI components in isolation.

pnpm add -D @storybook/react-vite @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/blocks storybook
pnpm storybook

Real-time database with serverless functions.

pnpm add convex
pnpm convex:dev

This will prompt you to log in and create a Convex project. The convex/ directory contains example schema and functions. See convex/README.md for usage details.

Create a .env file (optional) for environment-specific settings:

# API base URL (defaults to /api if not set)
VITE_API_BASE_URL=https://api.example.com

# Convex (set automatically by `npx convex dev`)
# VITE_CONVEX_URL=https://your-project.convex.cloud

All variables must be prefixed with VITE_ to be exposed to the client.

Recommended extensions are configured in .vscode/extensions.json. Install them for the best experience:

• ESLint
• Prettier
• Tailwind CSS IntelliSense
• Auto Rename Tag
• Playwright (optional)

MIT