⚛️ React.js Template — Production-Ready Starter Kit

🎯 Purpose

This template is designed for developers who want to kickstart a modern React.js project with a fully optimized setup. It includes everything needed for scalable application development — from FSD architecture, routing, state management, and localization to a lightning-fast build powered by Vite and SWC.

✨ Features

1. 🧭 TanStack Router — modern, type-safe routing solution;
2. ⚡ TanStack Query — powerful data fetching and caching layer;
3. 🧠 Zustand — a small, fast and scalable bearbones state-management solution using simplified flux principles;
4. 🌍 Intl API — full support for internationalization and locale handling;
5. 📦 Build Analyzer — integrated bundle size visualization;
6. 🧩 CSS Injection & Compression — CSS inlined into HTML (IF NEEDED) with Brotli/gzip compression support;
7. ⚙️ SWC Compiler — blazing-fast transpilation for TypeScript and JavaScript;
8. 🔍 ESLint + Prettier + Commitlint — strict code style enforcement out of the box;
9. 🧪 Jest — preconfigured unit testing environment;
10. 🐳 Docker + NGINX — robust deployment setup with containerization.

📂 Project Structure

Structure

├── .husky/        # Git hooks for commit quality
├── src/
│   ├── app/       # App initialization logic
│   ├── entities/  # Domain entities and models
│   ├── features/  # Feature-specific logic
│   ├── pages/     # Application pages
│   └── shared/    # Shared components and utilities
├── vite/          # Vite-specific configuration

Analysis

🚀 Quick Start

Prerequisites

• Node.js: Ensure you have Node.js >=22.17 installed.

Installation

git clone <repository-url>
cd <project-directory>
npm install

Start Development Server

npm run dev

Build for Production

npm run build # <- default
npm run build:insertcss # <- embed CSS in the head index.html
npm run build:insertcss-compress # <- embed CSS in the head index.html and perform files compression
npm run build:compress # <- perform files compression
npm run build:analyzer # <- build and perform an analysis

Run Tests

npm run test

📜 Code Standards

• ✅ 100% TypeScript-first approach.
• 🧩 Modular architecture with Feature-Sliced Design in mind.
• ⚠️ It is strictly checked for compliance with ESLint and steiger (FSD) configuration standards

🙎️ Author / Contacts

If you have any questions, feel free to reach out:

• Email: [email protected]
• Telegram: https://t.me/d_maximyuk
• GitHub: https://github.com/dmaximyuk

📄 License

This template is publicly available for any use.
Feel free to use, modify, and share it!