React Vite Starter

With all batteries included in this project, you can start building React apps with Vite.

This project is a starter template using Vite for fast React development with TypeScript, TailwindCSS, and other modern tools for building, linting, formatting, and testing.

Get Started

git clone https://github.com/tejachundru/vite-starter

cd vite-starter

# reset the git repository
rm -rf .git

# install dependencies
pnpm install

# Setup project
pnpm run bootstrap

# Start development
pnpm run dev

Overview

Built with type safety, scalability, and developer experience in mind. A batteries included Vite + React template.

• pnpm - A strict and efficient alternative to npm with up to 3x faster performance
• TypeScript - A typed superset of JavaScript designed with large scale applications in mind
• ESLint - Static code analysis to help find problems within a codebase
• Prettier - An opinionated code formatter
• Vite - Feature rich and highly optimized frontend tooling with TypeScript support out of the box
• React - A modern front-end JavaScript library for building user interfaces based on components
• Tailwind CSS - A utility-first CSS framework packed with classes to build any web design imaginable
• ShadCN/ui - A UI library with a focus on simplicity and customization
• Storybook - A frontend workshop for building UI components and pages in isolation
• ReactRouter - A lightweight, fully-featured routing library for React
• RTK Query - A toolkit for building RTK Query based applications
• Zod - TypeScript-first schema validation with static type inference
• React Testing Library - A very light-weight, best practice first, solution for testing React components
• Vitest - A blazing fast unit test framework powered by Vite
• Playwright - Enables reliable end-to-end testing for modern web apps
• react-i18next - A powerful internationalization framework for React/React Native based on i18next
• Husky + Commitizen + Commitlint - Git hooks and commit linting to ensure use of descriptive and practical commit messages
• ts-reset - Improvements for TypeScripts built-in typings for use in applications
• Docker - Containerization tool for deploying your vite-react-boilerplate app

Available Scripts

In this project, the following scripts are available:

• bootstrap: Initializes the project with Husky and Playwright.
• format: Formats the code using Prettier.
• lint: Lints the code with ESLint to ensure coding standards are followed.
• dev: Starts the development server using Vite.
• storybook: Launches Storybook in development mode to view and test UI components.
• test: Runs unit and end-to-end tests.
• build: Builds the project for production using Vite.
• preview: Starts the preview server with Vite to view the production build locally.
• commitlint: Lints commit messages to ensure they follow the defined conventions.
• commitizen: Initializes Commitizen to assist with conventional commit message formatting.