Create Frontend Pro 🚀

A production-ready CLI tool for scaffolding modern frontend applications with Next.js and Vite React templates.

Features

• ⚡ Fast Setup - Get started in seconds with interactive CLI
• 🎯 Framework Choice - Next.js 15 (App Router) or Vite React with React 19
• 🎨 UI Libraries - shadcn/ui, Chakra UI, MUI, Ant Design support
• 🔄 State Management - Redux Toolkit, Zustand integration
• 📊 Data Fetching - TanStack Query, Axios setup
• 🧪 Testing - Vitest and Testing Library configuration
• 📚 Storybook - Component documentation
• 🎯 TypeScript - Full TypeScript support
• 🎨 Tailwind CSS v4 - Modern styling with latest Tailwind
• 📝 Form Handling - React Hook Form with Zod validation
• 🔧 Code Quality - ESLint, Prettier, Husky pre-commit hooks

Quick Start

# Create a new project (interactive mode)
npx create-frontend-pro

# Or with specific options
npx create-frontend-pro --framework next --name my-app --pm npm --ts true --state none --data none

Interactive Setup

The CLI will guide you through:

1. Framework Selection - Choose between Next.js or Vite React
2. Package Manager - npm, pnpm, yarn, or bun
3. TypeScript - Optional TypeScript setup
4. UI Library - Select from shadcn/ui, Chakra UI, MUI, Ant Design
5. State Management - Redux Toolkit, Zustand, or none
6. Data Fetching - TanStack Query, Axios, or none
7. Development Tools - Storybook, Vitest, Husky

Templates

Next.js Template

• Next.js 15 with App Router
• React 19
• TypeScript configuration
• Tailwind CSS v4 with custom design system
• shadcn/ui components
• React Hook Form + Zod validation
• ESLint + Prettier + Husky
• Optional: Redux/Zustand, TanStack Query, Storybook, Vitest

Vite React Template

• Vite + React 19
• React Router DOM
• TypeScript configuration
• Tailwind CSS v4 with custom design system
• shadcn/ui components
• React Hook Form + Zod validation
• ESLint + Prettier + Husky
• Optional: Redux/Zustand, TanStack Query, Storybook, Vitest

Command Line Options

npx create-frontend-pro [project-name] [options]

Options:
  --framework <next|react-vite>  Choose framework
  --name <project-name>           Project name
  --pm <npm|pnpm|yarn|bun>      Package manager
  --typescript                    Use TypeScript
  --state <redux|zustand|none>   State management
  --ui <shadcn|chakra|mui|antd|headless> UI library
  --data <tanstack-query|axios|none> Data fetching
  --storybook                     Add Storybook
  --vitest                        Add Vitest
  --husky                         Add Husky
  --install                       Auto-install dependencies

Examples

# Next.js with shadcn/ui
npx create-frontend-pro my-app --framework next --ui shadcn

# Vite React with TypeScript and Zustand
npx create-frontend-pro my-app --framework react-vite --typescript --state zustand

# Full-featured Next.js setup
npx create-frontend-pro my-app --framework next --typescript --ui shadcn --state redux --data tanstack-query --storybook --vitest --husky --install

Project Structure

Generated projects follow modern best practices:

my-app/
├── src/                    # Source code
│   ├── components/         # React components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions
│   └── pages/ or app/     # Next.js pages or app directory
├── public/                 # Static assets
├── package.json           # Dependencies and scripts
├── tailwind.config.ts     # Tailwind configuration
├── tsconfig.json          # TypeScript configuration
└── README.md              # Project documentation

Development

After creating your project:

cd my-app
npm run dev        # Start development server
npm run build      # Build for production
npm run lint       # Run ESLint
npm run format     # Run Prettier
npm run test       # Run tests (if Vitest selected)
npm run storybook  # Run Storybook (if selected)

Requirements

• Node.js 18+
• npm, pnpm, yarn, or bun

Version History

Current Stable Version: 0.1.7 ✅

• Fixed: Template path resolution for global npm installations
• Updated: React 19 and Next.js 15 support
• Updated: Tailwind CSS v4 configuration
• Added: Bulletproof template detection system

Previous Versions

• 0.1.6: Enhanced template path resolution
• 0.1.5: Improved global installation support
• 0.1.4: Initial template path fixes
• 0.1.3: Package size optimization
• 0.1.2: First stable release with React 19

Installation

This package is distributed via npm. Use the latest version for the best experience:

# Always use the latest version
npx create-frontend-pro

# Or specify the version if needed
npx [email protected]

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Created by Sunny - A production-ready CLI tool for modern frontend development.