Hi there!
As my project is getting bigger and bigger, my components folder starts to be a mess with 100+ components, a lot of things in there.
I was wondering how do you organize your components while working on large-scale project? You want them to be reusable as maximum as you can, so you don’t want to name them with something page-specific. So do you follow a specific naming convention? How does your directory structure looks like to categorize your components?
Are you using a pod structure?
And what do you think of something like http://patternlab.io/ ?
Please share your way to do things!
Thanks,
1 Like
Hi @alexmngn, how about grouping components in sub-folders? The name of the folders can be anything you want.
1 Like
Yes for sure, but I’m looking for idea to organize them in folders.
Should I have a folder full of different type of buttons?
Should I have a folder with all my form elements? And what about compounds or multiple form elements that creates a new component?
Should I have a folder by category of components? Layout, Block, Navigation, Social…
I’m looking for ideas to have the best way to organize the components, especially when you have a lot of components interacting together, some of them made of multiple components…
How big websites with 1,000 components can stay organized? And as a developer, how to you find the component you need easily?
It’s a tough one to answer. First, I never worked in a project with 100 components, let alone 1000…
I guess it all comes down to personal preference, finding patterns to organize stuff, and how you or the developers you work with are more comfortable finding those components. Sorry I can’t help.
I tend to group reusable components by type, i.e., forms/, modals/, containers/, etc. For feature-specific components I create a folder per-feature.
1 Like
And I go the reverse approach, grouping components by functional area (product/, article/), with a ui/ directory for model-agnostic components, say a date picker.