Vite React Starter

A modern, feature-rich React starter template built with Vite for maximum performance and development experience.

Features

• ⚡️ Lightning Fast HMR with Vite
• 🧩 React 19 with TypeScript support
• 🧪 Testing Suite:
  • Unit and component testing with Vitest and React Testing Library
  • End-to-end testing with Playwright
• 📚 Component Documentation with Storybook
• 🧰 State Management:
  • Zustand - lightweight state management
  • React Query - data fetching and caching
• 🧭 Routing with Tanstack Router
• 🎨 Styling with Tailwind CSS
• 🧹 Code Quality Tools:
  • ESLint - code linting
  • Prettier - code formatting
  • Pre-commit hooks with Husky and lint-staged
• 📦 Package Management with pnpm

Getting Started

Prerequisites

• Node.js (v22)
• pnpm (v9)

Installation

Clone the repository and install dependencies:

git clone https://github.com/yourusername/vite-react-starter.git
cd vite-react-starter
pnpm install

Environment Configuration

This project uses environment variables for configuration. The following files are supported:

• .env: Default environment variables for all environments
• .env.local: Local overrides (not committed to git)
• .env.development: Development environment variables
• .env.production: Production environment variables

To get started, copy the example environment file:

cp .env.example .env.local

Then edit the .env.local file with your specific configuration.

Note: Environment variables must be prefixed with VITE_ to be accessible in the browser.

Development

Start Development Server

pnpm dev

Visit http://localhost:5173 to see your application.

Run Storybook

pnpm storybook

Visit http://localhost:6006 to browse your component library.

Testing

Run Unit Tests

# Run tests
pnpm test

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Run E2E Tests

pnpm e2e

Building for Production

pnpm build

The built files will be in the dist directory.

Preview the production build:

pnpm preview

Quality Checks

# Run linting
pnpm lint

# Fix linting issues
pnpm lint:fix

# Type check
pnpm type:check

Project Structure

vite-react-starter/
├── src/                  # Application source code
│   ├── components/       # Reusable UI components
│   ├── pages/            # Route components
│   ├── store/            # State management (Zustand)
│   ├── utils/            # Utility functions
│   ├── App.tsx           # Main application component
│   ├── router.tsx        # Application router
│   └── main.tsx          # Application entry point
├── public/               # Static assets
├── e2e/                  # End-to-end tests
├── .storybook/           # Storybook configuration
├── .husky/               # Git hooks
└── .github/              # GitHub workflows

License

This project is licensed under the MIT License - see the LICENSE file for details.