https://github.com/junminhong/tanstack-router-quickstart
🚀 A modern frontend quickstart template featuring React v19, Vite, TanStack Router, Tailwind CSS v4, and Biome.🚀 一個現代化的前端開發模板，整合 React v19、Vite、TanStack Router、Tailwind CSS v4 與 Biome。
https://github.com/junminhong/tanstack-router-quickstart
biome react tailwindcss tanstack-router vite
Last synced: about 2 months ago
JSON representation
🚀 A modern frontend quickstart template featuring React v19, Vite, TanStack Router, Tailwind CSS v4, and Biome.🚀 一個現代化的前端開發模板，整合 React v19、Vite、TanStack Router、Tailwind CSS v4 與 Biome。
- Host: GitHub
- URL: https://github.com/junminhong/tanstack-router-quickstart
- Owner: junminhong
- License: mit
- Created: 2025-07-24T11:19:31.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-24T12:13:30.000Z (3 months ago)
- Last Synced: 2025-08-13T10:56:51.848Z (2 months ago)
- Topics: biome, react, tailwindcss, tanstack-router, vite
- Language: TypeScript
- Homepage:
- Size: 82 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Tanstack Router Quickstart
[](LICENSE.md)
[](https://github.com/junminhong/tanstack-router-quickstart/pulls)
[](https://react.dev/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[繁體中文](README_zh_hant.md)
**Tanstack Router Quickstart** is a modern frontend development template designed to eliminate the repetitive environment setup in modern frontend development.
It integrates **TanStack Router**, **React v19**, **Vite**, **Tailwind CSS v4**, and **Biome**, allowing developers to skip the tedious configuration and focus on implementing core business logic.
## Core Features
* **Advanced Tech Stack**: Integrates industry-leading tools to ensure high performance and a superior development experience.
* **Type-Safe File-Based Routing**: Leverages TanStack Router to manage routes intuitively through file structure, all with full TypeScript support.
* **Optimized Developer Experience**: Features Vite for lightning-fast Hot Module Replacement (HMR) and Biome for automatic code formatting and linting on save.
* **Zero-Configuration Start**: Clone the repository, install dependencies, and start developing immediately without any extra setup.
## Quick Start Guide
Follow these steps to get the project up and running.
1. **Clone the Repository**
```bash
git clone https://github.com/junminhong/tanstack-router-quickstart.git
cd tanstack-router-quickstart
```
2. **Install Dependencies**
This project recommends using `pnpm` as the package manager.
```bash
pnpm install
```
3. **Start the Development Server**
```bash
pnpm dev
```
The development server will start at [http://localhost:3000](http://localhost:3000). Open your browser and navigate to this URL to begin development.
## Project Structure
```
tanstack-router-quickstart/
├── biome.json # Biome configuration for formatting and linting
├── LICENSE.md # MIT License terms
├── package.json # Project dependencies and scripts definition
├── pnpm-lock.yaml # Lockfile for consistent dependency versions
├── tsconfig.json # TypeScript compiler options
├── vite.config.ts # Vite build tool configuration
└── src/
├── router.tsx # TanStack Router instantiation and configuration
├── routeTree.gen.ts # Auto-generated route tree by TanStack Router (Do not edit manually)
├── routes/
│ ├── __root.tsx # Root route component (serves as the main layout for all pages)
│ └── index.tsx # Index route component (maps to '/')
└── styles/
└── app.css # Global styles and Tailwind CSS base directives
```
## Available Scripts
The following scripts are available in `package.json`:
| Command | Description |
| :--- | :--- |
| `pnpm dev` | Starts the Vite development server with Hot Module Replacement (HMR). |
| `pnpm build` | Builds the application for production, outputting optimized files to the `dist/` directory. |
| `pnpm format` | Formats all files in the project using Biome (`biome format --write`). |
| `pnpm lint` | Lints the codebase for syntax and style issues using Biome (`biome lint --apply`). |
| `pnpm check` | Runs both formatting and linting, applying all auto-fixable changes (`biome check --apply`). |
## Contributing
Contributions of all forms are welcome, whether it's reporting issues, suggesting enhancements, or submitting code.
* **Reporting Issues**: If you find a bug or have a feature suggestion, please open an issue on the [Issues](https://github.com/junminhong/tanstack-router-quickstart/issues) page.
* **Submitting Pull Requests**: If you would like to contribute code, please fork the repository, make your changes in a new branch, and then submit a Pull Request.
## License
This project is licensed under the MIT License. For more details, see the [LICENSE.md](LICENSE.md) file.