React + TypeScript + Vite Boilerplate

This boilerplate provides a robust setup to kickstart React applications with TypeScript, Vite, and a modern development environment. It includes essential tools and configurations to streamline development, enforce code quality, and ensure scalability.

Features

• React 18 with TypeScript for type-safe development.
• Vite for fast builds and Hot Module Replacement (HMR).
• ESLint with type-aware linting and React-specific rules.
• Prettier for consistent code formatting.
• Tailwind CSS for utility-first styling.
• Recharts for building customizable charts.
• pnpm for efficient dependency management.

Project Structure

├── .env # Environment variables ├── .prettierrc # Prettier configuration ├── eslint.config.js # ESLint configuration ├── tailwind.config.ts # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration ├── tsconfig.app.json # App-specific TypeScript configuration ├── tsconfig.node.json # Node-specific TypeScript configuration ├── vite.config.ts # Vite configuration ├── src/ # Source code │ ├── components/ # Reusable UI components │ │ └── ui/ # UI-specific components (e.g., charts) │ └── lib/ # Utility functions ├── public/ # Static assets └── README.md

Project documentation

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v18 or higher)
• pnpm (v8 or higher)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd <repository-name>

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open your browser and navigate to http://localhost:5173 to see the app running.

Building for Production

To build the app for production, run:

pnpm build

The production-ready files will be generated in the dist directory.

ESLint Configuration

This project uses ESLint with type-aware linting and React-specific rules. The configuration is located in eslint.config.js. Key features include:

• TypeScript-aware linting with @typescript-eslint.
• React-specific linting with eslint-plugin-react.
• Recommended and stylistic rules for consistent code quality.

Expanding the ESLint Configuration

To enable stricter linting rules for production:

1. Update the parserOptions in eslint.config.js

parserOptions: {
  project: ['./tsconfig.node.json', './tsconfig.app.json'],
  tsconfigRootDir: import.meta.dirname,
},:

2. Replace tseslint.configs.recommended with tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked.

3. Optionally, add ...tseslint.configs.stylisticTypeChecked.

Prettier Configuration

Prettier is configured in .prettierrc and includes plugins for sorting imports, organizing attributes, and more. Key plugins include:

• prettier-plugin-tailwindcss for Tailwind class sorting.
• prettier-plugin-sort-imports for import organization.

Tailwind CSS

Tailwind CSS is configured in tailwind.config.ts. It provides utility-first styling and integrates seamlessly with your React components.

License

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

This updated README.md reflects the libraries and files in your workspace, providing clear instructions and highlighting the key features of your boilerplate.