Skip to content

Commit 47d4255

Browse files
committed
update docs
1 parent 9aecaf6 commit 47d4255

File tree

4 files changed

+13
-7
lines changed

4 files changed

+13
-7
lines changed

.eslintrc.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = {
4747
{
4848
zones: [
4949
// disables cross-feature imports:
50-
// eg. src/features/auth should not import from src/features/comments, etc.
50+
// eg. src/features/discussions should not import from src/features/comments, etc.
5151
{
5252
target: './src/features/auth',
5353
from: './src/features',
203 KB
Loading

docs/project-structure.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ Most of the code lives in the `src` folder and looks something like this:
55
```sh
66
src
77
|
8-
+-- app # application level containing
8+
+-- app # application layer containing:
99
| |
10-
| +-- routes # application routes
10+
| +-- routes # application routes / can also be called pages
1111
+-- app.tsx # main application component
1212
+-- app-provider # application provider that wraps the entire application with global providers
1313
+-- assets # assets folder can contain all the static files such as images, fonts, etc.
@@ -57,7 +57,7 @@ NOTE: You don't need all of these folders for every feature. Only include the on
5757

5858
In the past, it was recommended to use barrel files to export all the files from a feature. However, it can cause issues for Vite to do tree shaking and can lead to performance issues. Therefore, it is recommended to import the files directly.
5959

60-
It might be a bad idea to import across the features. Instead, compose different features at the application level. This way, you can ensure that each feature is independent and can be easily moved or removed without affecting other parts of the application and also makes the codebase less convoluted.
60+
It might be not be a good idea to import across the features. Instead, compose different features at the application level. This way, you can ensure that each feature is independent which makes the codebase less convoluted.
6161

6262
To forbid cross-feature imports, you can use ESLint:
6363

@@ -67,7 +67,7 @@ To forbid cross-feature imports, you can use ESLint:
6767
{
6868
zones: [
6969
// disables cross-feature imports:
70-
// eg. src/features/auth should not import from src/features/comments, etc.
70+
// eg. src/features/discussions should not import from src/features/comments, etc.
7171
{
7272
target: './src/features/auth',
7373
from: './src/features',
@@ -100,7 +100,13 @@ To forbid cross-feature imports, you can use ESLint:
100100
],
101101
```
102102

103-
You might also want to enforce unidirectional codebase architecture. This means that the code should flow in one direction, from shared parts of the code to the application (shared -> features -> app). This is a good practice to follow as it makes the codebase more predictable and easier to understand. To enforce this, you can use ESLint:
103+
You might also want to enforce unidirectional codebase architecture. This means that the code should flow in one direction, from shared parts of the code to the application (shared -> features -> app). This is a good practice to follow as it makes the codebase more predictable and easier to understand.
104+
105+
![Unidirectional Codebase](./assets/unidirectional-codebase.png)
106+
107+
As you can see, the shared parts can be used by any part of the codebase, but the features can only import from shared parts and the app can import from features and shared parts.
108+
109+
To enforce this, you can use ESLint:
104110

105111
```js
106112
'import/no-restricted-paths': [

docs/state-management.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Component state is specific to individual components and should not be shared gl
99
- [useState](https://react.dev/reference/react/useState) - for simpler states that are independent
1010
- [useReducer](https://react.dev/reference/react/useReducer) - for more complex states where on a single action you want to update several pieces of state
1111

12-
[Component State Example Code](../src/features/auth/components/register-form.tsx)
12+
[Component State Example Code](../src/components/layouts/dashboard-layout.tsx)
1313

1414
## Application State
1515

0 commit comments

Comments
 (0)