How To Structure A React Application?

• The folder structure of any application should not tell us about whether its a react app or angular app or svelt app. What tools / frameworks we use to develop our application is a low level detail. But the folder structure is the highest level structure we see about an application. Hence the folder structure of an application should describe the overall structure of the application. Folder structure will differ application to application as all applications are different, just like floor plan blueprint of buildings vary building to building as all buildings / houses are different.
• Folder structure should be feature based. Like: when you read a news paper article, the title gives you some idea on the article, the first paragraph gives you some more high level information. Then the next paragraph gives you some more details and so on. The more you dig in, the more detailed it becomes. All the low level details should be present at the deepest folders and deepest level functions.

Good Folder Structure Example 🚀

sample folder structure for YouTube 🚀

YouTube/
├── layouts/ <------- only high-level page layouts, they dont know any of the feature details
├── pages/ <--------- Pages are what get displayed on different routes, Pages are constructed using several features
├── routes/ <-------- Top level routes, feature level sub routes should be maintained in feature level
├── common/ <-------- common components, helpers, hooks etc all go here, these will be used throughout all the features
└── features/
    ├── player/ <----- All the player related code (components, hooks, states, apis, helpers, configs) go inside this folder
    │   ├── index.ts <--- Public API: exports only the high-level components
    │   ├── defaultPlayer <--- the default main video player
    |   |   ├── hooks/ <---- default player hooks (if any)
    |   |   ├── helpers/ <---- default player helper functions
    |   |   ├── defaultPlayer.tsx <------- component code
    |   |   ├── defaultPlayer.test.tsx
    |   |   ├── defaultPlayer.css
    |   |   └── index.ts <---- exports the default player component.
    │   ├── miniPlayer <------ minimized player, only shows thumbnail, title, duration and progress
    │   ├── pipPlayer <------- picture in picture player
    |   ├── helpers/ <--- common player helper functions
    |   ├── api/ All the player APIs
    │   └── hooks/
    │       └── useCurrentlyPlaying <--- provides live data of currently playing video, progress, duration, title etc.
    |
    └── chat/ <-------- All the chat / comments related code goes here
        ├── comments
        └── liveChat

In the above example, all the files are neatly separated. chat components should not be kept with player components, player helpers and hooks should not be kept with chat helpers and hooks.

Bad Folder Structure Example 💩

Bad folder structure example 💩

YouTube/
├── components/ <------------ All the components kept together: all mixed up!
│   ├── player.tsx
│   ├── player.test.tsx
│   ├── miniPlayer.tsx
│   ├── miniPlayer.test.tsx
│   ├── chat.tsx
│   ├── chat.test.tsx
│   └── ...
├── routes <---------------- All the routes defined together: all mixed up!
├── utils
├── hooks/
│   ├── useChatGroups.ts
│   ├── useChatGroups.test.ts
│   ├── useCurrentlyPlaying.ts
│   └── useCurrentlyPlaying.test.ts
└── constants/
    ├── routeConstants.ts
    └── configConstants.ts

Example of complete structure 🚀

Complete Structure (Sample) 🚀

YouTube/
├── layouts/
│   └── mainLayout/
│       ├── mainLayout.tsx
│       ├── mainLayout.styles.css
│       ├── mainLayout.types.ts
│       ├── mainLayout.test.ts
│       └── index.tx
├── pages/
│   ├── profilePage/
│   ├── homePage/
│   └── error/
│       ├── notFound/
│       │   ├── notFound.tsx
│       │   ├── notFound.styles.css
│       │   ├── notFound.types.ts
│       │   ├── notFound.test.tsx
│       │   └── index.ts
│       ├── serverError/
│       │   ├── serverError.tsx
│       │   ├── serverError.styles.css
│       │   ├── serverError.types.ts
│       │   ├── serverError.test.tsx
│       │   └── index.ts
│       └── index.ts
├── routes/
├── common/
│   ├── components/
│   │   └── inputs/
│   │       ├── button/
│   │       │   ├── button.tsx
│   │       │   ├── button.styles.css
│   │       │   ├── button.test.tsx
│   │       │   ├── button.types.ts
│   │       │   ├── button.stories.tsx
│   │       │   └── index.ts
│   │       └── index.ts
│   ├── hooks/
│   │   └── useFetch/
│   │       ├── useFetch.ts
│   │       ├── useFetch.test.tsx
│   │       ├── useFetch.types.ts
│   │       └── index.ts
│   └── utils/
|
├── features/
│   ├── player/
│   └── chat/
|
└── globalState/
    ├── core/
    │   ├── store.ts
    │   ├── stateProvider.tsx
    │   ├── context.ts
    │   ├── hooks.ts
    │   └── index.ts
    ├── remote/
    │   └── api.ts
    └── local/
        └── leftNav/
            ├── leftNav.slice.ts
            ├── useLeftNav.ts
            └── index.ts