Frontend architecture

Core Model

The core model consists of interfaces used by the application and the Preact components.

API functions

To access the backend, we define functions that accept and return interfaces from the core model. The functions themselves use an openapi-client that is auto-generated from the openapi-spec of the backend, for example via

openapi-client-axios or oazapfts.

Websocket connection

The websocket connection is used for user notifications. It writes data to the recoil store from there it is distributed to the components that display them.

Recoil

For global parts of the application states (such as "user info" and "notifications"), we use a Recoil store (recoil).

Page state and component state is kept within the components.

Atomic design

We use atomic design for structuring components.

Further tools

• eslint is used for static analysis.
• dependency-cruiser is used to enforce architectural decisions.
• prettier is used for code formatting.
• msw is used to mock backends for testing and storybook
• storybook is used to showcase single components and possible for visual testing