Vite React Starter Template

This project is a React-based web application template using TypeScript, Vite, Tailwind CSS, and TanStack Router. It includes a set of pre-configured components, hooks, and utilities to help you get started quickly.

Table of Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
  • Running the Development Server
  • Building for Production
• Project Structure
• Available Scripts
• Configuration
• External Packages
• Contributing
• License

Features

• React: A JavaScript library for building user interfaces.
• TypeScript: A strongly typed programming language that builds on JavaScript.
• Vite: A fast build tool and development server.
• Tailwind CSS: A utility-first CSS framework.
• TanStack Router: A powerful routing library for React.
• Pre-configured Components: Ready-to-use UI components.
• Custom Hooks: Useful hooks for common tasks.
• ESLint: A pluggable linting utility for JavaScript and TypeScript.
• Prettier: An opinionated code formatter.

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (version 14 or higher)
• pnpm (version 6 or higher)

Installation

Clone the repository:

git clone https://github.com/ankitpanchal534/vite-react-starter-template.git

Install dependencies:

pnpm install

Running the Development Server

Start the development server:

pnpm dev

Open your browser and navigate to http://localhost:3000.

Building for Production

Build the project for production:

pnpm build

The output will be in the dist directory.

Project Structure

Available Scripts

• pnpm dev: Start the development server.
• pnpm build: Build the project for production.
• pnpm lint: Run ESLint to lint the code.
• pnpm format: Run Prettier to format the code.

Configuration

TypeScript

TypeScript configuration is located in tsconfig.json, tsconfig.app.json, and tsconfig.node.json.

ESLint

ESLint configuration is located in eslint.config.js.

Tailwind CSS

Tailwind CSS configuration is located in tailwind.config.js.

Vite

Vite configuration is located in vite.config.ts.

External Packages

The project uses the following external packages:

Dependencies

• @tanstack/react-router
• @tanstack/react-router-devtools
• @tanstack/react-router-rank-routes
• @tanstack/react-router-ssr
• @tanstack/react-router-vite
• @tanstack/router
• @tanstack/router-devtools
• @tanstack/router-rank-routes
• @tanstack/router-ssr
• @tanstack/router-vite
• axios
• classnames
• clsx
• lucide-react
• react
• react-day-picker
• react-dom
• react-hook-form
• react-resizable-panels
• recharts
• sonner
• tailwind-merge
• tailwindcss-animate
• vaul
• zod

DevDependencies

• @eslint/js
• @tanstack/router-vite-plugin
• @types/node
• @types/react
• @types/react-dom
• @vitejs/plugin-react
• autoprefixer
• eslint
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh
• globals
• postcss
• tailwindcss
• typescript
• typescript-eslint
• vite

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

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