🚀 React Folder Structure Generator

A professional CLI tool to instantly generate a scalable and modern React project folder structure inside your current directory.

Perfect for developers who want a clean architecture setup for React projects with optional support for:

• ✅ TypeScript
• ✅ Tailwind CSS
• ✅ Redux Toolkit
• ✅ React Router
• ✅ Clean scalable folder architecture

📦 Installation

Run directly using NPX

npx react-folder-structure-generator

Or install globally

npm install -g react-folder-structure-generator

⚡ Usage

Navigate to your React project folder (or an empty directory) and run:

react-folder-structure-generator

🛠 Available Options

| Option | Description | | ------------------ | -------------------------------- | | -t, --typescript | Generate TypeScript structure | | --tailwind | Setup Tailwind CSS | | --redux | Add Redux Toolkit setup | | --router | Add React Router structure | | -f, --force | Overwrite existing files/folders | | -h, --help | Display help menu |

📌 Example Commands

Standard React Structure

react-folder-structure-generator

React + TypeScript + Tailwind

react-folder-structure-generator --typescript --tailwind

Full Professional Setup

react-folder-structure-generator --typescript --tailwind --redux --router

📁 Generated Folder Structure

Default Structure

src/
├── assets/
│   ├── images/
│   └── icons/
│
├── components/
│   ├── ui/
│   ├── layout/
│   └── sections/
│
├── pages/
├── hooks/
├── context/
├── services/
├── utils/
├── styles/
│
├── App.jsx
├── main.jsx
└── index.css

📂 Folder Explanation

📁 assets/

Stores all static resources used in the project.

assets/
├── images/
└── icons/

Purpose

• Store images
• SVG icons
• Fonts
• Media files

📁 components/

Reusable React components.

components/
├── ui/
├── layout/
└── sections/

📁 ui/

Small reusable UI components.

Examples:

• Button
• Input
• Modal
• Card

📁 layout/

Application layout components.

Examples:

• Navbar
• Sidebar
• Footer
• Header

📁 sections/

Page-specific reusable sections.

Examples:

• HeroSection
• FeaturesSection
• TestimonialsSection

📁 pages/

Contains application pages/screens.

pages/
├── Home/
├── About/
└── Contact/

Purpose

• Route-based components
• Main screens

📁 hooks/

Custom React hooks.

hooks/
├── useAuth.js
├── useFetch.js
└── useTheme.js

Purpose

• Reusable logic
• Cleaner components
• Better code separation

📁 context/

React Context API files.

context/
├── AuthContext.jsx
└── ThemeContext.jsx

Purpose

• Global state management
• Theme handling
• Authentication state

📁 services/

API calls and backend services.

services/
├── api.js
├── authService.js
└── userService.js

Purpose

• Axios setup
• API requests
• External services

📁 utils/

Helper and utility functions.

utils/
├── formatDate.js
├── constants.js
└── validators.js

Purpose

• Reusable helper methods
• Common functions
• Constants

📁 styles/

Global styling files.

styles/
├── variables.css
├── global.css
└── themes.css

Purpose

• Global styles
• Theme variables
• CSS utilities

📄 Main Files

App.jsx / App.tsx

Main application component.

function App() {
  return <h1>Hello React</h1>;
}

export default App;

main.jsx / main.tsx

React entry point.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

index.css

Global CSS styles.

body {
  margin: 0;
  font-family: sans-serif;
}

🎨 Tailwind CSS Support

If --tailwind is used, the generator adds:

tailwind.config.js
postcss.config.js

And updates:

@tailwind base;
@tailwind components;
@tailwind utilities;

🧠 Redux Support

If --redux is enabled:

src/
├── redux/
│   ├── store.js
│   └── slices/

Includes

• Redux Toolkit
• Store configuration
• Slice architecture

🌐 React Router Support

If --router is enabled:

src/
├── routes/
│   └── AppRoutes.jsx

Includes

• BrowserRouter setup
• Route organization
• Page navigation structure

✅ Why Use This Generator?

✔ Clean Architecture ✔ Professional Folder Structure ✔ Faster Project Setup ✔ Scalable for Large Applications ✔ Beginner Friendly ✔ Production Ready

📌 Recommended For

• React Developers
• Frontend Developers
• Freelancers
• Agencies
• Students
• Large-scale Applications

🔥 Future Features

• Zustand Support
• Next.js Structure
• Authentication Boilerplate
• API Templates
• Testing Setup
• ESLint + Prettier
• Docker Support

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to branch
5. Open a Pull Request

📜 License

MIT License

👨‍💻 Author

BHOI DIXITBHAI

⭐ Support

If you like this project, give it a ⭐ on GitHub and share it with other developers.

Happy Coding 🚀