Awesome React Structure

Below is a structure for React applications. There may be some differences in the source code to suit the project's technology and business requirements. . ├── public/ # Static assets (favicons, fonts, etc.) ├── src/ # Main source code (src directory may not exist in NextJs application) │ ├── app/ # Application-wide configurations and routes. It will be the App directory or Page directory of NextJs application. │ │ ├── routes/ # Application route definitions │ │ └── root.tsx # Root component for the application │ ├── assets/ # Static assets (e.g., images, CSV files) │ │ ├── images/ # Image assets │ │ ├── csv-files/ # CSV data files │ │ └── ... # Other static assets │ ├── configs/ # Configuration files (e.g., environment settings) │ ├── e2e-tests/ # e2e test files (e.g., playwright, cypress) │ ├── lib/ # Utility libraries and helpers │ │ ├── test/ # Tests for utility functions │ │ ├── constants/ # Constant values │ │ ├── datetime/ # Date-time utilities │ │ ├── http-client/ # API client (e.g., Axios) │ │ ├── utils/ # General utility functions │ │ ├── validator/ # Data validation logic │ │ └── index.ts # Central export file for library modules │ ├── presentation/ # UI and feature-related components │ │ ├── components/ # Reusable UI components │ │ │ ├── common/ # Common folder contains reused components │ │ │ │ ├── auth-wrapper/ # Authentication wrappers │ │ │ │ │ ├── protected-wrapper.tsx │ │ │ │ │ └── public-wrapper.tsx │ │ │ │ ├── layout/ # Layout components (e.g., header, footer) │ │ │ │ │ ├── header.tsx │ │ │ │ │ └── footer.tsx │ │ │ └── ui/ # UI-specific components (buttons, inputs, etc.). They wrap components from UI libraries like Ant Design (AntD), ShadCN-UI, MUI, etc. │ │ │ ├── button.tsx │ │ │ ├── input.tsx │ │ │ └── ... │ │ ├── hooks/ # Global custom hooks │ │ │ ├── test/ # Tests for hooks │ │ │ ├── use-scroll.ts # Example hook (scroll behavior) │ │ │ └── ... │ │ ├── stores/ # State management (e.g., Zustand, Redux) │ │ │ │── tests/ # Tests for stores │ │ │ ├── use-user.store.ts # Example user store │ │ │ └── ... │ │ ├── styles/ # Global and custom styles │ │ │ ├── custom-a.css │ │ │ └── global.css │ │ ├── views/ # view-based modular architecture │ │ │ └── view-a/ # view A │ │ │ ├── tests/ # Test the view │ │ │ ├── components/ # Components specific to view A │ │ │ │ └── form-a.tsx │ │ │ ├── hooks/ # Custom hooks for view A │ │ │ │ └── use-form-a.tsx │ │ │ ├── styles/ # view-specific styles │ │ │ │ └── form-a.css │ │ │ ├── types/ # Type definitions │ │ │ │ ├── form-a-return-type.ts │ │ │ │ └── index.ts │ │ │ ├── view-a-list.view.tsx # List view for view A │ │ │ └── view-a-detail.view.tsx # Detail view for view A │ ├── services/ # Business logic and API service layer │ │ ├── _models/ # Type models for API responses │ │ │ ├── ... │ │ │ └── service-a.model.ts │ │ ├── service-a/ # Service for Feature A │ │ │ ├── test/ # Tests for services │ │ │ ├── service-a.controller.ts # Controller logic for service A │ │ │ ├── service-a.dto.ts # Data Transfer Objects (DTOs) │ │ │ ├── service-a.http.ts # HTTP request functions │ │ │ ├── service-a.schema.ts # Schema validation (e.g., Zod, Yup) │ │ │ └── index.ts │ │ └── index.ts │ ├── main.ts # Entry point for the application │ └── vite-env.d.ts # Type definitions for Vite └── ... # Various configuration files (ESLint, Prettier, etc.)

Mar 23, 2025 - 05:14

Below is a structure for React applications. There may be some differences in the source code to suit the project's technology and business requirements.

