quickstart-react

⚡ quickstart-react (React Package Solution)

🚀 quickstart-react is an open-source CLI tool that lets you instantly create a Vite + React app with your choice of CSS framework, optional packages, and pre-configured project structure — all in one command.

✨ Features

• Interactive Setup — prompts you for project name, CSS framework, and optional packages
• CSS Framework Support — Tailwind CSS, Bootstrap, or MUI (Material UI)
• Optional Packages — easily add Axios, React Icons, React Hook Form, Yup, Formik, and Moment.js
• Automatic Folder Structure — creates components, pages, hooks, store, utils, assets folders
• Boilerplate Ready — replaces default Vite boilerplate with a clean welcome page
• Axios Setup — pre-configured Axios instance if selected
• CSS Integration — automatically configures your chosen CSS framework with Vite

📦 Installation

You don’t need to install it globally — run it instantly with npx:

npx quickstart-react

🛠 Usage

When you run npx quickstart-react, you will be prompted to:

• Enter Project Name — e.g., my-app
• Choose CSS Framework — Tailwind, Bootstrap, or MUI
• Select Optional Packages — choose from a list of commonly used React libraries

Example run:

npx quickstart-react

Example Walkthrough

? Enter project name: my-portfolio
? Choose a CSS framework: Tailwind
? Select optional packages: Axios, React Icons

This will:

• Create a new Vite + React project in my-portfolio/
• Install Tailwind CSS and configure it with Vite
• Install Axios and React Icons
• Create standard project folders
• Add a clean welcome screen
• Set up an Axios instance at src/utils/axiosInstance.js

📂 Folder Structure

After running, your project will look like this:

my-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── store/
│   ├── utils/
│   │   └── axiosInstance.js (if Axios selected)
│   ├── assets/
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── vite.config.js
├── package.json
└── README.md

⚡ CSS Framework Integration

Tailwind CSS

• Installs tailwindcss & @tailwindcss/vite
• Updates vite.config.js to use Tailwind plugin
• Sets up index.css with Tailwind directives
• Removes unused default CSS files

Bootstrap

• Installs bootstrap
• Imports Bootstrap CSS in main.jsx
• Removes unused default CSS files

MUI (Material UI)

• Installs @mui/material, @emotion/react, @emotion/styled
• Removes unused default CSS files

🧩 Optional Packages

You can add these during setup:

• Axios — with a ready-to-use axiosInstance.js
• React Icons — icon library
• React Hook Form — form management
• Yup — schema validation
• Formik — form management
• Moment.js — date/time utilities

🚀 Quick Start

npx quickstart-react my-dashboard

Select Tailwind, Bootstrap, or MUI, add any packages, and start coding immediately

👐 Contributing

We welcome contributions! Follow these steps:

• Fork the repository
• Create a new branch: git checkout -b feature-name
• Commit your changes: git commit -m "Added new feature"
• Push to your branch: git push origin feature-name
• Open a Pull Request

Before submitting, please ensure:

• Your code follows project style guidelines
• You have tested your changes locally

Happy Hacking 🐱‍🏍