https://github.com/Trapar-waves/react-tanstack
A React template leveraging TanStack tools (Query, Router) for state management, routing, and data handling, with TypeScript, Tailwind CSS, and Rsbuild integration.
https://github.com/Trapar-waves/react-tanstack
Last synced: 3 months ago
JSON representation
A React template leveraging TanStack tools (Query, Router) for state management, routing, and data handling, with TypeScript, Tailwind CSS, and Rsbuild integration.
- Host: GitHub
- URL: https://github.com/Trapar-waves/react-tanstack
- Owner: Trapar-waves
- License: mit
- Created: 2025-04-01T07:23:08.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-09-09T02:28:05.000Z (3 months ago)
- Last Synced: 2025-09-09T03:47:40.605Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.48 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rstack - @trapar-waves/react-tanstack
README
# @trapar-waves/react-tanstack
[](https://www.npmjs.com/package/@trapar-waves/react-tanstack)
[](https://www.npmjs.com/package/@trapar-waves/react-tanstack)
[](https://github.com/Trapar-waves/react-tanstack/blob/main/LICENSE)
[](https://github.com/Trapar-waves/react-tanstack/commits/main)
[](https://github.com/Trapar-waves/react-tanstack/actions)
[](https://renovatebot.com)
---
[中文](./readme/README-CN.md) | [日本語](./readme/README-JP.md) | [Русский язык](./readme/README-RU.md)
> A production-ready React template optimized for building modern web applications with TanStack ecosystem tools. This template provides a complete foundation including state management, routing, data fetching, and build optimization out of the box.
## ✨ Features
- **Modern React Architecture:** Built with React 19.x for component-driven development
- **Comprehensive State Management:** Server state: [@tanstack/react-query](https://tanstack.com/query) for caching, background updates, and data synchronization
- **Advanced Routing:** [@tanstack/react-router](https://tanstack.com/router) for type-safe client-side navigation with nested routes support
- **Optimized Styling:** [Tailwind CSS](https://tailwindcss.com/) for utility-first styling with minimal configuration
- **Type Safety:** Full TypeScript integration throughout the codebase
- **Performance Optimization:** Built-in code splitting and lazy loading; Optimized bundle size with Rsbuild
- **Developer Experience:** Fast refresh during development
- **CI/CD Ready:** GitHub Actions workflow for automated testing and releases
- **Internationalization:** Structure for multi-language support
- **Production-Ready:** Optimized build process and best practices implementation
## 💻 Tech Stack
- **Framework:** React 19.x
- **Type System:** TypeScript 5.x
- **State Management:** `@tanstack/react-query`
- **Routing:** `@tanstack/react-router`
- **Styling:** Tailwind CSS
- **Build Tool:** Rsbuild
- **Linting:** ESLint with `@antfu/eslint-config`
- **Package Manager:** pnpm
See the [package.json](./package.json) for a full list of dependencies.
## 🚀 Getting Started
Follow these instructions to get the project running locally.
### Prerequisites
Ensure you have the following installed:
- Node.js (>= 18.x recommended)
- Package manager (npm, yarn, or pnpm)
```bash
node -v
npm -v
```
### Installation
Run script
```bash
pnpm create trapar-waves
```
Install dependencies
```bash
npm install
yarn install
pnpm install
```
## 🤝 Contributing
Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
Please ensure your code follows the project's coding standards and passes all tests before submitting a PR.
## 👤 Author
- **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## 🔗 Links
- **Repository:** [https://github.com/Trapar-waves/react-tanstack](https://github.com/Trapar-waves/react-tanstack)
- **Homepage:** [https://github.com/Trapar-waves/react-tanstack](https://github.com/Trapar-waves/react-tanstack)
- **Issues:** [https://github.com/Trapar-waves/react-tanstack/issues](https://github.com/Trapar-waves/react-tanstack/issues)