2.1 Frontend

The frontend consist of multiple different classes and components. app.js located in the src directory is the main component of the system.

The app handles basic routing between its children using react-router-dom.

On the diagram below is an overview of the relationships between the different classes within the system. All children except i18n is located in the subfolder Components. Pictures used in the material are stored in the folder Images inside Components.

i18n is stored in the src directory alongside app, depency files, css files and test files. Translation files are located in the folder public/locales. More information regarding these files can be found in the section Installation Guides. Basic translations are done with the t function using useTranslations. Complex translations including special formatting and embedded components are done using the Trans component. Please visit the react-i18next-documentation for more info.

The overall design pattern of the website follows the illustration below. This designpattern does not apply to the pages home, help and contribute, as these pages don't need sidebars.

To fire up the frontend run the two commands npm install and npm run within the frontend directory from a command promt. The server updates automatically whenever changes are saved to the files within the directory.