The user app provides a user interface for pupils and helpers and talks with the backend via GraphQL.
To develop locally, install all dependencies with npm ci, then use npm start to start a development server on port 3000 that talks to the "dev backend" (our staging landscape). Unit tests can be run with npm run test. To test out the productive deployment build the app with npm run build, then run PORT=3000 npm run serve to start the server on the specified port.
npm start will start GraphQL Codegen in Watch mode - to check GraphQL queries and generate types for them - and the React Development server in two separate processes. For a better development experience one can also npm run start-graphql and npm run start-dev-server in two separate shells.
To analyze and optimize the bundle, run npm run analyze-bundle, then open build/source-map.html in a browser.
Documentation about Components can be found in Storybook.
To open the Storybook with documentation about components locally, install optional dependencies with npm run dev-install,
then storybook can be started with npm run dev-storybook. To add documentation, add MDX Files into the source folder (named .stories.mdx!). React Components must always be wrapped in the <Story> Component. In case a story shows a white screen, check the browser debug logs like in any other React app.
A basic MDX file looks like this:
import { Meta, Story } from '@storybook/addon-docs';
import SomeComponent from "./SomeComponent";
<Meta title="Some Component" component={SomeComponent} />
# Example Component
<Story name="Some Component used in some way">
<Component />
</Story>This repository is set up as a React Native app although it is currently only shipped as a web app. In the future it might be desirable to also offer native apps.
All texts are stored in i18n files in /src/lang to simplify translation of the app in the future.
Most configuration is done via REACT_APP_ environment variables, which are inlined into the bundled version when the app is built. However as the app is only built once in Heroku and used for both staging and production and it is desirable to be able to change certain configuration without rebuilding the app, there is a separate mechanism for configuration: RUNTIME_ variables added to the server (i.e. RUNTIME_BACKEND_URL=https://example.com npm run serve) are injected into window.liveConfig, where they can be read by frontend code. Changing these only requires the server process to restart, clients will then pick them up once the page is reloaded (while the bundle is still cached).
A full list of environment variables can be found in src/types/react-app-env.d.ts.
We're always happy and open about contributions, please contact the HR team in case you are interested in joining our team of volunteers.
We follow the guidelines for responsible disclosure: If you find a vulnerability, we would encourage you to contact Support and gives us some time to tackle the issues, before publishing it. We take security very seriously and these issues are automatically highest priority for us. Since we are a non-profit organization with not much of a budget, we can't offer a bug bounty program.