npm package: @psd-it/create-frontend-app
Description: CLI tool to create a modern React application with TypeScript, TanStack Router, TanStack Query, and Vite.
Author: PSDIT
Latest version: 1.0.0

# create-frontend-app

> 🚀 CLI tool to create a modern React application with TypeScript, TanStack Router, TanStack Query, and Vite

[![npm version](https://img.shields.io/npm/v/@psd-it/create-frontend-app.svg)](https://www.npmjs.com/package/@psd-it/create-frontend-app)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 📦 What's Included?

This template includes:

- ⚛️ **React 19** with React Compiler for automatic optimizations
- 📘 **TypeScript 5.7** with strict type checking
- ⚡ **Vite 7** for lightning-fast builds
- 🔀 **TanStack Router** with file-based routing and code-splitting
- 🔄 **TanStack Query** for server state management
- 📝 **TanStack Form** with Zod validation
- 🎨 **Tailwind CSS v4** for styling
- 🧩 **shadcn/ui** components
- 🔧 **Biome** for linting and formatting
- 🧪 **Vitest** with React Testing Library

## 🚀 Quick Start

### Create a new project

```bash
# Using npx (recommended)
npx @psd-it/create-frontend-app my-app

# Using pnpm
pnpm create @psd-it/frontend-app my-app

# Using npm
npm create @psd-it/frontend-app my-app

# Using yarn
yarn create @psd-it/frontend-app my-app

# Using bun
bun create @psd-it/frontend-app my-app
```

### Interactive mode

If you don't specify a project name, the CLI will prompt you for one and other options:

```bash
npx @psd-it/create-frontend-app
```

You'll be asked:
- Project name
- Package manager preference (pnpm, npm, yarn, bun)
- Whether to install dependencies
- Whether to initialize a git repository

### Skip prompts

Use the `-y` or `--yes` flag to skip all prompts and use default values:

```bash
npx @psd-it/create-frontend-app my-app -y
```

### Available options

```bash
npx @psd-it/create-frontend-app [project-name] [options]

Options:
  -y, --yes         Skip prompts and use default values
  --no-install      Skip package installation
  --no-git          Skip git initialization
  -h, --help        Display help for command
  -V, --version     Display version number
```

## 📖 Next Steps

After creating your project:

1. **Navigate to your project:**
   ```bash
   cd my-app
   ```

2. **Start the development server:**
   ```bash
   pnpm dev
   ```

3. **Open your browser:**
   Visit [http://localhost:3000](http://localhost:3000)

4. **Read the documentation:**
   Check the generated `README.md` in your project for detailed documentation

## 🏗️ Project Structure

```
my-app/
├── public/                      # Static assets
├── src/
│   ├── api/                     # API layer
│   │   ├── services/            # API services by domain
│   │   └── types/               # API types
│   ├── components/              # React components
│   │   └── ui/                  # shadcn/ui components
│   ├── hooks/                   # Custom hooks
│   ├── integrations/            # Third-party integrations
│   ├── lib/                     # Utilities and configs
│   ├── routes/                  # File-based routes
│   ├── env.ts                   # Environment variables
│   ├── main.tsx                 # Entry point
│   └── styles.css              # Global styles
├── biome.json                   # Biome config
├── components.json              # shadcn/ui config
├── package.json
├── tsconfig.json
└── vite.config.ts
```

## 🛠️ Available Scripts

```bash
# Development
pnpm dev              # Start dev server on port 3000

# Build
pnpm build            # Build for production

# Preview
pnpm serve            # Preview production build

# Tests
pnpm test             # Run tests

# Code Quality
pnpm format           # Format code
pnpm lint             # Lint code
pnpm check            # Check formatting and linting
```

## 🎨 Adding UI Components

The project comes with shadcn/ui pre-configured. Add new components easily:

```bash
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add form
```

## 📝 Environment Variables

Create a `.env` file in the root:

```env
VITE_API_HOST=http://localhost:8000
```

Environment variables are validated in `src/env.ts` using Zod.

## 🤝 Contributing

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

## 📄 License

MIT © [PSD IT](https://github.com/psd-it)

## 🔗 Links

- [GitHub Repository](https://github.com/psd-it/create-frontend-app)
- [npm Package](https://www.npmjs.com/package/@psd-it/create-frontend-app)
- [Report Issues](https://github.com/psd-it/create-frontend-app/issues)

---

**Built with ❤️ using the best tools in the React ecosystem**