# sinjie2008/contact-qr-management architecture

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

- Interactive diagram: https://gitdiagram.com/sinjie2008/contact-qr-management
- Repository: https://github.com/sinjie2008/contact-qr-management

## Overview

Contact QR Management is a static, browser-based contact manager. Its main workflow is to unlock the manager, maintain contacts locally, then share a generated public profile or QR code so a recipient can view details and save a VCF. The README documents CSV import, multiple contact fields, and WhatsApp/WeChat QR options. The application payload in index.html and profile.html were not sampled, so those documented capabilities are represented at their page paths; internal call wiring beyond the documented behavior is not asserted.

Main entry points: [`index.html`](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html) (Contact manager), [`profile.html`](https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html) (Public profile page), [`auth.js`](https://github.com/sinjie2008/contact-qr-management/blob/main/auth.js) (Password gate), [`less-dense-demo.js`](https://github.com/sinjie2008/contact-qr-management/blob/main/less-dense-demo.js) (Short-ID QR demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access"]
  node_auth["Password gate<br/>[auth.js]"]
end

subgraph group_manager["Contact manager"]
  node_manager_app["Contact manager<br/>[index.html]"]
  node_contact_edit["Contact editing<br/>[index.html]"]
  node_csv_import["CSV import<br/>[index.html]"]
  node_contact_store[("Browser storage<br/>[index.html]")]
  node_contact_table["Contact table<br/>[index.html]"]
end

subgraph group_profiles["Public profiles"]
  node_profile_page["Public profile page<br/>[profile.html]"]
  node_profile_snapshot["Contact snapshot<br/>[profile.html]"]
  node_vcf_action["VCF download<br/>[profile.html]"]
end

subgraph group_sharing["QR and sharing"]
  node_public_link["Public link snapshot<br/>[index.html]"]
  node_qr_download["QR downloads<br/>[index.html]"]
  node_whatsapp_qr["WhatsApp QR<br/>[index.html]"]
  node_wechat_qr["WeChat QR<br/>[index.html]"]
  node_short_qr_demo["Short-ID QR demo<br/>[less-dense-demo.js]"]
end

node_manager_user(("Manager user"))
node_recipient(("Profile recipient"))
node_qr_service["QR image service"]
node_qr_scanner(("Phone QR scanner"))
node_contact_app["Contacts app"]
node_image_host["Public image host"]

node_manager_user -->|"enters password"| node_auth
node_auth -->|"unlocks page"| node_manager_app
node_manager_user -->|"manages contacts"| node_manager_app
node_manager_app -->|"opens editor"| node_contact_edit
node_manager_app -->|"starts import"| node_csv_import
node_contact_edit -->|"saves contacts"| node_contact_store
node_csv_import -->|"imports contacts"| node_contact_store
node_contact_table -->|"reads contacts"| node_contact_store
node_manager_app -->|"displays rows"| node_contact_table
node_manager_app -->|"creates snapshot link"| node_public_link
node_manager_app -->|"exports QR codes"| node_qr_download
node_manager_app -->|"generates QR"| node_whatsapp_qr
node_manager_app -->|"uses QR image"| node_wechat_qr
node_manager_app -->|"adds demo codes"| node_short_qr_demo
node_short_qr_demo -.->|"requests QR image"| node_qr_service
node_manager_user -->|"scans code"| node_qr_scanner
node_qr_scanner -->|"opens profile URL"| node_profile_page
node_public_link -->|"links to profile"| node_profile_page
node_profile_page -->|"decodes fragment"| node_profile_snapshot
node_profile_page -->|"offers download"| node_vcf_action
node_vcf_action -->|"opens VCF"| node_contact_app
node_profile_page -.->|"fetches public photo"| node_image_host
node_qr_download -->|"encodes profile or VCF"| node_qr_scanner

click node_auth "https://github.com/sinjie2008/contact-qr-management/blob/main/auth.js"
click node_manager_app "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_contact_edit "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_csv_import "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_contact_store "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_contact_table "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_public_link "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_qr_download "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_whatsapp_qr "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_wechat_qr "https://github.com/sinjie2008/contact-qr-management/blob/main/index.html"
click node_short_qr_demo "https://github.com/sinjie2008/contact-qr-management/blob/main/less-dense-demo.js"
click node_profile_page "https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html"
click node_profile_snapshot "https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html"
click node_vcf_action "https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html"

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_auth,node_manager_user toneBlue
class node_manager_app,node_contact_edit,node_csv_import,node_contact_store,node_contact_table toneAmber
class node_profile_page,node_profile_snapshot,node_vcf_action toneMint
class node_public_link,node_qr_download,node_whatsapp_qr,node_wechat_qr,node_short_qr_demo toneRose
class node_recipient,node_qr_service,node_qr_scanner,node_contact_app,node_image_host toneIndigo
```

## Components

### Access

- [Password gate](https://github.com/sinjie2008/contact-qr-management/blob/main/auth.js): `auth.js`

### Contact manager

- [Contact manager](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [Contact editing](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [CSV import](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [Browser storage](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [Contact table](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`

### Public profiles

- [Public profile page](https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html): `profile.html`
- [Contact snapshot](https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html): `profile.html`
- [VCF download](https://github.com/sinjie2008/contact-qr-management/blob/main/profile.html): `profile.html`

### QR and sharing

- [Public link snapshot](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [QR downloads](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [WhatsApp QR](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [WeChat QR](https://github.com/sinjie2008/contact-qr-management/blob/main/index.html): `index.html`
- [Short-ID QR demo](https://github.com/sinjie2008/contact-qr-management/blob/main/less-dense-demo.js): `less-dense-demo.js`

### Other components

- **Manager user**
- **Profile recipient**
- **QR image service**
- **Phone QR scanner**
- **Contacts app**
- **Public image host**

## Connections

- Manager user → Password gate: enters password
- Password gate → Contact manager: unlocks page
- Manager user → Contact manager: manages contacts
- Contact manager → Contact editing: opens editor
- Contact manager → CSV import: starts import
- Contact editing → Browser storage: saves contacts
- CSV import → Browser storage: imports contacts
- Contact table → Browser storage: reads contacts
- Contact manager → Contact table: displays rows
- Contact manager → Public link snapshot: creates snapshot link
- Contact manager → QR downloads: exports QR codes
- Contact manager → WhatsApp QR: generates QR
- Contact manager → WeChat QR: uses QR image
- Contact manager → Short-ID QR demo: adds demo codes
- Short-ID QR demo → QR image service: requests QR image
- Manager user → Phone QR scanner: scans code
- Phone QR scanner → Public profile page: opens profile URL
- Public link snapshot → Public profile page: links to profile
- Public profile page → Contact snapshot: decodes fragment
- Public profile page → VCF download: offers download
- VCF download → Contacts app: opens VCF
- Public profile page → Public image host: fetches public photo
- QR downloads → Phone QR scanner: encodes profile or VCF