@trapar-waves/react-tanstack

August 16, 2026 · View on GitHub

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

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

A production-ready React template optimized for building modern web applications with the TanStack ecosystem. Provides a complete foundation including state management, routing, data fetching, and build optimization out of the box.

react-tanstack hero

Features

  • Modern React Architecture: Built with React 19.x for component-driven development.
  • Comprehensive State Management: Server state via @tanstack/react-query for caching, background updates, and data synchronization.
  • Advanced Routing: @tanstack/react-router for type-safe client-side navigation with nested route 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

Prerequisites

  • Node.js (>= 18.x recommended)
  • Package manager (npm, yarn, or pnpm)

Installation

  1. Create a new project using the template:

    pnpm create trapar-waves

  2. Navigate to your project directory and install dependencies:

    pnpm install

  3. Start the development server:

    pnpm dev

Project Structure

├── public/             # Static assets
├── src/                # Source code
│   ├── routes/         # File-based route definitions
│   │   └── __root.tsx  # Root layout component
│   ├── global.css      # Global styles and Tailwind imports
│   ├── index.tsx       # Entry point
│   ├── router.ts       # Router configuration
│   ├── routeTree.gen.ts # Auto-generated route tree
│   └── env.d.ts        # Environment type declarations
├── rsbuild.config.ts   # Rsbuild configuration
├── tsconfig.json       # TypeScript configuration
├── eslint.config.js    # ESLint configuration
└── package.json        # Project dependencies and scripts

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

License

MIT License © 2025 Trapar Waves

👤 Author