Skip to content

Latest commit

 

History

History
117 lines (76 loc) · 4.04 KB

README.md

File metadata and controls

117 lines (76 loc) · 4.04 KB
Raw

App Frontend

A progressive web app.

Deployment

The app is automatically deployed: ABC DPT App

Local setup

Dependencies

Make sure to have Node.js and yarn installed on your machine.

Then, install the node dependencies:

$ yarn

Running the project for development

Run the app:

$ yarn start

API endpoint, Mock API

The API used by the app is documented in an OpenAPI spec at [docs/ABC-DPT.v1.yaml].

By default, API requests are mocked using MSW. The behavior of the API client can be controlled using environment variables:

  • API_USE_MOCK: Boolean whether API requests are mocked. Default: false
  • API_ROOT: String of the API root without trailing slash, e.g. "https://example.com/api". Default: ""

API mocks are defined at src/mocks/.

Technical overview

Entry point: src/index.tsx

Recommended editor setup:

  • editorconfig
  • prettier

Basic library choices:

Architecture overview:

  • The folder structure is based on the Redux Feature-Folder Approach
  • Folder structure is as follows:
    • src/app/ - App-Wide setup that depends on all the other folders
      • src/app/pages/ - App pages, i.e. index, camera, code, start, ...
    • src/common/ - Generic, reusable components and utilities
      • src/common/components/ - Generic, dumb React components
      • src/common/hooks/ - Generic React hooks, API hooks based on useSWR
      • src/common/icons/ - Additional icons that are not part of @material-ui/icons
      • src/common/testing/ - Code only used for unit testing
      • src/common/types - Generic TypeScript types used throughout the app
    • src/features/ - Folders that contain all functionality related to a specific feature
      • src/features/code/ - Game code feature
      • src/features/parameters/ - Game parameter feature
    • src/mocks/ - Mock Service Worker setup and handlers

Unit Tests

Every component and every module should have a basic unit tests. Unit tests are written using Jest.

Tests are written as follows:

To run all tests, execute:

yarn test

Internationalization

For Internationalization, formatjs / react-intl is used. The workflow is as follows:

1. Message Declaration

Declare messages only using default message and description!

See react-intl API Reference for a full documentation.

2. Message Extraction

Run yarn extract. The file at lang/de.json is updated. On import, it is automatically precompiled using Webpack.

3. Message Translation

Translate the messages inside lang/de.json. The messages are formatted using the ICU Message syntax.

See Format.JS Message Syntax for a quick overview of what you can do.

See ICU Formatting Messages Documentation for a full reference.