Turbo Setup: Tauri + React 19.2.3, TypeScript & TailwindCSS v4 Boilerplate

Build powerful cross-platform desktop applications with a modern Tauri starter powered by React 19.2.3, TypeScript, and TailwindCSS v4. Enjoy native performance, small bundle sizes, and seamless integration between Rust backend and React frontend. Create once, deploy everywhere with confidence.

🚀 Features

• ⚛️ React 19.2.3 + TypeScript - Modern React with full TypeScript support.
• 🎨 Tailwind CSS v4 - Utility-first CSS for rapid UI development.
• ⚡ Vite - Next-generation frontend tooling for fast builds.
• 🔍 ESLint - Code linting for consistent code quality.
• 🧹 Prettier - Automated code formatting for style consistency.
• 🪝 Husky & lint-staged - Pre-commit hooks for linting and formatting your code.
• 🏷️ Commitlint - Enforces conventional commit messages.
• 📦 Zustand - Simple and fast state management.
• 🗺️ React Router - Declarative routing for React apps.
• 📅 Day.js - Lightweight date manipulation library.
• 🌐 Axios - Promise-based HTTP client for the browser.
• 🔄 Custom useFetch Hook - Lightweight data fetching with loading and error states (replaces SWR).
• 🖥️ Tauri - Cross-platform desktop applications with native performance.
• 🔐 UseAuth - Authentication and authorization.

🛠️ Prerequisites

• Node.js (v18 or higher)
• Bun (latest version)
• Rust (latest stable version) - for Tauri desktop functionality

📦 Installation

Clone the repository

git clone https://github.com/khoivudevz/turbo-setup-tauri-react

Install dependencies

bun install

🚀 Development

Web Development

bun dev         # Development mode
bun dev:stg     # Staging mode
bun dev:prod    # Production mode

Desktop Application (Tauri)

bun run tauri:dev    # Start Tauri desktop app in development mode
bun run tauri:build  # Build Tauri desktop app for production

Building for Production

bun build              # Production build (web)
bun build:stg          # Staging build (web)
bun build:dev          # Development build (web)
bun run tauri:build    # Production build (desktop app)

📁 Project Structure

src/
├── assets/           # Static assets (images, fonts, icons)
├── components/       # Reusable UI components
├── configs/          # Configuration files (env, http, app urls)
├── constants/        # Application constants and shared values
├── hooks/            # Custom React hooks (useNews, useFetch, useMutation, useKeyPress)
├── layouts/          # Layout components and templates
├── pages/            # Page components
├── providers/        # React context providers
├── router/           # Routing configuration
├── services/         # Browser services (cookies, localStorage)
├── store/            # State management with Zustand
├── styles/           # Global styles and Tailwind imports
├── types/            # TypeScript type definitions
├── utils/            # Utility functions
└── views/            # View components

🖥️ Desktop Application (Tauri)

This project can be run as a cross-platform desktop application using Tauri. The desktop app provides:

• Cross-platform support: Windows, macOS, and Linux
• Native performance: Rust backend with web frontend
• Small bundle size: Efficient resource usage
• Native system integration: File system access, notifications, system tray

Tauri Configuration

The Tauri configuration is located in src-tauri/tauri.conf.json. Key settings include:

• App name: "Turbo setup Tauri x React 19, TypeScript & Tailwind and more..."
• Window title: "Turbo setup Tauri x React 19, TypeScript & Tailwind and more..."
• Window size: 800x600 (resizable)
• Web assets: Built from React app in build/ directory
• Dev server: http://localhost:8000

Building for Different Platforms

# Build for current platform
bun run tauri:build

# The built application will be in src-tauri/target/release/bundle/

🔧 Configuration

Environment Variables

Create .env files for different environments:

VITE_ENV=development
VITE_API_URL=your_api_url

TypeScript

The project includes two TypeScript configurations:

• tsconfig.app.json - Application configuration
• tsconfig.node.json - Node.js configuration

ESLint & Prettier

• ESLint is configured with TypeScript and React rules
• Prettier is set up with custom formatting rules
• Pre-commit hooks ensure code quality

🌍 Internationalization (i18n)

This project uses i18next with react-i18next for internationalization support. The translations are stored in JSON files located in the src/i18n/translations directory.

Adding a New Language

1. Create a new JSON file in the src/i18n/translations directory with the language code as the filename (e.g., fr.json for French).
2. Add your translations in the new JSON file.

Using Translations

import {useTranslation} from 'react-i18next'
import SwitchLanguage from '@/components/SwitchLanguage/SwitchLanguage'

const HomeView = () => {
  const {t} = useTranslation()
  return (
    <div>
      <p>{t('welcome')}</p>
      <SwitchLanguage />
    </div>
  )
}

📡 Data Fetching

This project uses a Custom useFetch Hook for data fetching, which provides features like:

• Automatic data fetching
• Loading and error states
• Manual execution control
• Success/error callbacks
• TypeScript ready
• No external dependencies

useFetch Hook Example

Using the custom useFetch hook:

import {useFetch} from '@/hooks/use-fetch'

const MyComponent = () => {
  const {data, isLoading, error, execute, reset} = useFetch(() =>
    fetch('/api/news').then(res => res.json())
  )

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error loading data</div>

  return (
    <div>
      {data?.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={execute}>Refresh</button>
    </div>
  )
}

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes using conventional commits
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.