(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. The server is divided into different applications responsible for a feature of the system respectively. The applications consist of a 'model.py'-file which contains all models necessary for the feature, a 'serializers.py'-file which validates the structure of the data, a 'urls.py' defining the endpoints for the feature and a 'views.py' which orchestrates the requests and creates the responses.

• /chat: This application contains all models and functionalities for the chats. This includes the chats, messages and labels.
• /deployment_management: This application handles functionalities for the deployment. This includes the creation of a superuser on the deployment if there is no superuser in place.
• /insights: This application contains all functionlities to calculate the metrics shown on the dashboard.
• /interactions: This application contains all functionalities to log the interaction of the users with the system. This includes the model for the EventLog
• /pages: This application contains all models and functionalities for the pages. This includes the pages and tags.
• /templates: This folder contains all static files like the template for activation email in the user registration
• /users: This application handles the registration process of an user including the account creation and the account activation template.
• /server: This application includes all settings of the server. The 'settings.py'-file includes all settings of the server including CORS, database setup etc.