(2) How to Develop

This chapter explains the structure of the project, which libraries are used and how specific functionalities work. The application uses the following technologies:

1. Client

• Typescript as programming language.
• React.js as library for web-based user interfaces.
• Vite as development environment.
• MaterialUI as React component library.

2. Server

• Python as programming language.
• Django as web framework.
• PostgreSQL as database.

Folder Structure

The project is structured into the following folders:

• .github: This folder contains all files for the github workflow.
• client: This folder contains all files regarding the client.
• docker: This folder contains the dockerfiles for the client and the server.
• letsencrypt: This folder contains the necessary files to create certificates for the web application
• server: This folder contains all files regarding the server.

Client

This section provides an overview of the client's folder structure inside the ./client/src folder.

• /api: This folder contains files to send and receive requests from the server.
• /assets: This folder contains static images.
• /components: This folder contains the components displayed to the users. The folder is divided into the main components which are also divided into subfolders for the sub components.
• /constants: This folder contains files with static values such as the themes with the defined colors.
• /helpers: This folder contains helper functions for other files.
• /services: This folder contains files to process the server responses from the /api files and handle errors. The components can directly use the functions in this files to access or manipulate the data.
• /types: This folder contains all custom types for parameters and elements in the components. As the project is using Typescript it is important to create types in order to ensure type saftey.

Server

This section provides an overview of the client's folder structure inside the ./server folder.