🚀 Create Next Gen React

The ultimate CLI for setting up professional, scalable, and production-ready React applications with a single command.

Create Next Gen React is a powerful command-line interface (CLI) designed to bootstrap React projects with a professional folder structure and best-practice configurations out of the box. Whether you prefer Vite or Create React App, JavaScript or TypeScript, Redux or Context API, this tool has you covered.

✨ Features

• 🏗 Professional Architecture: Automatically sets up a scalable folder structure (components, hooks, services, store, utils, etc.).
• ⚡ Modern Stack Support: Choose between Vite (recommended) or Create React App.
• 🟦 TypeScript Ready: First-class support for TypeScript.
• 🎨 Tailwind CSS Integration: One-click setup for Tailwind CSS (supports both Vite v4+ and CRA v3).
• 🔄 State Management: Optional Redux Toolkit setup with pre-configured store and provider.
• 📦 Essential Libraries: Pre-installs common professional dependencies:
  • react-router-dom (Routing)
  • axios (API requests)
  • classnames (Utility for conditional classes)
• 🚀 Ready to Code: Includes boilerplate components and examples to get you started immediately.

📦 Installation

You don't need to install it globally! Just use npm create:

npm create next-gen-react@latest

Or if you prefer to install it globally:

npm install -g create-next-gen-react
create-next-gen-react

🚀 Usage

Run the command and follow the interactive prompts:

npm create next-gen-react

You will be asked:

1. Project Name: What do you want to call your app?
2. Language: JavaScript or TypeScript?
3. State Management: Do you need Redux Toolkit?
4. Build Tool: Vite (Fast & Modern) or Create React App (Classic)?
5. Styling: Do you want to set up Tailwind CSS?

Example Output Structure

my-pro-app/
├── src/
│   ├── assets/          # Images, icons, global styles
│   ├── components/      # Reusable UI components
│   │   ├── common/      # Buttons, Inputs, Modals
│   │   ├── layout/      # Header, Footer, Sidebar
│   │   └── features/    # Feature-specific components
│   ├── config/          # App configuration (env vars, constants)
│   ├── context/         # React Context providers
│   ├── hooks/           # Custom React hooks
│   ├── layouts/         # Page layouts
│   ├── pages/           # Page components (Route targets)
│   ├── services/        # API services and Axios setup
│   ├── store/           # Redux store slices (if selected)
│   ├── styles/          # Global CSS/SCSS
│   ├── utils/           # Helper functions
│   ├── App.jsx
│   └── main.jsx
├── public/
├── package.json
├── vite.config.js       # or webpack config
└── README.md

🛠 Technologies Used

• Inquirer.js - For interactive command-line prompts.
• Chalk - For beautiful terminal styling.
• Ora - For elegant terminal spinners.
• Execa - For executing system commands.
• FS-Extra - For file system operations.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct, and the process for submitting pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License.

Made with ❤️ by Tuwel Shaikh