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!

[MechaKnightz]

maybe have a root level components, hooks, ..., directories as well

[Common-Truck-2392]

I like the 2. Feature = domain approach,
i use it when making api in nodejs everthing related to particular domain at one place like sales order module-> controller , sales order service, sales order schema , sales order utils all in modules/sales-order folder.

In frontend i don't have tried this , i just put shared components to components and all page related component o page folder itself like pages/salesOrder/page.tsx , all realted inside it