🍳 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

1. Run the command:

   react-vite-kitchen-sink

2. Enter your project name when prompted:

   Enter the project name: my-awesome-app

3. Add additional packages (optional):

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

4. Watch the magic happen! ✨

   • Project creation with animated progress indicators
   • Automatic dependency installation
   • File configuration and setup
   • Ready-to-use project structure

5. 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