React directory structure

/src ├── assets/ │ ├── images/ │ └── styles/ ├── components/ │ ├── common/ │ │ ├── Empty.tsx │ │ ├── StatusChip.tsx │ │ └── index.ts │ ├── fields/ │ │ ├── MoneyField.tsx │ │ └── index.ts │ └── inputs/ │ ├── AddressInput.tsx │ └── index.ts ├── features/ │ ├── companies/ │ │ ├── CompanyCreate.tsx │ │ ├── CompanyEdit.tsx │ │ ├── CompanyList.tsx │ │ └── index.ts │ ├── invoices/ │ │ ├── InvoiceCreate.tsx │ │ ├── InvoiceEdit.tsx │ │ ├── InvoiceList.tsx │ │ ├── InvoiceShow.tsx │ │ └── index.ts │ └── users/ │ ├── UserCreate.tsx │ ├── UserEdit.tsx │ ├── UserList.tsx │ └── index.ts ├── hooks/ │ ├── usePermissions.ts │ └── useDebounce.ts ├── layout/ │ ├── AppBar.tsx │ ├── Layout.tsx │ ├── Login.tsx │ └── Menu.tsx ├── pages/ │ ├── Dashboard.tsx │ └── Settings.tsx ├── providers/ │ ├── authProvider.ts │ ├── dataProvider.ts │ └── i18nProvider.ts ├── theme/ │ └── theme.ts ├── types/ │ ├── index.ts │ └── react-admin.d.ts ├── utils/ │ ├── formatters.ts │ └── history.ts ├── App.tsx └── index.tsx

Of course. Here is a battle-tested directory structure for a scalable B2B React Admin application that emphasizes maintainability and separation of concerns. This structure is organized around features (or "resources" in React Admin terms), which is a highly effective way to manage complexity as your application grows. Example Directory Structure Here is a visual representation of the recommended structure: /src ├── assets/ │ ├── images/ │ └── styles/ ├── components/ │ ├── common/ │ │ ├── Empty.tsx │ │ ├── StatusChip.tsx │ │ └── index.ts │ ├── fields/ │ │ ├── MoneyField.tsx │ │ └── index.ts │ └── inputs/ │ ├── AddressInput.tsx │ └── index.ts ├── features/ │ ├── companies/ │ │ ├── CompanyCreate.tsx │ │ ├── CompanyEdit.tsx │ │ ├── CompanyList.tsx │ │ └── index.ts │ ├── invoices/ │ │ ├── InvoiceCreate.tsx │ │ ├── InvoiceEdit.tsx │ │ ├── InvoiceList.tsx │ │ ├── InvoiceShow.tsx │ │ └── index.ts │ └── users/ │ ├── UserCreate.tsx │ ├── UserEdit.tsx │ ├── UserList.tsx │ └── index.ts ├── hooks/ │ ├── usePermissions.ts │ └── useDebounce.ts ├── layout/ │ ├── AppBar.tsx │ ├── Layout.tsx │ ├── Login.tsx │ └── Menu.tsx ├── pages/ │ ├── Dashboard.tsx │ └── Settings.tsx ├── providers/ │ ├── authProvider.ts │ ├── dataProvider.ts │ └── i18nProvider.ts ├── theme/ │ └── theme.ts ├── types/ │ ├── index.ts │ └── react-admin.d.ts ├── utils/ │ ├── formatters.ts │ └── history.ts ├── App.tsx └── index.tsx

Explanation of Each Directory

features/ (or resources/) This is the most important directory. Instead of grouping files by type (e.g., all "List" views together), you group them by the business feature or resource they represent. This makes the codebase much easier to navigate and maintain.

* features/companies/: Contains all components related to the "companies" resource: CompanyList, CompanyEdit, CompanyCreate, etc.
* index.ts: Each feature folder should have an index.ts file that exports all of its components (a "barrel file"). This allows for cleaner imports in your main App.tsx file.
  // src/features/companies/index.ts

export * from './CompanyList'; export * from './CompanyEdit'; export * from './CompanyCreate';

components/ This folder is for shared, reusable UI components that are not tied to a single feature.

* common/: General-purpose components like a custom Empty state component or a StatusChip used across multiple resources.
* fields/: Custom React Admin  components, such as a MoneyField that formats currency.
* inputs/: Custom React Admin  components, like a complex AddressInput group.

providers/ This is a dedicated place for your core React Admin providers. Keeping them together makes the app's data and authentication logic easy to find.

* dataProvider.ts: Handles all communication with your API.
* authProvider.ts: Manages login, logout, permissions, etc.
* i18nProvider.ts: Handles internationalization and translations.

layout/ Use this directory to override React Admin's default layout components.

* Layout.tsx: Your main app shell, which pulls in the custom AppBar and Menu.
* Menu.tsx: A custom menu, perhaps with icons or role-based visibility.
* Login.tsx: A custom-branded login page.

pages/ For any custom pages in your application that are not standard CRUD views.

* Dashboard.tsx: A perfect place for a dashboard component that shows charts and summary data.
* Settings.tsx: A user settings or application configuration page.

hooks/ For custom, reusable React hooks that contain business logic.

* usePermissions.ts: A common hook in B2B apps to check the current user's roles and permissions.
* useDebounce.ts: A utility hook to debounce user input, useful for search filters.

theme/ Contains your Material UI theme configuration.

* theme.ts: Define your primary/secondary colors, typography, spacing, and component overrides here.

types/ Centralize your TypeScript types for better code quality and autocompletion.

* index.ts: Define types for your data models (e.g., Company, User, Invoice).
* react-admin.d.ts: Augment React Admin's own types if needed.

Putting It All Together (App.tsx)

This structure leads to a very clean and readable main App.tsx file. // src/App.tsx import { Admin, Resource, CustomRoutes } from 'react-admin'; import { Route } from 'react-router-dom';

// Providers import { dataProvider } from './providers/dataProvider'; import { authProvider } from './providers/authProvider';

// Layout and Pages import { Layout } from './layout/Layout'; import { Dashboard } from './pages/Dashboard';

// Features (Resources) import { CompanyList, CompanyEdit, CompanyCreate } from './features/companies'; import { InvoiceList, InvoiceEdit, InvoiceShow } from './features/invoices'; import { UserList } from './features/users';

const App = () => (

{/* Custom pages */}
<CustomRoutes>
  <Route path="/settings" element={<SettingsPage />} />
</CustomRoutes>

);

export default App;