Okay I admit, I’ve got your attention with a somewhat catchy title but hear me out.
When you tend to have large React, Svelte, Vue, any frontend framework (or library) project, it’s easy to put all the components in a components folder, containers in the containers folder and so on. Well I have a different approach for really large projects. Something that looks a bit like this
public/
package.json
index.ts
src/
│
├── components/
│ ├── Button/
│ │ ├── Button.tsx
│ │ ├── Button.tests.tsx
│ │ └── Button.css
│ ├── Dropdown/
│ ├── Toaster/
│ ├── Header/
│ └── Footer/
│
├── layouts/
│ └── StoreLayout/
│ ├── components/
│ │ ├── SearchDropdown/
│ └── StoreLayout.tsx
│
└── pages/
├── StoreProductPage/
│ ├── components/
│ │ ├── Carousel/
│ │ └── ProductCard/
│ └── StoreProductPage.tsx
│
└── StoreCheckoutPage/
├── components/
│ └── ProductCheckoutCard/
└── StoreCheckoutPage.tsx
This way it’s easy to remove pages without other parts of the site. All the general components go in the components folder. But Page specific components go in a sub-folder.
Check out my video explanation on YouTube.
It would be good to hear your thoughts on this approach, if you like or dislike it, and if you have any ideas for improvements. You can find me on the socials, or you can just write a comment below (if this has one).