add application structure

Author: Surjit Kumar Sahoo

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

@@ -11,28 +11,28 @@ sidebar_position: 5
 
 ```txt title="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
+├── 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
+    ├── 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
+    |   |   └── 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.
+    │       └── useCurrentlyPlaying <--- provides live data of currently playing video, progress, duration, title etc.
     |
-    └── chat/ // <-------- All the chat / comments related code goes here
+    └── chat/ <-------- All the chat / comments related code goes here
         ├── comments
         └── liveChat
 ```
@@ -43,15 +43,15 @@ In the above example, all the files are neatly separated. chat components should
 
 ```txt title="Bad folder structure example"
 YouTube/
-├── components/ // <------------ All the components kept together: all mixed up!
+├── 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!
+├── routes <---------------- All the routes defined together: all mixed up!
 ├── utils
 ├── hooks/
 │   ├── useChatGroups.ts