06 C4 Model - ZHAW-PM4-Compass/compass GitHub Wiki

The following C4 diagrams shows the architecture for the Compass app. The two diagrams system context diagram and container diagram were created with structurizr (https://structurizr.com/dsl)

1. System Context Diagram

2. Container Diagram

3. Generating Code

workspace {
    model {
        p = person "Participant" {
            description "The participant is able to track his time, mood and special incidents"
        }
        sw = person "Social Worker" {
            description "The social worker is able to control/adjust the data of the paraticipants and is able to visualize the data or generate reports"
        }
        admin = person "Admin" {
            description "The administrator is an enhancement to the social worker and has additional rights to manage the users"
        }

        compass = softwareSystem "Compass Application" {
            description "A time, mood and incident tracking application for Stadtmuur called Compass"
            webapp = container "Web Application" {
                description "Delivers the static content and the time tracking single page application"
                technology "OpenApi"
                p -> this "tracks time, mood and incidents using" "https"
                sw -> this "tracks time, mood and incidents, confirms time, views data and generates reports using" "https"
                admin -> this "additional to the Social Workers tasks, manages users and roles using" "https"
            }
            frontend = container "Single-Page Application" {
                description "Provides all Compass functionalities via the web browser"
                technology "NextJs with Tailwind"
                webapp -> this "makes API calls to" "https"
            }
            mobile = container "Mobile Application" {
                description "Provides all Compass functionalities via the mobile device"
                technology "NextJs with Tailwind"
                webapp -> this "makes API calls to" "https"
            }
            backend = container "Backend API Application" {
                description "Provides Compass functionalities via REST/https API"
                technology "Java and Spring Boot"
                frontend -> this "makes API calls to" "https"
                mobile -> this "makes API calls to" "https"
            }
            container "Database" {
                description "Stores tracked time, mood, incidents, confirmations etc."
                technology "PostgreSQL"
                tags "database"
                backend -> this "Creates, reads, updates and deletes business object" "JSON/https"
            }
        }
        auth = softwareSystem "Authorisation" {
            description "Auth0 provides authentication and authorization services for applications, making secure login and user management easier"
            tags "authorisation"
            backend -> this "makes API calls to" "https"
            this -> backend "provides token" "https"
        }
    }

    views {
        systemContext compass {
            include *
            autolayout lr
        }

        container compass {
            include *
            autolayout lr
        }

        styles {
            element "database" {
                shape Cylinder
            }
            element "authorisation" {
                background gray
            }
        }

        theme default
    }
}