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

# Clone the repository
git clone https://github.com/tejachundru/vite-starter

# Navigate to the project directory
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.

• React ⚛️ - A modern front-end JavaScript library for building user interfaces based on components
• Vite ⚡ - Feature rich and highly optimized frontend tooling with TypeScript support out of the box
• TypeScript 🔷 - A typed superset of JavaScript designed with large scale applications in mind
• 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
• 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
• Vitest ⚡ - A blazing fast unit test framework powered by Vite
• React Testing Library 🧪 - A very light-weight, best practice first, solution for testing React components
• Playwright 🎭 - Enables reliable end-to-end testing for modern web apps
• pnpm 📦 - A strict and efficient alternative to npm with up to 3x faster performance
• ESLint 🧹 - Static code analysis to help find problems within a codebase
• Prettier ✨ - An opinionated code formatter
• Storybook 📚 - A frontend workshop for building UI components and pages in isolation
• react-i18next 🌐 - A powerful internationalization framework for React/React Native based on i18next
• Docker 🐳 - Containerization tool for deploying your vite-react-boilerplate app
• 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

Available Scripts

In this project, the following scripts are available:

Project Structure

react-vite-starter/
├── .storybook/          # Storybook configuration
├── e2e/                 # End-to-end tests
├── public/              # Static assets
├── src/
│   ├── assets/          # Images, fonts, etc.
│   ├── components/      # Reusable UI components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions
│   ├── locales/         # i18n translations
│   ├── pages/           # Page components
│   ├── router/          # Routing configuration
│   ├── services/        # API services
│   ├── store/           # Redux store and slices
│   ├── App.tsx          # Main App component
│   └── main.tsx         # Entry point

Docker Build

Development

docker build -t my-app -f ./Dockerfile.dev .

Production Image Build

This image is production-optimized using a multi-stage build for a minimal footprint with built-in nginx configuration to efficiently serve your application.

docker build -t my-app -f ./Dockerfile .

To run the Docker container:

docker run -p 8080:80 my-app

Environment Variables

Create a .env file in the root directory with the following variables:

VITE_API_URL=https://api.example.com

Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/my-feature
3. Commit your changes: pnpm run commitizen
4. Push to the branch: git push origin feature/my-feature
5. Submit a pull request

License

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

Resources for development

Some resources links that can helpful while development

• Shadcn FormBuilder - Create forms with Shadcn, react-hook-form and zod within minutes.