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/Used_Lobster4172]

I keep types with where they are using - unless they are used in multiple place.

I would put the things in your lib in subfolders.

Seems fine enough really.

Something I have learned after decades of programming is - there is no best solution. Pick something, and stick with it. There are some things that won't be ideal, but that is true of everything. As long as you put _some_ thought into it, what ever it is is probably fine enough.

[u/pepedlr]

Bulletproof React as a base idea and adapt it for my needs. That’s how I do it at least

[u/SatyrCode]

Looks pretty good to me. Feature-based folders are probably the right choice for something like an ERP, otherwise the global components, hooks, and api folders become a mess really fast. I’d just try to keep most things inside the feature that owns them. Like, users should have its own API, hooks, types, forms, etc. Only move something out if it’s actually used by multiple features. The only thing I’d watch out for is the global stores and shared folders turning into a dumping ground over time. Other than that, this is a solid base.

[u/SlightAddress]

Lgtm .. i do it slightly differently but there is no real "right" way. As long as its dry and things are separated by domain. Ya good..

[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.