🚀 Enhanced React Project Initializer

A comprehensive, production-ready CLI tool for creating modern React projects with best practices, beautiful UI, and powerful integrations.

✨ Features

🎯 Framework Support

• Next.js: App Router & Pages Router templates with TypeScript
• Vite: React TypeScript & JavaScript templates with fast HMR

🌐 Internationalization (I18n)

• Next Intl: Modern i18n library for Next.js applications
• React I18next: Powerful i18n framework for React/Vite projects
• Multi-language support: English & Vietnamese out of the box

🛤️ Routing

• Next.js: Built-in App Router
• Vite: React Router v6 with modern routing patterns

🎨 UI Libraries & Styling

• Tailwind CSS: Utility-first CSS framework with modern design
• Ant Design: Enterprise-grade UI components library
• Shadcn/UI: Copy-paste component library with Radix UI
• PostCSS: Emotion & Styled Components for CSS-in-JS

📊 State Management

• React Query: Server state management and caching
• SWR: Data fetching with smart caching and revalidation
• Redux Toolkit: Predictable state container with modern patterns
• Zustand: Lightweight and flexible state management

🛠️ Development Tools

• React Compiler: Automatic React performance optimization
• ESLint + Prettier: Code linting, formatting, and quality enforcement
• Husky + Lint-staged: Git hooks for automated quality checks
• TypeScript: Full type safety and modern development experience

📦 Package Manager Support

• npm: Node Package Manager
• yarn: Fast, reliable, and secure package manager
• pnpm: Efficient package manager with shared dependencies

🚀 Quick Start

Interactive Mode (Recommended)

npx @thanhthi2895/react-project-init

🎨 CLI Interface

Beautiful Terminal UI

• 🎯 Welcome Screen: Branded introduction with ASCII art
• 🌈 Color Coded: Consistent color scheme throughout
• ⚡ Loading Indicators: Spinners for long operations
• 📦 Boxed Content: Important information highlighted
• ✅ Success Screens: Clear completion feedback

Interactive Prompts

• 📝 Project Name Validation: Smart name checking and path validation
• 🔧 Framework Selection: Next.js vs Vite with detailed comparisons
• 🎨 Template Choice: Visual template descriptions and recommendations
• 🛤️ Routing Setup: Configure routing for your chosen framework
• 🌐 I18n Configuration: Setup internationalization with language selection
• 🧩 UI Library Multi-select: Mix and match UI libraries and styling options
• 📊 State Management: Choose from multiple state management solutions
• 🛠️ Development Tools: Select productivity and quality tools
• 📦 Package Manager: Choose between npm, yarn, or pnpm

📁 Generated Project Structure

Next.js App Router

my-nextjs-app/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── ui/              # Shadcn/UI components
├── lib/
│   └── utils.ts
├── messages/
│   ├── en.json          # I18n messages
│   └── vi.json
├── src/
│   └── i18n/
│       └── request.ts   # I18n configuration
├── public/
├── styles/
├── next.config.ts
├── next-i18next.config.ts
├── tailwind.config.js
├── postcss.config.mjs
└── package.json

Vite React

my-vite-app/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── store/           # State management
│   ├── locales/         # I18n translations
│   │   ├── en/
│   │   │   └── common.json
│   │   └── vi/
│   │       └── common.json
│   ├── styles/
│   ├── App.tsx
│   ├── main.tsx
│   └── i18n.ts          # I18n configuration
├── public/
├── index.html
├── vite.config.ts
└── package.json

🔧 Configuration Options

Framework Templates

| Framework | Template | Description | |-----------|----------|-------------| | Next.js | app-router | Modern App Router with TypeScript (recommended) | | Vite | react-ts | React with TypeScript and Vite (recommended) |

Routing Options

| Framework | Router | Description | |-----------|---------|-------------| | Next.js | Built-in | App Router| | Vite | React Router | React Router v6 with modern patterns |

Internationalization (I18n)

• next-intl: Modern i18n for Next.js (Server Components compatible)
• react-i18next: Full-featured i18n framework for React/Vite
• none: No internationalization

UI Libraries & Styling

• antd: Complete enterprise UI component library
• shadcn/ui: Modern copy-paste component library
• tailwindcss: Utility-first CSS framework (always included)
• emotion: CSS-in-JS library for styled components
• styled-components: CSS-in-JS with template literals

State Management

• react-query: Server state management and caching
• swr: Data fetching with smart caching and revalidation
• redux-toolkit: Global state with Redux Toolkit
• zustand: Minimal and flexible state management
• none: No state management library

Development Tools

• react-compiler: Automatic React performance optimization
• eslint + prettier: Code quality, linting and formatting
• husky + lint-staged: Git hooks for automated quality checks
• typescript: Full type safety (always included)

�📄 License

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

🚀 What's New in v1.4.12

✨ New Features

• 🌐 Internationalization Support: Added Next Intl for Next.js and React I18next for Vite
• 🛤️ React Router Integration: Full React Router v6 support for Vite projects
• 📊 SWR Data Fetching: Alternative to React Query for data fetching
• 🎨 Enhanced PostCSS: Better Emotion and Styled Components integration
• 🔧 Improved Development Tools: Enhanced ESLint, Prettier, and Husky configurations

🔄 Recent Updates

• Updated to support Node.js 18+ and npm 8+
• Improved TypeScript configurations across all templates
• Enhanced project structure with better organization
• Optimized build processes and package management
• Better error handling and user experience

🙏 Acknowledgments

• Next.js team for the amazing framework and App Router
• Vite team for the lightning-fast build tool and HMR
• Ant Design & Shadcn/UI teams for beautiful component libraries
• React team for the incredible library and React Compiler
• Tailwind CSS team for the utility-first CSS framework
• All open source contributors and the React community

🔗 Links

• NPM Package: @thanhthi2895/react-project-init
• GitHub Repository: project-init
• Issues & Feedback: GitHub Issues
• Quick Start Guide: QUICK-START.md
• Feature Documentation: FEATURE.MD