/react-tanstack

A React template leveraging TanStack tools (Query, Router) for state management, routing, and data handling, with TypeScript, Tailwind CSS, and Rsbuild integration.

Primary LanguageTypeScriptMIT LicenseMIT

@trapar-waves/react-tanstack

npm version npm downloads License GitHub last commit GitHub Actions Workflow Status Renovate

中文 | 日本語 | Русский язык

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 for caching, background updates, and data synchronization
  • Advanced Routing: @tanstack/react-router for type-safe client-side navigation with nested routes support
  • Optimized Styling: Tailwind CSS 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 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)
node -v
npm -v

Installation

Run script

pnpm create trapar-waves

Install dependencies

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

📄 License

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

🔗 Links