.
├── public/                        # Static assets (favicons, fonts, etc.)
├── src/                           # Main source code (src directory may not exist in NextJs application)
│   ├── app/                       # Application-wide configurations and routes. It will be the App directory or Page directory of NextJs application.
│   │   ├── routes/                # Application route definitions
│   │   └── root.tsx               # Root component for the application
│   ├── assets/                    # Static assets (e.g., images, CSV files)
│   │   ├── images/                # Image assets
│   │   ├── csv-files/             # CSV data files
│   │   └── ...                    # Other static assets
│   ├── configs/                   # Configuration files (e.g., environment settings)
│   ├── e2e-tests/                  # e2e test files (e.g., playwright, cypress)
│   ├── lib/                        # Utility libraries and helpers
│   │   ├── __test__/               # Tests for utility functions
│   │   ├── constants/              # Constant values
│   │   ├── datetime/               # Date-time utilities
│   │   ├── http-client/            # API client (e.g., Axios)
│   │   ├── utils/                  # General utility functions
│   │   ├── validator/              # Data validation logic
│   │   └── index.ts                # Central export file for library modules
│   ├── presentation/               # UI and feature-related components
│   │   ├── components/             # Reusable UI components
│   │   │   ├── common/             # Common folder contains reused components
│   │   │   │   ├── auth-wrapper/   # Authentication wrappers
│   │   │   │   │   ├── protected-wrapper.tsx
│   │   │   │   │   └── public-wrapper.tsx
│   │   │   │   ├── layout/         # Layout components (e.g., header, footer)
│   │   │   │   │   ├── header.tsx
│   │   │   │   │   └── footer.tsx
│   │   │   └── ui/                 # UI-specific components (buttons, inputs, etc.). They wrap components from UI libraries like Ant Design (AntD), ShadCN-UI, MUI, etc.
│   │   │       ├── button.tsx
│   │   │       ├── input.tsx
│   │   │       └── ...
│   │   ├── hooks/                  # Global custom hooks
│   │   │   ├── __test__/            # Tests for hooks
│   │   │   ├── use-scroll.ts        # Example hook (scroll behavior)
│   │   │   └── ...
│   │   ├── stores/                  # State management (e.g., Zustand, Redux)
│   │   │   │── __tests__/            # Tests for stores
│   │   │   ├── use-user.store.ts     # Example user store
│   │   │   └── ...
│   │   ├── styles/                   # Global and custom styles
│   │   │   ├── custom-a.css
│   │   │   └── global.css
│   │   ├── views/               # view-based modular architecture
│   │   │   └── view-a/          # view A
│   │   │       ├── __tests__/      # Test the view
│   │   │       ├── components/     # Components specific to view A
│   │   │       │   └── form-a.tsx
│   │   │       ├── hooks/          # Custom hooks for view A
│   │   │       │   └── use-form-a.tsx
│   │   │       ├── styles/         # view-specific styles
│   │   │       │   └── form-a.css
│   │   │       ├── types/          # Type definitions
│   │   │       │   ├── form-a-return-type.ts
│   │   │       │   └── index.ts
│   │   │       ├── view-a-list.view.tsx   # List view for view A
│   │   │       └── view-a-detail.view.tsx # Detail view for view A
│   ├── services/                     # Business logic and API service layer
│   │   ├── _models/                   # Type models for API responses
│   │   │   ├── ...
│   │   │   └── service-a.model.ts
│   │   ├── service-a/                 # Service for Feature A
│   │   │   ├── __test__/               # Tests for services
│   │   │   ├── service-a.controller.ts # Controller logic for service A
│   │   │   ├── service-a.dto.ts        # Data Transfer Objects (DTOs)
│   │   │   ├── service-a.http.ts       # HTTP request functions
│   │   │   ├── service-a.schema.ts     # Schema validation (e.g., Zod, Yup)
│   │   │   └── index.ts
│   │   └── index.ts
│   ├── main.ts                        # Entry point for the application
│   └── vite-env.d.ts                   # Type definitions for Vite
└── ...       # Various configuration files (ESLint, Prettier, etc.)