# karan7jr/qr_shield architecture

> Architecture diagram of the GitHub repository karan7jr/qr_shield, 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/karan7jr/qr_shield
- Repository: https://github.com/karan7jr/qr_shield

## Overview

QR Shield is a QR-content safety analyzer. Users scan or submit content, receive a risk assessment before choosing whether to open a URL, and can review saved scans and aggregate threat statistics. The backend classifies content, applies URL-risk checks, persists results, and serves history and statistics; the React app presents these workflows. Camera processing is documented as client-side, but the scanner implementation was not sampled, so its exact capture-to-submit wiring is uncertain. The graph uses README capabilities where source excerpts were unavailable.

Main entry points: [`frontend/src/api/index.js`](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/api/index.js) (API client), [`frontend/src/App.jsx`](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/App.jsx) (App routes), [`backend/routes/history_routes.py`](https://github.com/karan7jr/qr_shield/blob/main/backend/routes/history_routes.py) (History and stats), [`backend/app.py`](https://github.com/karan7jr/qr_shield/blob/main/backend/app.py) (Flask app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app_ui["App routes<br/>[App.jsx]"]
  node_scanner["QR scanner<br/>[Scanner.jsx]"]
  node_scan_result["Scan result<br/>[ScanResult.jsx]"]
  node_history_ui["History view<br/>[History.jsx]"]
  node_dashboard["Analytics dashboard<br/>[Dashboard.jsx]"]
  node_api_client["API client<br/>[index.js]"]
  node_home["Home page<br/>[Home.jsx]"]
end

subgraph group_analysis["Scan analysis"]
  node_risk_analyzer["Risk analyzer<br/>[risk_analyzer.py]"]
end

subgraph group_records["Scan records"]
  node_scan_model["Scan model<br/>[models.py]"]
  node_db_config["DB configuration<br/>[config.py]"]
  node_mysql[("MySQL store<br/>[schema.sql]")]
end

subgraph group_service["API service"]
  node_scan_api["Scan endpoints<br/>[scan_routes.py]"]
  node_history_api["History and stats<br/>[history_routes.py]"]
  node_app["Flask app<br/>[app.py]"]
end

node_person(("User"))
node_browser(("Browser"))

node_person -->|"uses"| node_app_ui
node_app_ui -->|"routes"| node_home
node_app_ui -->|"routes"| node_scanner
node_app_ui -->|"routes"| node_dashboard
node_app_ui -->|"routes"| node_history_ui
node_person -->|"scans QR"| node_scanner
node_scanner -->|"submits content"| node_api_client
node_api_client -->|"POST scan"| node_scan_api
node_app -->|"registers routes"| node_scan_api
node_app -->|"registers routes"| node_history_api
node_scan_api -->|"analyzes content"| node_risk_analyzer
node_scan_api -->|"creates scan"| node_scan_model
node_scan_model -->|"persists scan"| node_mysql
node_app -->|"loads config"| node_db_config
node_app -->|"initializes ORM"| node_scan_model
node_api_client -->|"returns analysis"| node_scan_result
node_person -->|"reviews result"| node_scan_result
node_scan_result -->|"opens on confirmation"| node_browser
node_history_ui -->|"requests history"| node_api_client
node_api_client -->|"GET or DELETE"| node_history_api
node_history_api -->|"queries or deletes"| node_scan_model
node_history_api -->|"reads statistics"| node_mysql
node_dashboard -->|"requests stats"| node_api_client
node_api_client -->|"GET stats"| node_history_api
node_person -.->|"grants camera access"| node_browser

click node_app_ui "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/App.jsx"
click node_scanner "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Scanner.jsx"
click node_scan_result "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/components/ScanResult.jsx"
click node_history_ui "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/History.jsx"
click node_dashboard "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Dashboard.jsx"
click node_api_client "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/api/index.js"
click node_risk_analyzer "https://github.com/karan7jr/qr_shield/blob/main/backend/utils/risk_analyzer.py"
click node_scan_api "https://github.com/karan7jr/qr_shield/blob/main/backend/routes/scan_routes.py"
click node_history_api "https://github.com/karan7jr/qr_shield/blob/main/backend/routes/history_routes.py"
click node_app "https://github.com/karan7jr/qr_shield/blob/main/backend/app.py"
click node_scan_model "https://github.com/karan7jr/qr_shield/blob/main/backend/models.py"
click node_db_config "https://github.com/karan7jr/qr_shield/blob/main/backend/config.py"
click node_mysql "https://github.com/karan7jr/qr_shield/blob/main/database/schema.sql"
click node_home "https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Home.jsx"

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_ui,node_scanner,node_scan_result,node_history_ui,node_dashboard,node_api_client,node_home,node_person,node_browser toneBlue
class node_risk_analyzer toneAmber
class node_scan_model,node_db_config,node_mysql toneMint
class node_scan_api,node_history_api,node_app toneRose
```

## Components

### Web client

- [App routes](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [QR scanner](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Scanner.jsx): `frontend/src/pages/Scanner.jsx`
- [Scan result](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/components/ScanResult.jsx): `frontend/src/components/ScanResult.jsx`
- [History view](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/History.jsx): `frontend/src/pages/History.jsx`
- [Analytics dashboard](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Dashboard.jsx): `frontend/src/pages/Dashboard.jsx`
- [API client](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/api/index.js): `frontend/src/api/index.js`
- [Home page](https://github.com/karan7jr/qr_shield/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`

### Scan analysis

- [Risk analyzer](https://github.com/karan7jr/qr_shield/blob/main/backend/utils/risk_analyzer.py): `backend/utils/risk_analyzer.py`

### Scan records

- [Scan model](https://github.com/karan7jr/qr_shield/blob/main/backend/models.py): `backend/models.py`
- [DB configuration](https://github.com/karan7jr/qr_shield/blob/main/backend/config.py): `backend/config.py`
- [MySQL store](https://github.com/karan7jr/qr_shield/blob/main/database/schema.sql): `database/schema.sql`

### API service

- [Scan endpoints](https://github.com/karan7jr/qr_shield/blob/main/backend/routes/scan_routes.py): `backend/routes/scan_routes.py`
- [History and stats](https://github.com/karan7jr/qr_shield/blob/main/backend/routes/history_routes.py): `backend/routes/history_routes.py`
- [Flask app](https://github.com/karan7jr/qr_shield/blob/main/backend/app.py): `backend/app.py`

### Other components

- **User**
- **Browser**

## Connections

- User → App routes: uses
- App routes → Home page: routes
- App routes → QR scanner: routes
- App routes → Analytics dashboard: routes
- App routes → History view: routes
- User → QR scanner: scans QR
- QR scanner → API client: submits content
- API client → Scan endpoints: POST scan
- Flask app → Scan endpoints: registers routes
- Flask app → History and stats: registers routes
- Scan endpoints → Risk analyzer: analyzes content
- Scan endpoints → Scan model: creates scan
- Scan model → MySQL store: persists scan
- Flask app → DB configuration: loads config
- Flask app → Scan model: initializes ORM
- API client → Scan result: returns analysis
- User → Scan result: reviews result
- Scan result → Browser: opens on confirmation
- History view → API client: requests history
- API client → History and stats: GET or DELETE
- History and stats → Scan model: queries or deletes
- History and stats → MySQL store: reads statistics
- Analytics dashboard → API client: requests stats
- API client → History and stats: GET stats
- User → Browser: grants camera access