DCI React App Generator

DCI React App Generator is a powerful tool that allows you to quickly scaffold a Single Page Application (SPA) React app with various pre-configured features. With this generator, you can kickstart your React projects by incorporating the following features seamlessly:

React Router: Enables easy navigation and routing within your application.
Ant Design: Provides a set of beautiful and customizable UI components for your application.
Sass Stylesheet: Allows you to utilize the power of Sass for styling your components.
ESLint + Prettier: Helps maintain code quality and ensures consistent code formatting.
ESLint + SonarQube: Analyzes your code for potential bugs, vulnerabilities, and maintainability issues.
Analyzing the Bundle Size: Provides insights into your bundle size to optimize your application's performance.
TanStack Query: Simplifies data fetching and state management in your application.
Source Code Generator: Generates boilerplate code for pages, components, hooks, and services, speeding up your development process.

Installation

To install the DCI React App Generator, use npm:

npm install -g dci-react-app-generator

Usage

After installing the package globally, you can create a new React app with the desired features using the following command:

npx dci-react-app-generator

Getting Started

Follow these steps to get started with your newly generated React app:

Navigate to the project directory:

cd <app-name>

Install the dependencies:

npm install

Start the development server:

npm start

Open your browser and visit http://localhost:3000 to see your app in action.

Folder Structure

The generated project follows a common folder structure for organizing your code:

├── src
│   ├── assets
│   ├── components
│   ├── hooks
│   ├── pages
│   ├── services
│   ├── styles
│   ├── App.ts
│   └── index.ts
├── plop-templates
├── public
├── .gitignore
├── .prettierrc
├── package.json
├── plopfile.js
└── README.md
└── tsconfig.json

src: Contains the source code of your application.
assets: Stores static assets like images, fonts, etc.
components: Houses reusable React components.
hooks: Holds custom hooks used in your application.
pages: Contains the main pages of your application.
services: Provides services for interacting with APIs or handling data logic.
styles: Contains global and component-specific styles.
App.ts: The main entry point of your application.
index.js: Renders the application and mounts it to the DOM.
public: Contains static files that will be served as-is.
plopfile.js: Configuration file for Source code generator.
plop-templates: Template files for Source code generator.
.prettierrc: Configuration file for Prettier code formatting.
.gitignore: Specifies files and directories to ignore in version control.
package.json: Contains project metadata and dependencies.

Source Code Generator

# Generate page called Home
npm run generate page Home

# Generate a component called DogCard
npm run generate component DogCard

# Generate a hook called useAsync
npm run generate hook useAsync

# Generate a service called petApi
npm run generate service petApi

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for this tool, please contact with us.