🍳 React Vite Kitchen Sink

A powerful CLI tool that sets up a fully-configured React application with TypeScript, Vite, Tailwind CSS, React Query, React Router, and comprehensive testing setup in seconds!

✨ What You Get

Your new project comes pre-configured with:

⚡ Vite - Lightning fast build tool and dev server
⚛️ React 18 - Latest React with TypeScript support
🎨 Tailwind CSS - Utility-first CSS framework with Vite plugin
🔄 React Query (@tanstack/react-query) - Powerful data fetching and caching
🧭 React Router - Declarative routing for React applications
🧪 Vitest + Testing Library - Complete testing setup ready to go
📡 Axios - HTTP client with environment variable configuration
🔧 Zod - TypeScript-first schema validation
📦 PostCSS & Autoprefixer - CSS processing pipeline

🚀 Quick Start

Global Installation (Recommended)

# Install globally
npm install -g react-vite-kitchen-sink

# Create a new project
react-vite-kitchen-sink

One-time Usage

# Run without installing
npx react-vite-kitchen-sink

🎯 Usage

Run the command:
```
react-vite-kitchen-sink
```
Enter your project name when prompted:
```
Enter the project name: my-awesome-app
```

Add additional packages (optional):

Enter additional packages (space-separated): framer-motion zustand

Watch the magic happen! ✨
- Project creation with animated progress indicators
- Automatic dependency installation
- File configuration and setup
- Ready-to-use project structure
Start developing:
```
cd my-awesome-app
npm run dev
```

📁 Generated Project Structure

my-awesome-app/
├── src/
│   ├── api/
│   │   └── client.ts          # Pre-configured Axios client
│   ├── App.tsx
│   ├── main.tsx               # With React Query & Router providers
│   ├── index.css              # Tailwind CSS imports
│   └── app.css                # Additional Tailwind imports
├── vite.config.ts             # Vite + Tailwind + Vitest configuration
├── package.json
└── ...

🎨 Features in Detail

🔥 Hot Reload Development

Your project is configured with Vite's lightning-fast hot module replacement.

🎭 Type Safety

Full TypeScript support with proper type definitions for all included libraries.

🧪 Testing Ready

Complete testing setup with Vitest, jsdom, and Testing Library:

@testing-library/react
@testing-library/jest-dom
@testing-library/user-event

🌐 API Client

Pre-configured Axios client with:

Environment variable support (VITE_BASE_API_URL)
Query string serialization with qs
JSON content-type headers

🎨 Styling Power

Tailwind CSS configured with:

Vite plugin for optimal performance
Base, components, and utilities layers
PostCSS and Autoprefixer

🛠️ Available Scripts

After project creation, you can run:

npm run dev - Start development server
npm run build - Build for production
npm run test - Run tests with Vitest
npm run preview - Preview production build

💡 Tips & Tricks

Adding More Packages

When prompted for additional packages, the tool will:

✅ Check if packages are already included
➕ Only install packages that aren't pre-configured
📝 Show you exactly what's being added

Environment Variables

Create a .env.local file in your project root:

VITE_BASE_API_URL=https://api.yourdomain.com

Customizing the Setup

The generated project is yours to modify! The tool gives you a solid foundation, but you can:

Add more dependencies
Modify configurations
Add your own folder structure
Integrate additional tools

🤝 Contributing

Found a bug or want to suggest a feature? We'd love to hear from you!

📝 License

ISC License - feel free to use this tool for your projects!

👨‍💻 Author

jjarrett21 - Creating developer experiences that spark joy ✨

Happy coding! 🚀

Built with ❤️ for the React community