REACT FLUKSOS TEMPLATE

The Ultimate Senior Boilerplate for Modern React Applications

Built with the tools and technologies:

---

📖 Table of Contents

• Overview
• Why React Fluksos?
• Features
• Getting Started
• Project Structure
• Scripts & Commands
• License

---

🚀 Overview

React Fluksos is a meticulously crafted, enterprise-grade React template engineered for performance, type safety, and impeccable Developer Experience (DX).

Designed as a definitive starting point for modern Single Page Applications (SPAs) and fast landing pages, it completely abandons legacy tools like ESLint and Prettier in favor of the blazing-fast Rust-based Biome toolchain.

🤔 Why React Fluksos?

This project aims to eliminate the painful configuration phase of modern frontend development. It enforces strict architectural boundaries, utilizes the latest major versions of all core tools, and includes a pre-configured, battle-tested pre-commit hook pipeline.

It is the ultimate "Blank Canvas" for Senior Developers.

---

🎯 Features

• Blazing Fast Builds: Powered by Vite 8 and the official @vitejs/plugin-react (Rolldown-ready).
• Absolute Type Safety: TypeScript 6.0 in Strict Mode, combined with @tanstack/react-router for 100% type-safe file-based routing.
• Modern Styling Engine: Fully integrated with Tailwind CSS v4 (no PostCSS required) and Shadcn/ui CLI.
• State & Data Management: Pre-configured AppQueryProvider (TanStack Query) with optimized caching strategies, plus a pre-wired Axios instance for API consumption.
• Rock-Solid DX: Replaces ESLint/Prettier with Biome for instant formatting and linting. Enforces code quality via Husky pre-commit hooks and lint-staged.
• Built-in Theme Provider: Elegant Dark/Light mode switching using pure Context API and Tailwind v4 variables.
• Robust Error Handling: Global Error Boundaries and 404 Pages pre-configured at the routing root.

---

🏁 Getting Started

Prerequisites

This project demands modern tooling to run locally:

• Node.js: v20 or higher.
• Package Manager: Strictly pnpm (v9 or v10). NPM and Yarn will be rejected by engine locking.

Installation

Clone the repository and set it up as your own:

git clone https://github.com/pasqualinigui/reactfluksos.git my-new-project
cd my-new-project

Install the dependencies:

pnpm install

Configure environment variables:

cp .env.example .env

Usage

Run the project locally in development mode:

pnpm run dev

---

📁 Project Structure

src/
├── components/
│   ├── layout/       # Global layout wrappers
│   ├── providers/    # Context providers (Theme, Query)
│   └── ui/           # Shadcn/ui raw components
├── features/         # Domain-driven modules
├── lib/              # Utility functions and API instances (Axios)
├── routes/           # TanStack file-based routes
├── services/         # API integration layers
└── store/            # Global state (Zustand)

---

💻 Scripts & Commands

• pnpm run dev: Starts the Vite development server.
• pnpm run build: Compiles the application for production (dist/).
• pnpm run typecheck: Runs strict TypeScript validation without emitting files.
• pnpm run lint: Analyzes the codebase using Biome.
• pnpm run lint:fix: Automatically fixes linting errors and formats the code.
• pnpm run test: Runs the Vitest test suite.

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

⬆️ Return to Top