Organize your folders by feature

Felipe Lima
Felipe Lima
Jun 14, 2019 - React Vue Angular
Organize your folders by feature

The way you structure your project folders may not be a big deal at the start when you have 5 to 10 entities.

But as your app grows up to 20, 30+ entities, it starts to be a huge pain, and if you structured your folders in the wrong way you have only two options: a major refactor or to live with it.

There are two common ways to structure your project:

Folder-by-feature:

├── customer
│   ├── customer-model.js
│   ├── customer-page.js
│   ├── customer-service.js
│   ├── customer-store.js
│   ├── form
│   │   ├── customer-form-page.js
│   │   └── customer-form-validator.js
│   └── list
│       └── customer-list-page.js
├── order
│   ├── form
│   │   ├── order-form-page.js
│   │   └── order-form-validator.js
│   ├── list
│   │   └── order-list-page.js
│   ├── order-model.js
│   ├── order-page.js
│   ├── order-service.js
│   └── order-store.js
└── product
    ├── form
    │   ├── product-form-page.js
    │   └── product-form-validator.js
    ├── list
    │   └── product-list-page.js
    ├── product-model.js
    ├── product-page.js
    ├── product-service.js
    └── product-store.js

Folder-by-type:

├── models
│   ├── customer-model.js
│   ├── order-model.js
│   └── product-model.js
├── pages
│   ├── customer
│   │   ├── customer-form-page.js
│   │   ├── customer-list-page.js
│   │   └── customer-page.js
│   ├── order
│   │   ├── order-form-page.js
│   │   ├── order-list-page.js
│   │   └── order-page.js
│   └── product
│       ├── product-form-page.js
│       ├── product-list-page.js
│       └── product-page.js
├── services
│   ├── customer-service.js
│   ├── order-service.js
│   └── product-service.js
├── store
│   ├── customer-store.js
│   ├── order-store.js
│   └── product-store.js
└── validators
    ├── customer-form-validator.js
    ├── order-form-validator.js
    └── product-form-store.js

Tutorials and courses love "Folder-by-type" structure. That's because it's easier to implement. When the alternative - folder-by-feature - gives you nothing at start.

But tutorials and courses have limited scope.

They forget that they are teaching to people that will develop real apps that will - hopefully - be big.

The greatest advantage of the 'Folder-by-feature' structure is that the files that change together are placed together. When they are at the same folder, there's almost no efford to alternate between them.

You may argue that you can use the "Find files..." tool to navigate, but every time you do it you are spending a litte more energy than needed. And how many times you do it by day? 100? 500?