react-file-structure-kit

React File Structure Kit

A modern CLI tool that sets up organized file structure and initial code for React Vite projects. This package helps you quickly add a well-organized folder structure and pre-written components to your existing Vite React project.

Features

• 🚀 Quick Setup: Add organized file structure to existing Vite React projects
• ⚙️ Smart Detection: Automatically detects TypeScript vs JavaScript projects
• 📁 Organized Structure: Well-organized folder structure following React best practices
• 🎨 Modern UI: Pre-built components with responsive design using Tailwind CSS
• 📝 Code Quality: Modern ESLint configuration with TypeScript support
• 🔧 Multiple Options: Support for React Router, React Icons, and more
• 🏗️ Scalable Architecture: Ready for large-scale applications

Installation

Global Installation (Recommended)

npm install -g react-file-structure-kit

Local Installation

npm install react-file-structure-kit

Usage

Prerequisites

First, create a Vite React project using the official Vite command:

npm create vite@latest my-app -- --template react
# or for TypeScript
npm create vite@latest my-app -- --template react-ts

Setup File Structure

Navigate to your project directory and run:

cd my-app
setup-react-structure

This will automatically detect if your project is TypeScript or JavaScript and set up the appropriate file structure.

Quick Setup (Skip Prompts)

setup-react-structure --yes

This will use default settings and set up the file structure immediately.

Available Options

The CLI supports the following options:

• --yes, -y: Skip prompts and use default settings
• --path, -p: Specify target directory path (default: current directory)
• --version, -v: Show version information
• --help, -h: Show help information

The tool automatically detects:

• TypeScript vs JavaScript: Based on existing configuration files and dependencies
• Project structure: Adapts to your existing Vite React setup

Generated File Structure

src/
├── components/
│   ├── common/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── index.ts
│   └── layout/
│       ├── Navbar.tsx
│       ├── Footer.tsx
│       ├── Layout.tsx
│       └── index.ts
├── pages/
│   ├── Home/
│   │   └── HomePage.tsx
│   ├── About/
│   │   └── AboutPage.tsx
│   ├── Contact/
│   │   └── ContactPage.tsx
│   └── index.ts
├── routes/
│   └── index.ts
├── hooks/
│   ├── useLocalStorage.ts
│   ├── useDebounce.ts
│   └── index.ts
├── utils/
│   ├── helpers.ts
│   ├── constants.ts
│   └── index.ts
├── services/
│   └── api.ts
├── types/
│   └── index.ts
├── assets/
│   └── styles/
│       └── globals.css
├── App.tsx
└── main.tsx

Note: File extensions will be .tsx/.ts for TypeScript projects and .jsx/.js for JavaScript projects.

Pre-built Components

The generator creates several pre-built components:

Navbar Component

• Responsive navigation bar
• Modern TypeScript implementation
• Clean, professional design

Footer Component

• Fixed footer with copyright information
• Professional styling

Home Page

• Welcome message
• Clean layout with proper spacing
• TypeScript-ready structure

Complete Workflow

1. Create a Vite React Project

# For JavaScript
npm create vite@latest my-app -- --template react

# For TypeScript
npm create vite@latest my-app -- --template react-ts

2. Navigate to Project Directory

cd my-app

3. Install Dependencies

npm install

4. Set Up File Structure

# Install the file structure kit
npm install -g react-file-structure-kit

# Run the setup
setup-react-structure

5. Install Additional Dependencies

npm install

6. Start Development

npm run dev        # Start development server
npm run build      # Build for production
npm run preview    # Preview production build
npm run lint       # Run ESLint

Included Features

The generated file structure includes:

• ✅ React Router - Client-side routing with React Router DOM
• ✅ React Icons - Beautiful icon library for UI components
• ✅ TypeScript Support - Full TypeScript support with proper types
• ✅ Tailwind CSS - Utility-first CSS framework for styling
• ✅ Custom Hooks - Reusable hooks for localStorage and debouncing
• ✅ API Services - Ready-to-use API service functions
• ✅ Utility Functions - Common helper functions and constants
• ✅ Organized Structure - Scalable folder architecture following best practices

What Gets Added

The package adds the following to your existing Vite React project:

Additional Dependencies

• react-router-dom - For client-side routing
• react-icons - For beautiful icons
• @types/react-router-dom - TypeScript types for React Router

Environment Files

• .env - Environment variables template
• .env.example - Example environment file

Updated package.json

• Adds the new dependencies to your existing package.json
• Ensures basic scripts are present (dev, build, preview, lint)

Examples

Setup in a TypeScript Project

# Create a TypeScript Vite project
npm create vite@latest my-ts-app -- --template react-ts
cd my-ts-app
npm install

# Install and run the file structure kit
npm install -g react-file-structure-kit
setup-react-structure

Setup in a JavaScript Project

# Create a JavaScript Vite project
npm create vite@latest my-js-app -- --template react
cd my-js-app
npm install

# Install and run the file structure kit
npm install -g react-file-structure-kit
setup-react-structure

Quick Setup (Skip Prompts)

setup-react-structure --yes

Customization

Customizing Generated Projects

After running the setup, you can:

• Modify Components: Edit the pre-built components in src/components/layout/ and src/components/common/
• Add Pages: Create new pages in src/pages/ and update routes in src/routes/index.ts
• Customize Styles: Modify src/assets/styles/globals.css for global styles
• Add Dependencies: Install additional packages as needed
• Configure Vite: Modify vite.config.ts for build customization
• Add Services: Create API services in src/services/
• Add Types: Define TypeScript types in src/types/ (TypeScript projects only)
• Add Hooks: Create custom hooks in src/hooks/
• Add Utils: Add utility functions in src/utils/

Extending the File Structure Kit

If you want to modify the file structure kit itself:

• Add New Components: Edit src/templates.ts and add new template functions
• Add New Dependencies: Modify the updatePackageJson function in src/generator.ts
• Add New CLI Options: Edit src/cli.ts to add new command options

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please:

• Check the Issues page
• Create a new issue with detailed information
• Include your Node.js version and operating system

Changelog

Version 1.0.0

• Initial release
• Automatic TypeScript/JavaScript detection
• Complete file structure setup for React Vite projects
• Pre-built components with Tailwind CSS styling
• React Router integration
• Custom hooks and utility functions
• API service templates

Learn More

You can learn more in the Vite documentation.

To learn React, check out the React documentation.

For TypeScript, visit the TypeScript documentation.

Happy Coding! 🎉