src
├── assets
│   ├── animations
│   ├── icons
│   └── images
├── components
│   └── <group>.components
│       └── <name>.component
│           ├── <name>.component.scss
│           └── <name>.component.tsx
├── globals
│   ├── enums
│   ├── helpers
│   └── hooks
├── i18n
│   ├── de
│   └── en
├── pages
│   └── <group>.pages
│       └── <name>.page
│           ├── <name>.page.scss
│           └── <name>.page.tsx
├── routing
│   ├── routing.protected.config.tsx
│   └── routing.tsx
├── schemas
│   └── <group>.schemas
│       └── <name>.schema.ts
├── services
│   └── http.clients
│       └── http.<name>.client.ts
├── stores
│   └── <name>.store.ts
└── styles
    ├── global.scss
    ├── index.scss
    ├── themes.scss
    └── utils.scss

​
Folder Structure and File Naming

The foundation of a maintainable and scalable ReactJS project lies in its organization. A well-organized folder structure paired with a consistent file naming convention is paramount for ensuring that the project remains navigable and comprehensible for all team members. Adhering to the established folder structure and naming guidelines facilitates a uniform understanding and eases collaboration across the board.

​
Understanding the Structure:

  • Assets: Contains all static resources such as images, icons, and animations.
  • Components: Houses reusable UI components. Group related components together for better organization.
  • Globals: For global enums, helpers, and hooks that can be used throughout the application.
  • i18n: Internationalization folders, typically containing language files like English (en) and German (de).
  • Pages: Represents the different pages of the application. Each page has its own folder with its styling and logic.
  • Routing: Contains the routing configuration for the application, including any protected route configurations.
  • Schemas: Defines the data models or interfaces used throughout the application.
  • Services: For all the HTTP client services that interact with the backend.
  • Stores: Where state management stores (like MobX or Redux stores) are kept.
  • Styles: Contains global styles, utility classes, and theme configurations.

​
Best Practices:

  • Logical Grouping: Files related to a specific feature or functionality should be grouped together. This logical grouping makes it easier to locate and manage related files.
  • Descriptive Naming: Use clear and descriptive names for folders and files. The names should reflect their purpose or the feature they relate to, allowing team members to understand their function at a glance.
  • Consistency: Maintain consistency in naming conventions across the project. Consistency reduces cognitive load and makes it easier for new team members to understand the project structure.
  • Simplicity: Keep the structure as flat as possible without sacrificing clarity. Deeply nested folders can make navigation cumbersome.
By diligently following these best practices in folder structure and file naming, we ensure that our ReactJS project is organized, scalable, and approachable, leading to efficient development and maintenance processes.