File structure for big projects

[stanwrkt]

Hey guys! I have a question about the project structure, I would appreciate if anyone can share your experience.

We have a project with more than 50 screens and hundreds of components. The main question is how to group them?
We've tried to create separate folders, for example:

/components/_Onboarding/SignUp/
/components/_Onboarding/Features/

, etc.

But this structure doesn't look clean. What is your approach?

Thanks,
Stan

[donnes]

Hey @stanwrkt!

Maintain a well organized project structure is a hard thing, even more when multiple developers work in the same project.
But answering your question, particularity I like more to organize the components separately. Something like this:

src/
├─ components/
│  ├─ button/
│  ├─ onboarding-features/
│  ├─ onboarding-signup/
│  ├─ onboarding-usage/
│  ├─ sponsors/

You can have a look at the source code of the app for the Infinite Red Chain React Conference.

Hope it's helped✌️

[flexbox]

Hey @stanwrkt
I worked on a large project with

❌ this do not sparks joy

src/
  feature1/
    components/
      sub-feature1/
      sub-feature2/
    navigator.tsx
    screen.tsx
    screen.tsx
  feature2/
    navigator.tsx
    screen.tsx
    screen.tsx  

That was a terrible experience because you constantly are looking for files (and obviously none of the naming was aligned with the type of file like xxxScreen.tsx or xxxxNavigator.tsx)

I like the approach of @donnes because it follows some advice of the react documentation about colocation

start by keeping all files in a single folder. Eventually, it will grow large enough that you will want to separate some files from the rest. By that time you’ll have enough knowledge to tell which files you edit together most often. In general, it is a good idea to keep files that often change together close to each other. This principle is called “colocation”.

[stanwrkt]

Hey @flexbox, @donnes, thanks a lot! Got it.

[yordis]

Here is the solution that we adopted, https://github.com/straw-hat-team/adr/tree/master/adrs/5541831634 has been successfully implemented in multiple codebases with different sizes.

It tries to colocate, and embrace high cohesion, you never import siblings, you can only import where both nodes connect (shared room), then you can tell what is being affected in the codebase by looking at the file structure.

Things being around the route also embrace strong colocation which leans in the previous one, also looking at the routing you can tell where you are at (in mobile is more flatten but still).

Lastly, also gives you the exact same structure in a fractal pattern way so you don't need to relearn based on the developer once you visit a new directory. The directories cover most of the use cases that you will face in a React codebase.

I hope it works, share some feedback or questions about it.