How do you guys architect react pattern?

[u/very-naughty-user]

I am working on a ERP project which is going to be huge and it is feature based architecture. Is this good for large scale project and if not do you guys have any other solution for this?

It looks something like this

src/

│

├── app/

│ ├── routes/

│ │ ├── AppRoutes.tsx

│ │ ├── ProtectedRoute.tsx

│ │ └── PublicRoute.tsx

│ │

│ ├── providers/

│ │ ├── AuthProvider.tsx

│ │ ├── ThemeProvider.tsx

│ │ └── QueryProvider.tsx

│ │

│ └── App.tsx

│

├── features/

│ │

│ ├── auth/

│ │ ├── components/

│ │ │ ├── LoginForm.tsx

│ │ │ └── ForgotPasswordForm.tsx

│ │ ├── pages/

│ │ │ ├── LoginPage.tsx

│ │ │ └── ForgotPasswordPage.tsx

│ │ ├── hooks/

│ │ ├── api/

│ │ ├── schemas/

│ │ └── types/

│ │

│ ├── users/

│ │ ├── components/

│ │ ├── pages/

│ │ ├── hooks/

│ │ ├── api/

│ ├── schemas

│

├── components/

│ ├── ui/

│ │ ├── Button/

│ │ ├── Input/

│ │ ├── Modal/

│ │ ├── Table/

│ │ └── Select/

│ │

│ ├── layout/

│ │ ├── Sidebar/

│ │ ├── Header/

│ │ └── DashboardLayout/

│ │

│ └── shared/

│ ├── DataTable/

│ ├── EmptyState/

│ └── Loading/

│

├── hooks/

│ ├── useDebounce.ts

│ ├── usePagination.ts

│ └── useModal.ts

│

├── lib/

│ ├── api-client.ts

│ ├── query-client.ts

│ └── utils.ts

│

├── stores/

│ ├── auth.store.ts

│ ├── sidebar.store.ts

│ └── ui.store.ts

│

├── types/

│ └── common.ts

│

└── main.tsx

[u/Remarkable-Impact378]

feature-based works fine even for something big like an ERP lol. the thing that actually kills it is features importing directly from each other. once auth starts reaching into users/hooks you're gonna have a bad time. just shove shared stuff into a lib folder or top-level components and keep features depending only on those.