Contributing to Frontend

For frontend development conventions, see the Frontend Guidelines.

Project Structure

The majority of the code resides in src.

src
|
+-- components        # shared components used across the entire application
|
+-- config            # all the global configuration, env variables etc. get exported from here and used in the app
|
+-- features          # feature based modules
|
+-- hooks             # shared hooks used across the entire application
|
+-- routes            # routes configuration
|
+-- stores            # global state stores
|
+-- test              # test utilities and mock server
|
+-- types             # base types used across the application
|
+-- utils             # shared utility functions

Ultimately we develop a new feature in the features folder that contains domain specific code for a given feature.

A feature could have the following structure:

src/features/new-feature
|
+-- api         # exported API request declarations and api hooks related to a specific feature
|
+-- components  # components scoped to a specific feature
|
+-- hooks       # hooks scoped to a specific feature
|
+-- routes      # route components for a specific feature pages
|
+-- stores      # state stores for a specific feature
|
+-- types       # typescript types for TS specific feature domain
|
+-- utils       # utility functions for a specific feature
|
+-- index.ts    # entry point for the feature, it should serve as the public API of the given feature and exports everything that should be used outside the feature

Bootstrapping (Order of Execution)

The entry point for the frontend is src/main.tsx. From there three modules get imported src/Root.tsx, src/App.tsx and src/config/index.ts. All top level statements will also be executed during this module loading. This is true for the following in this order:

  1. Environment configuration src/config/env.ts
  2. i18n configuration src/config/i18n/index.ts
  3. axios configuration src/config/index.ts

Map is nested the following way:

  • MapWrapper most outer, for all layers
  • Map contains toolbar etc.
  • BaseStage is the stage of Konva, i.e., the first Konva component and all other components are children

React:

Frontend Architecture:

Zustand (Global State Management):

React Query (Server State Management):

Storybook: