Web App Architecture

[souhaib-benbouzid]

rework the web app to the following architecture:

Web structure

📦web
 ┣ 📂app
 ┣ 📂app2
 ┣ 📂app3
 ┣ 📂common
 ┣ 📂components
 ┗ 📂documentation

components structure

📦components
 ┣ 📂component-1
 ┃ ┣ 📜component-1.spec.ts
 ┃ ┣ 📜component-1.ts
 ┃ ┗ 📜index.ts
 ┣ 📂component-2
 ┣ 📂component-3
 ┣ 📂theme
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜theme.spec.tsx
 ┃ ┗ 📜theme.tsx
 ┣ 📂documentation
 ┣ 📂storybook
 ┣ 📜index.sepc.ts
 ┗ 📜index.ts

App structure

📦app
 ┣ 📂assets
 ┣ 📂build
 ┣ 📂config
 ┣ 📂documentation
 ┣ 📂entry
 ┃ ┣ 📜app.spec.ts
 ┃ ┣ 📜app.tsx
 ┃ ┣ 📜index.pug
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜provider.tsx
 ┃ ┗ 📜providers.spec.ts
 ┣ 📂pages
 ┃ ┣ 📂page-1
 ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┣ 📜page.spec.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂page-2
 ┃ ┣ 📂page-3
 ┃ ┣ 📂page-4
 ┃ ┗ 📜index.ts
 ┣ 📂redux
 ┃ ┣ 📂actions
 ┃ ┃ ┣ 📂action-1
 ┃ ┃ ┃ ┣ 📜action.spec.ts
 ┃ ┃ ┃ ┗ 📜action.ts
 ┃ ┃ ┣ 📂action-2
 ┃ ┃ ┣ 📂action-3
 ┃ ┃ ┣ 📂action-4
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂reducers
 ┃ ┃ ┣ 📂reducer-1
 ┃ ┃ ┃ ┣ 📜reducer.spec.ts
 ┃ ┃ ┃ ┗ 📜reducer.ts
 ┃ ┃ ┣ 📂reducer-2
 ┃ ┃ ┣ 📂reducer-3
 ┃ ┃ ┣ 📂reducer-4
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📜index.spec.ts
 ┃ ┗ 📜index.ts
 ┣ 📂router
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜router.spec.ts
 ┃ ┗ 📜router.ts
 ┣ 📂tests
 ┃ ┗ 📜e2e-test.spec.ts
 ┣ 📜.babelrc.js
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc.js
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜jest.config.js
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜webpack.config.ts
 ┗ 📜webpack.tsconfig.json

this suggestion aims to achieve the following points:

• Separation of concerns

• Easier testing
  each component / action / page / package / reducer / action can be written and tested separately.

• Clean Imports

import { Component1 } from 'components'

• Better documentation
• UI docs using storybook for components
• each app has its own docs

[ZibanPirate]

i know this is only for ./web for now, but consider this comment with @Omar-Belghaouti , and get some ideas from there