Frontend Starter

______               _                 _       _             _
|  ___|             | |               | |     | |           | |
| |_ _ __ ___  _ __ | |_ ___ _ __   __| |  ___| |_ __ _ _ __| |_ ___ _ __
|  _| '__/ _ \| '_ \| __/ _ \ '_ \ / _` | / __| __/ _` | '__| __/ _ \ '__|
| | | | | (_) | | | | ||  __/ | | | (_| | \__ \ || (_| | |  | ||  __/ |
\_| |_|  \___/|_| |_|\__\___|_| |_|\__,_| |___/\__\__,_|_|   \__\___|_|

Interactive CLI tool to scaffold modern React projects with Vite

Create production-ready React applications with your preferred stack in seconds, without the hassle of manual configuration.

Features

• Interactive CLI - Choose exactly what you need
• Vite - Lightning fast HMR and build tool
• React 18 - Latest React with modern features
• TypeScript/JavaScript - Your choice
• Tailwind CSS v4 - Utility-first CSS (optional)
• State Management - Zustand (optional)
• Data Fetching - TanStack Query/React Query (optional)
• React Router - Client-side routing with error handling (optional)
• Form Handling - Formik + Yup validation (optional)
• Error Boundaries - React Router errorElement or react-error-boundary
• ESLint - Code linting (optional)
• Prettier - Code formatting (optional)
• Atomic Design - Organized folder structure (optional)
• Path Aliases - Clean imports with @/ (always included)
• Git - Initialize repository with first commit (optional)

Installation

# Install globally
npm install -g .

# Or use directly with npx (once published)
npx frontend-starter

Usage

Simply run the command and follow the interactive prompts:

frontend-starter

Interactive Questions

1. Project name - Your app name (lowercase, hyphens allowed)
2. Package manager - Choose between yarn, npm, or pnpm
3. Language - TypeScript or JavaScript
4. Tailwind CSS v4 - Modern utility-first CSS framework
5. Zustand - Lightweight state management
6. TanStack Query - Powerful data fetching and caching
7. React Router - Client-side routing (includes error handling)
8. Atomic Design - Component folder structure
9. Git repository - Initialize with first commit
10. ESLint - Code linting
11. Prettier - Code formatting
12. Formik + Yup - Form handling with validation
13. Error Boundary - Error catching (only if React Router not selected)

Generated Project Structure

With Atomic Design:

my-app/
├── src/
│   ├── Atoms/           # Basic building blocks (buttons, inputs)
│   ├── Molecules/       # Simple components (form fields, cards)
│   ├── Organisms/       # Complex components (navbar, footer)
│   ├── Pages/           # Page components
│   ├── Stores/          # Zustand stores (if selected)
│   ├── Utils/           # Utility functions and helpers
│   ├── router.tsx       # Router configuration (if selected)
│   ├── queryClient.ts   # TanStack Query config (if selected)
│   ├── ErrorPage.tsx    # Error page (if React Router selected)
│   ├── ErrorFallback.tsx # Error fallback (if Error Boundary selected)
│   ├── App.tsx
│   └── main.tsx
├── eslint.config.ts     # ESLint configuration (.js for JavaScript)
├── .prettierrc          # Prettier configuration
├── vite.config.ts       # Vite config with path aliases
├── tsconfig.json        # TypeScript config with path aliases
└── package.json

Without Atomic Design:

my-app/
├── src/
│   ├── Pages/
│   ├── Stores/
│   ├── Utils/
│   └── ...

Path Aliases

All projects include path aliases configured automatically:

// Instead of this:
import Button from "../../../Atoms/Button";

// You can do this:
import Button from "@/Atoms/Button";

Configured in both vite.config and tsconfig.json/jsconfig.json.

Error Handling

With React Router (Recommended)

Uses React Router's built-in errorElement system:

• Catches routing errors and component errors
• useRouteError() hook for error details
• No extra dependencies
• Functional component with modern hooks

Without React Router

Option to use react-error-boundary:

• Wraps entire application
• Catches errors anywhere in the component tree
• Functional ErrorFallback component
• Reset button to recover from errors

TanStack Query Integration

When selected, includes:

• Pre-configured QueryClient with sensible defaults
• React Query DevTools (automatically included)
• Integrated with App component
• Works seamlessly with React Router

Form Handling with Formik + Yup

When selected, includes:

• Example form component in src/Utils/ExampleForm
• Validation schema with Yup
• Form state management with Formik
• Error handling and messages
• Ready to customize and extend

Tailwind CSS v4

When selected, configures:

• Latest Tailwind CSS v4
• Vite plugin integration
• Minimal index.css setup
• Ready to use utility classes

Example Session

$ frontend-starter

______               _                 _       _             _
|  ___|             | |               | |     | |           | |
| |_ _ __ ___  _ __ | |_ ___ _ __   __| |  ___| |_ __ _ _ __| |_ ___ _ __
|  _| '__/ _ \| '_ \| __/ _ \ '_ \ / _` | / __| __/ _` | '__| __/ _ \ '__|
| | | | | (_) | | | | ||  __/ | | | (_| | \__ \ || (_| | |  | ||  __/ |
\_| |_|  \___/|_| |_|\__\___|_| |_|\__,_| |___/\__\__,_|_|   \__\___|_|

? Project name: my-awesome-app
? Choose package manager: yarn
? Choose language: TypeScript
? Install Tailwind CSS v4? Yes
? Install Zustand? No
? Install TanStack Query? Yes
? Install React Router Dom? Yes
? Use Atomic Design folder structure? Yes
? Initialize Git repository? Yes
? Install ESLint? Yes
? Install Prettier? Yes
? Install Formik + Yup for form handling? Yes

✓ Base project created
✓ Folders created: Atoms, Molecules, Organisms, Pages, Stores, Utils
✓ Tailwind v4 configured
✓ TanStack Query installed and configured
✓ React Router configured with error handling
✓ Formik + Yup installed with example form
✓ ESLint configured
✓ Prettier configured
✓ Git repository initialized
✓ README.md generated

Project "my-awesome-app" successfully generated!

To get started:
  1. cd my-awesome-app
  2. yarn install
  3. yarn dev

Requirements

• Node.js 18.x or higher
• npm, yarn, or pnpm

Tech Stack

• Vite - Next Generation Frontend Tooling
• React 18 - A JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types (optional)
• Tailwind CSS v4 - Utility-first CSS framework (optional)
• React Router - Declarative routing for React (optional)
• TanStack Query - Powerful asynchronous state management (optional)
• Zustand - Bear necessities for state management (optional)
• Formik - Build forms in React (optional)
• Yup - Schema validation (optional)
• ESLint - Find and fix problems in JavaScript code (optional)
• Prettier - Opinionated code formatter (optional)

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

License

MIT

Credits

Generated with love using frontend-starter

Tips

Customize Templates

All templates are located in the templates/ folder. You can customize them to match your preferences:

• Component boilerplates
• Configuration files
• Router setup
• Error boundaries

Add More Features

Want to add more options? Edit index.js and:

1. Add your prompt question
2. Create template files
3. Add installation logic
4. Update README generation

Path Aliases Examples

// Components
import Button from "@/Atoms/Button";
import Card from "@/Molecules/Card";
import Navbar from "@/Organisms/Navbar";

// Pages
import HomePage from "@/Pages/HomePage";

// Utils
import { formatDate } from "@/Utils/helpers";

// Stores
import { useStore } from "@/Stores/useStore";

Happy coding!