D

A simple website. Written by Vue 3.

Data persistents in index DB, and local first after syncing but not using CRDTs.

Structure

Establishing IndexDb for the first time.

sequenceDiagram
    participant Server as Server Database
    participant API as /sync/collection Interface
    participant Frontend as Frontend
    participant Stream as Stream Processing
    participant IndexDB as IndexDb

    Server->>API: Full data stream transmission loss
    API->>Frontend: Data stream
    Frontend->>Stream: Receiving data stream
    loop Parse each line of data
        Stream->>IndexDB: Enter each line of data into respective tables
    end

Data binding with Pinia to implement UI reactivity.

sequenceDiagram
    participant IndexDB as IndexDb
    participant Hook as Hook (on change)
    participant Pinia as Pinia Store
    participant UI as User Interface

    IndexDB->>Hook: Change event
    Hook->>Pinia: Update/inject data
    Pinia->>UI: Render/update reactive data

Subsequent incremental updates.

flowchart LR
    subgraph server [Server]
        db[Database]
        checksum_table[Checksum Table]
        hooks[Update Hooks]
        db --> checksum_table
        db --> hooks
    end
    subgraph operations [Operations]
        add_record[Add Record]
        update_record[Update Record]
        delete_record[Delete Record]
        add_record --> hooks
        update_record --> hooks
        delete_record --> hooks
    end
    cronjob[Cron Job] --> db
    hooks -->|Update Checksums| checksum_table

    server -.-> operations
    server --> cronjob

sequenceDiagram
    participant Frontend
    participant /sync/deta API
    participant Database

    Frontend->>/sync/deta API: Request sync with last sync timestamp
    /sync/deta API->>Database: Query updates since last sync timestamp
    Database-->>/sync/deta API: Updated records
    /sync/deta API-->>Frontend: Updated records
    Frontend->>Frontend: Incrementally update indexDb with records