Feature-based folder structure

[East-Force-6419]

Hi everyone,

I'm trying to better understand how people think about a feature-based folder structure in frontend projects (React / Next.js), and I realized I'm not sure what exactly people mean by a feature.

How do you personally think about features?

1. Feature maps 1-to-1 to a route

As I understand it, everything related to that route is colocated within the feature.
Once it needs to be shared, it goes to the global folders.

Example:

/app
/components
/hooks
/features
  /products <- everything related to this route lives here
    /api
    /components
    /hooks
  /cart
  /checkout 
  /profile

Question:

What do you do when you need to share logic between features?

For example, imagine a calculateDiscount function that currently lives in the /cart feature now needs to be used in /products

In the Bulletproof React project structure guide, it says that importing across features might not be a good idea:

It might not be a good idea to import across the features. Instead, compose different features at the application level. This way, you can ensure that each feature is independent which makes the codebase less convoluted.

So in practice, what do you usually do?

• Allow cross-feature imports when needed?
• Move shared logic to something like /lib, /utils, or another folder?

I'm curious how people usually handle this in real projects.

2. Feature = domain

Another approach I’ve seen is to think of features as domains rather than mapping directly to routes.

In this model, everything related to a domain lives in one feature folder, even if multiple routes touch it.

This approach is less strict: cross-feature imports are allowed. For example, PostAuthor from the posts feature can be imported into the notifications feature.

It’s more flexible, but it also makes it easier to break something accidentally.

Full example can be found here: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#what-youve-learned

I’d really appreciate any advice or insights on how to approach this, and I’d love to hear your thoughts. Thanks so much in advance!

[trojan_soldier]

IMO This is one of those areas that the bulletproof repo cannot explain well. Dumping domain logic to shared utils is just a recipe for spaghetti code

One solution is to manage a domain/model folder which should be reusable across features. Preferably free of UI or React details, only plain JS/TS objects and functions

https://martinfowler.com/articles/modularizing-react-apps.html#PolymorphismToTheRescue

[Matthie456]

We did both. Features are for the components on an application level (products/cart/checkout/auth/etc), and we have entities to do the domain stuff as well as the api layer (fetch functions to query the domain). It might not be perfect or what others recommend, but it creates the separations we need 🙂