Front End Application Organisation

Just a space to keep track of opinionated ways to organise front end application code.

Having a crack

  • Each component should have its own style and tests
  • Type alias (type itself which I have put in the models folder) are PascalCase. Example type TeamLead = {…}.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
spa
│___src
    │___components
    │   │___App
    │   │       - app.css
    │   │       - App.tsx
    │   │       - App.test.tsx
    │   │___GlobalSpinner
    │   │       - GlobalSpinner.tsx
    │   │___RandomComments
    │           - RandomComments.tsx
    │___context
    │        - GlobalSpinnerContext.tsx
    │___redux
    │        - Store.ts
    │        - NotesReducer.ts
    │        - NotesActions.ts
    │___hooks
    │        - useApiHook.ts
    │___services
    │        - getTeamleads.ts 
    │        - updateAudit.ts 
    │___assets
    │        - favicon-32.png
    │        - logo.png
    │___models
    │        - audit.model.ts
    │        - teamLead.model.ts
    - index.tsx

Ducks

Ducks is just a convention, its a way of organising features.

Here clients is the feature and Im not really sold on Pascal like the example above.

1
2
3
4
5
6
7
8
9
spa
│___src
    │___redux
        │___ducks
            │___clients
                   - actions.ts
                   - reducers.ts
                   - sagas.ts
                   - selectors.ts