# 5.3.9 Web Application Implementation

## Web Application Architecture

```mermaid
flowchart LR
    Routes[Svelte Route Pages]
    Controller[controller.js]
    Store[store.js]
    API[api.js]
    Socket[Socket.IO Client]
    Backend[Backend APIs]

    Routes --> Controller
    Controller --> Store
    Controller --> API
    Controller --> Socket
    API --> Backend
    Socket --> Backend

    subgraph RoutePages["Main route pages"]
        Auth[Auth]
        Onboarding[Onboarding]
        Camera[Camera]
        Client[Client]
        Activity[Activity]
        Settings[Settings]
    end

    Routes --> RoutePages
```

## UI Flow

```mermaid
flowchart TD
    Start[Open WebApp]
    Auth[Sign in / Sign up]
    Onboarding[Register browser as device]
    Role{Chosen role}
    Camera[Camera dashboard]
    Client[Client dashboard]
    Activity[Activity page]
    Settings[Settings page]

    Start --> Auth --> Onboarding --> Role
    Role -->|camera| Camera
    Role -->|client| Client
    Camera --> Activity
    Camera --> Settings
    Client --> Activity
    Client --> Settings
```