# stechyy/notabase architecture

> Architecture diagram of the GitHub repository stechyy/notabase, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/stechyy/notabase
- Repository: https://github.com/stechyy/notabase

## Overview

Notabase is a client-side sales-recording and point-of-sale web app. The main workflow is maintaining a product catalog, building a cashier basket (optionally scanning product QR codes), completing a sale, and reviewing payment history. The README also documents account, personalization, backup, and app-management settings. Source excerpts show LocalStorage use and QR/camera behavior; other wiring and some documented capabilities are inferred only at subsystem level from the available files.

Main entry points: [`appAnimationScript.js`](https://github.com/stechyy/notabase/blob/main/appAnimationScript.js) (App tabs), [`kasirQRScript.js`](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js) (Cashier), [`databaseScript.js`](https://github.com/stechyy/notabase/blob/main/databaseScript.js) (Theme preferences), [`index.html`](https://github.com/stechyy/notabase/blob/main/index.html) (Main interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Main interface<br/>[index.html]"]
  node_tabs["App tabs"]
end

subgraph group_sales["Catalog and sales"]
  node_catalog["Product catalog<br/>[databaseScript.js]"]
  node_cashier["Cashier<br/>[kasirQRScript.js]"]
  node_basket["Sale basket<br/>[kasirQRScript.js]"]
  node_payments["Payment processing<br/>[kasirQRScript.js]"]
  node_history["Payment history<br/>[kasirQRScript.js]"]
  node_qr_create["Product QR creation<br/>[databaseScript.js]"]
  node_qr_scan["QR scanning<br/>[kasirQRScript.js]"]
end

subgraph group_settings["Account and settings"]
  node_settings_tabs["Settings tabs"]
  node_account["Account management<br/>[databaseScript.js]"]
  node_personalization["Theme preferences<br/>[databaseScript.js]"]
  node_backup["Data backup<br/>[databaseScript.js]"]
  node_app_management["App management<br/>[databaseScript.js]"]
  node_settings_panel["Settings panel"]
end

subgraph group_runtime["Browser runtime"]
  node_local_storage[("Browser storage")]
  node_qr_libs["QR libraries"]
  node_style["Visual themes<br/>[style.css]"]
  node_dark_style["Dark theme"]
end

node_user(("User"))
node_camera(("Device camera"))

node_user -->|"uses"| node_app
node_app -->|"displays tabs"| node_tabs
node_tabs -->|"opens catalog"| node_catalog
node_tabs -->|"opens cashier"| node_cashier
node_tabs -->|"opens history"| node_history
node_tabs -->|"opens settings"| node_settings_panel
node_settings_panel -->|"selects sections"| node_settings_tabs
node_catalog -->|"reads/writes products"| node_local_storage
node_catalog -->|"creates product QR"| node_qr_create
node_qr_create -.->|"generates QR"| node_qr_libs
node_cashier -->|"loads products"| node_local_storage
node_cashier -->|"adds items"| node_basket
node_qr_scan -->|"requests video"| node_camera
node_qr_scan -.->|"decodes QR"| node_qr_libs
node_qr_scan -->|"fills product code"| node_cashier
node_cashier -->|"initiates payment"| node_payments
node_payments -->|"updates stock and balance"| node_local_storage
node_payments -->|"records sale"| node_history
node_history -->|"reads payment records"| node_local_storage
node_account -->|"stores account data"| node_local_storage
node_personalization -->|"stores theme choice"| node_local_storage
node_personalization -->|"selects light theme"| node_style
node_personalization -->|"selects dark theme"| node_dark_style
node_backup -->|"exports data"| node_local_storage
node_app_management -->|"resets app data"| node_local_storage

click node_app "https://github.com/stechyy/notabase/blob/main/index.html"
click node_tabs "https://github.com/stechyy/notabase/blob/main/appAnimationScript.js"
click node_settings_tabs "https://github.com/stechyy/notabase/blob/main/settingsAnimationScript.js"
click node_catalog "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_cashier "https://github.com/stechyy/notabase/blob/main/kasirQRScript.js"
click node_basket "https://github.com/stechyy/notabase/blob/main/kasirQRScript.js"
click node_payments "https://github.com/stechyy/notabase/blob/main/kasirQRScript.js"
click node_history "https://github.com/stechyy/notabase/blob/main/kasirQRScript.js"
click node_qr_create "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_qr_scan "https://github.com/stechyy/notabase/blob/main/kasirQRScript.js"
click node_account "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_personalization "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_backup "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_app_management "https://github.com/stechyy/notabase/blob/main/databaseScript.js"
click node_settings_panel "https://github.com/stechyy/notabase/blob/main/settingsAnimationScript.js"
click node_style "https://github.com/stechyy/notabase/blob/main/style.css"
click node_dark_style "https://github.com/stechyy/notabase/blob/main/style-dark-theme.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_tabs,node_user toneBlue
class node_catalog,node_cashier,node_basket,node_payments,node_history,node_qr_create,node_qr_scan toneAmber
class node_settings_tabs,node_account,node_personalization,node_backup,node_app_management,node_settings_panel toneMint
class node_local_storage,node_qr_libs,node_style,node_dark_style toneRose
class node_camera toneIndigo
```

## Components

### App navigation

- [Main interface](https://github.com/stechyy/notabase/blob/main/index.html): `index.html`
- [App tabs](https://github.com/stechyy/notabase/blob/main/appAnimationScript.js): `appAnimationScript.js`

### Catalog and sales

- [Product catalog](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [Cashier](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js): `kasirQRScript.js`
- [Sale basket](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js): `kasirQRScript.js`
- [Payment processing](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js): `kasirQRScript.js`
- [Payment history](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js): `kasirQRScript.js`
- [Product QR creation](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [QR scanning](https://github.com/stechyy/notabase/blob/main/kasirQRScript.js): `kasirQRScript.js`

### Account and settings

- [Settings tabs](https://github.com/stechyy/notabase/blob/main/settingsAnimationScript.js): `settingsAnimationScript.js`
- [Account management](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [Theme preferences](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [Data backup](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [App management](https://github.com/stechyy/notabase/blob/main/databaseScript.js): `databaseScript.js`
- [Settings panel](https://github.com/stechyy/notabase/blob/main/settingsAnimationScript.js): `settingsAnimationScript.js`

### Browser runtime

- **Browser storage**
- **QR libraries**
- [Visual themes](https://github.com/stechyy/notabase/blob/main/style.css): `style.css`
- [Dark theme](https://github.com/stechyy/notabase/blob/main/style-dark-theme.css): `style-dark-theme.css`

### Other components

- **User**
- **Device camera**

## Connections

- User → Main interface: uses
- Main interface → App tabs: displays tabs
- App tabs → Product catalog: opens catalog
- App tabs → Cashier: opens cashier
- App tabs → Payment history: opens history
- App tabs → Settings panel: opens settings
- Settings panel → Settings tabs: selects sections
- Product catalog → Browser storage: reads/writes products
- Product catalog → Product QR creation: creates product QR
- Product QR creation → QR libraries: generates QR
- Cashier → Browser storage: loads products
- Cashier → Sale basket: adds items
- QR scanning → Device camera: requests video
- QR scanning → QR libraries: decodes QR
- QR scanning → Cashier: fills product code
- Cashier → Payment processing: initiates payment
- Payment processing → Browser storage: updates stock and balance
- Payment processing → Payment history: records sale
- Payment history → Browser storage: reads payment records
- Account management → Browser storage: stores account data
- Theme preferences → Browser storage: stores theme choice
- Theme preferences → Visual themes: selects light theme
- Theme preferences → Dark theme: selects dark theme
- Data backup → Browser storage: exports data
- App management → Browser storage: resets app data