Skip to content

Commit 8ce592d

Browse files
Surjit Kumar SahooSurjit Kumar Sahoo
Surjit Kumar Sahoo
authored and
Surjit Kumar Sahoo
committed
add application structure
1 parent 21944b4 commit 8ce592d

3 files changed

Lines changed: 134 additions & 2 deletions

File tree

‎docs/1.architecture/3.how-to-write-a-component.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 2
2+
sidebar_position: 3
33
---
44

55
# How to Write a Component

‎docs/1.architecture/4.open-close-principle-and-the-role-of-agile.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 3
2+
sidebar_position: 4
33
---
44

55
# Open Close Principle and the Role of Agile

‎docs/1.architecture/5.how-to-structure-react-application.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
5+
# How To Structure A React Application?
6+
7+
- 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.
8+
- 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.
9+
10+
### Good Folder Structure Example ✅
11+
12+
```txt title="sample folder structure for YouTube"
13+
YouTube/
14+
├── layouts/ // <------- only high-level page layouts, they dont know any of the feature details
15+
├── pages/ // <--------- Pages are what get displayed on different routes, Pages are constructed using several features
16+
├── routes/ // <-------- Top level routes, feature level sub routes should be maintained in feature level
17+
├── common/ // <-------- common components, helpers, hooks etc all go here, these will be used throughout all the features
18+
└── features/
19+
├── player/ // <----- All the player related code (components, hooks, states, apis, helpers, configs) go inside this folder
20+
│ ├── index.ts // <--- Public API: exports only the high-level components
21+
│ ├── defaultPlayer // <--- the default main video player
22+
| | ├── hooks/ // <---- default player hooks (if any)
23+
| | ├── helpers/ // <---- default player helper functions
24+
| | ├── defaultPlayer.tsx // <------- component code
25+
| | ├── defaultPlayer.test.tsx
26+
| | ├── defaultPlayer.css
27+
| | └── index.ts // <---- exports the default player component.
28+
│ ├── miniPlayer // <------ minimized player, only shows thumbnail, title, duration and progress
29+
│ ├── pipPlayer // <------- picture in picture player
30+
| ├── helpers/ // <--- common player helper functions
31+
| ├── api/ // All the player APIs
32+
│ └── hooks/
33+
│ └── useCurrentlyPlaying // <--- provides live data of currently playing video, progress, duration, title etc.
34+
|
35+
└── chat/ // <-------- All the chat / comments related code goes here
36+
├── comments
37+
└── liveChat
38+
```
39+
40+
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.
41+
42+
### Bad Folder Structure Example 💩
43+
44+
```txt title="Bad folder structure example"
45+
YouTube/
46+
├── components/ // <------------ All the components kept together: all mixed up!
47+
│ ├── player.tsx
48+
│ ├── player.test.tsx
49+
│ ├── miniPlayer.tsx
50+
│ ├── miniPlayer.test.tsx
51+
│ ├── chat.tsx
52+
│ ├── chat.test.tsx
53+
│ └── ...
54+
├── routes // <---------------- All the routes defined together: all mixed up!
55+
├── utils
56+
├── hooks/
57+
│ ├── useChatGroups.ts
58+
│ ├── useChatGroups.test.ts
59+
│ ├── useCurrentlyPlaying.ts
60+
│ └── useCurrentlyPlaying.test.ts
61+
└── constants/
62+
├── routeConstants.ts
63+
└── configConstants.ts
64+
```
65+
66+
### Example of complete structure ✅
67+
68+
```txt title="Complete Structure (Sample)"
69+
YouTube/
70+
├── layouts/
71+
│ └── mainLayout/
72+
│ ├── mainLayout.tsx
73+
│ ├── mainLayout.styles.css
74+
│ ├── mainLayout.types.ts
75+
│ ├── mainLayout.test.ts
76+
│ └── index.tx
77+
├── pages/
78+
│ ├── profilePage/
79+
│ ├── homePage/
80+
│ └── error/
81+
│ ├── notFound/
82+
│ │ ├── notFound.tsx
83+
│ │ ├── notFound.styles.css
84+
│ │ ├── notFound.types.ts
85+
│ │ ├── notFound.test.tsx
86+
│ │ └── index.ts
87+
│ ├── serverError/
88+
│ │ ├── serverError.tsx
89+
│ │ ├── serverError.styles.css
90+
│ │ ├── serverError.types.ts
91+
│ │ ├── serverError.test.tsx
92+
│ │ └── index.ts
93+
│ └── index.ts
94+
├── routes/
95+
├── common/
96+
│ ├── components/
97+
│ │ └── inputs/
98+
│ │ ├── button/
99+
│ │ │ ├── button.tsx
100+
│ │ │ ├── button.styles.css
101+
│ │ │ ├── button.test.tsx
102+
│ │ │ ├── button.types.ts
103+
│ │ │ ├── button.stories.tsx
104+
│ │ │ └── index.ts
105+
│ │ └── index.ts
106+
│ ├── hooks/
107+
│ │ └── useFetch/
108+
│ │ ├── useFetch.ts
109+
│ │ ├── useFetch.test.tsx
110+
│ │ ├── useFetch.types.ts
111+
│ │ └── index.ts
112+
│ └── utils/
113+
|
114+
├── features/
115+
│ ├── player/
116+
│ └── chat/
117+
|
118+
└── globalState/
119+
├── core/
120+
│ ├── store.ts
121+
│ ├── stateProvider.tsx
122+
│ ├── context.ts
123+
│ ├── hooks.ts
124+
│ └── index.ts
125+
├── remote/
126+
│ └── api.ts
127+
└── local/
128+
└── leftNav/
129+
├── leftNav.slice.ts
130+
├── useLeftNav.ts
131+
└── index.ts
132+
```

0 commit comments

Comments
 (0)