# nourenzi/loan-calculator architecture

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

- Interactive diagram: https://gitdiagram.com/nourenzi/loan-calculator
- Repository: https://github.com/nourenzi/loan-calculator

## Overview

This is a client-side loan and finance calculator. The principal workflow is that a user enters loan details, compares Murabaha and declining-interest results, reviews an amortization schedule, then prints or shares the report. The README also documents responsive and light/dark UI, PWA installation and offline support, and analytics. The tree has no separate application source beyond index.html; its implementation details cannot be verified here. The service-worker caching and fetch behavior is visible in sw.js.

Main entry points: [`index.html`](https://github.com/nourenzi/loan-calculator/blob/main/index.html) (Loan calculator UI), [`sw.js`](https://github.com/nourenzi/loan-calculator/blob/main/sw.js) (Service worker), [`manifest.json`](https://github.com/nourenzi/loan-calculator/blob/main/manifest.json) (Web app manifest)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_finance["Finance calculations"]
  node_calculator["Loan calculator UI<br/>[index.html]"]
  node_comparison["Finance comparison<br/>[index.html]"]
  node_schedule["Amortization schedule<br/>[index.html]"]
end

subgraph group_reporting["Results and sharing"]
  node_results["Financial report<br/>[index.html]"]
  node_print["Print and PDF<br/>[index.html]"]
  node_sharing["WhatsApp sharing<br/>[index.html]"]
  node_ui["Responsive and theme UI<br/>[index.html]"]
  node_analytics["Analytics integration<br/>[index.html]"]
end

subgraph group_pwa["PWA and offline"]
  node_manifest["Web app manifest<br/>[manifest.json]"]
  node_worker["Service worker<br/>[sw.js]"]
  node_cache[("Asset cache<br/>[sw.js]")]
end

node_user(("User"))
node_whatsapp(("WhatsApp"))
node_analytics_service(("Google Analytics"))

node_user -->|"enters loan details"| node_calculator
node_calculator -->|"calculates costs"| node_comparison
node_calculator -->|"generates schedule"| node_schedule
node_calculator -->|"presents results"| node_results
node_results -->|"prints report"| node_print
node_results -->|"shares results"| node_sharing
node_sharing -->|"shares via"| node_whatsapp
node_calculator -->|"uses responsive UI"| node_ui
node_analytics -->|"tracks engagement"| node_analytics_service
node_worker -->|"stores assets"| node_cache
node_worker -->|"caches manifest"| node_manifest
node_worker -->|"serves cached app"| node_calculator

click node_calculator "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_comparison "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_schedule "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_results "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_print "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_sharing "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_ui "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_analytics "https://github.com/nourenzi/loan-calculator/blob/main/index.html"
click node_manifest "https://github.com/nourenzi/loan-calculator/blob/main/manifest.json"
click node_worker "https://github.com/nourenzi/loan-calculator/blob/main/sw.js"
click node_cache "https://github.com/nourenzi/loan-calculator/blob/main/sw.js"

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_calculator,node_comparison,node_schedule,node_user toneBlue
class node_results,node_print,node_sharing,node_ui,node_analytics toneAmber
class node_manifest,node_worker,node_cache toneMint
class node_whatsapp,node_analytics_service toneIndigo
```

## Components

### Finance calculations

- [Loan calculator UI](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [Finance comparison](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [Amortization schedule](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`

### Results and sharing

- [Financial report](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [Print and PDF](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [WhatsApp sharing](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [Responsive and theme UI](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`
- [Analytics integration](https://github.com/nourenzi/loan-calculator/blob/main/index.html): `index.html`

### PWA and offline

- [Web app manifest](https://github.com/nourenzi/loan-calculator/blob/main/manifest.json): `manifest.json`
- [Service worker](https://github.com/nourenzi/loan-calculator/blob/main/sw.js): `sw.js`
- [Asset cache](https://github.com/nourenzi/loan-calculator/blob/main/sw.js): `sw.js`

### Other components

- **User**
- **WhatsApp**
- **Google Analytics**

## Connections

- User → Loan calculator UI: enters loan details (evidence: `README.md`)
- Loan calculator UI → Finance comparison: calculates costs (evidence: `README.md`)
- Loan calculator UI → Amortization schedule: generates schedule (evidence: `README.md`)
- Loan calculator UI → Financial report: presents results (evidence: `README.md`)
- Financial report → Print and PDF: prints report (evidence: `README.md`)
- Financial report → WhatsApp sharing: shares results (evidence: `README.md`)
- WhatsApp sharing → WhatsApp: shares via (evidence: `README.md`)
- Loan calculator UI → Responsive and theme UI: uses responsive UI (evidence: `README.md`)
- Analytics integration → Google Analytics: tracks engagement (evidence: `README.md`)
- Service worker → Asset cache: stores assets (evidence: `sw.js`)
- Service worker → Web app manifest: caches manifest (evidence: `sw.js`)
- Service worker → Loan calculator UI: serves cached app (evidence: `README.md`)