# thegreatrishabh/emi-calculator-pro architecture

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

- Interactive diagram: https://gitdiagram.com/thegreatrishabh/emi-calculator-pro
- Repository: https://github.com/thegreatrishabh/emi-calculator-pro

## Overview

EMI Calculator Pro is a browser-based loan calculator with an extension popup and supporting loan-education content. The main user flow enters through the React app, reaches a calculator, and uses loan calculations to inspect repayment outcomes; readers can also browse and open loan guides. The excerpts support the calculator’s calculation and formatting dependencies and the blog’s metadata/content flow. Some route details and calculator features are unsampled, so only evidenced links are shown.

Main entry points: [`src/App.tsx`](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/App.tsx) (App and routing), [`src/lib/analytics.ts`](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/lib/analytics.ts) (Analytics), [`src/Calculator.tsx`](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/Calculator.tsx) (Loan calculator), [`src/components/ExtensionPopup.tsx`](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/components/ExtensionPopup.tsx) (Extension popup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app_shell["App and routing<br/>[App.tsx]"]
end

subgraph group_calculations["Loan calculations"]
  node_calculator["Loan calculator<br/>[Calculator.tsx]"]
  node_extension["Extension popup<br/>[ExtensionPopup.tsx]"]
  node_loan_logic["Amortization logic<br/>[loanLogic.ts]"]
  node_country_config["Country settings"]
end

subgraph group_content["Guides and help"]
  node_blog_list["Blog listing<br/>[BlogList.tsx]"]
  node_blog_post["Blog article<br/>[BlogPost.tsx]"]
  node_blog_meta["Blog metadata<br/>[blogMeta.json]"]
  node_blog_content["Markdown articles"]
  node_faq["FAQ page<br/>[FAQ.tsx]"]
  node_disclaimer["Disclaimer page<br/>[Disclaimer.tsx]"]
  node_privacy["Privacy page<br/>[PrivacyPolicy.tsx]"]
  node_terms["Terms page<br/>[TermsOfUse.tsx]"]
end

subgraph group_services["Shared services"]
  node_page_meta["Document metadata<br/>[useDocumentMeta.ts]"]
  node_formatting["Formatting helpers<br/>[utils.ts]"]
  node_analytics["Analytics<br/>[analytics.ts]"]
end

node_borrower(("Borrower"))
node_browser(("Browser runtime"))
node_analytics_providers(("Analytics providers"))

node_borrower -->|"uses"| node_entry
node_browser -->|"runs"| node_entry
node_entry -->|"renders"| node_app_shell
node_app_shell -->|"renders"| node_calculator
node_app_shell -->|"renders"| node_extension
node_app_shell -->|"routes to"| node_blog_list
node_app_shell -->|"routes to"| node_blog_post
node_app_shell -->|"routes to"| node_faq
node_app_shell -->|"routes to"| node_disclaimer
node_app_shell -->|"routes to"| node_privacy
node_app_shell -->|"routes to"| node_terms
node_calculator -->|"calculates with"| node_loan_logic
node_calculator -->|"reads settings"| node_country_config
node_calculator -->|"formats values"| node_formatting
node_calculator -->|"tracks events"| node_analytics
node_extension -->|"calculates with"| node_loan_logic
node_extension -->|"reads settings"| node_country_config
node_extension -->|"formats values"| node_formatting
node_extension -->|"tracks events"| node_analytics
node_blog_list -->|"reads metadata"| node_blog_meta
node_blog_list -->|"sets metadata"| node_page_meta
node_blog_list -->|"tracks events"| node_analytics
node_blog_post -->|"reads metadata"| node_blog_meta
node_blog_post -->|"fetches article"| node_blog_content
node_blog_post -->|"sets metadata"| node_page_meta
node_blog_post -->|"tracks events"| node_analytics
node_faq -->|"sets metadata"| node_page_meta
node_disclaimer -->|"sets metadata"| node_page_meta
node_terms -->|"sets metadata"| node_page_meta
node_entry -->|"initializes"| node_analytics
node_analytics -->|"sends events"| node_analytics_providers

click node_entry "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/main.tsx"
click node_app_shell "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/App.tsx"
click node_calculator "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/Calculator.tsx"
click node_extension "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/components/ExtensionPopup.tsx"
click node_loan_logic "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/loanLogic.ts"
click node_country_config "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/countryConfigs.json"
click node_blog_list "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/BlogList.tsx"
click node_blog_post "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/BlogPost.tsx"
click node_blog_meta "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/blogMeta.json"
click node_blog_content "https://github.com/thegreatrishabh/emi-calculator-pro/tree/master/public/content/blogs"
click node_faq "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/FAQ.tsx"
click node_disclaimer "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/Disclaimer.tsx"
click node_privacy "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/PrivacyPolicy.tsx"
click node_terms "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/TermsOfUse.tsx"
click node_page_meta "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/hooks/useDocumentMeta.ts"
click node_formatting "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/lib/utils.ts"
click node_analytics "https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/lib/analytics.ts"

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_entry,node_app_shell,node_browser toneBlue
class node_calculator,node_extension,node_loan_logic,node_country_config toneAmber
class node_blog_list,node_blog_post,node_blog_meta,node_blog_content,node_faq,node_disclaimer,node_privacy,node_terms toneMint
class node_page_meta,node_formatting,node_analytics toneRose
class node_borrower,node_analytics_providers toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/main.tsx): `src/main.tsx`
- [App and routing](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/App.tsx): `src/App.tsx`

### Loan calculations

- [Loan calculator](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/Calculator.tsx): `src/Calculator.tsx`
- [Extension popup](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/components/ExtensionPopup.tsx): `src/components/ExtensionPopup.tsx`
- [Amortization logic](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/loanLogic.ts): `src/loanLogic.ts`
- [Country settings](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/countryConfigs.json): `src/countryConfigs.json`

### Guides and help

- [Blog listing](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/BlogList.tsx): `src/pages/BlogList.tsx`
- [Blog article](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/BlogPost.tsx): `src/pages/BlogPost.tsx`
- [Blog metadata](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/blogMeta.json): `src/blogMeta.json`
- [Markdown articles](https://github.com/thegreatrishabh/emi-calculator-pro/tree/master/public/content/blogs): `public/content/blogs`
- [FAQ page](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/FAQ.tsx): `src/pages/FAQ.tsx`
- [Disclaimer page](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/Disclaimer.tsx): `src/pages/Disclaimer.tsx`
- [Privacy page](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/PrivacyPolicy.tsx): `src/pages/PrivacyPolicy.tsx`
- [Terms page](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/pages/TermsOfUse.tsx): `src/pages/TermsOfUse.tsx`

### Shared services

- [Document metadata](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/hooks/useDocumentMeta.ts): `src/hooks/useDocumentMeta.ts`
- [Formatting helpers](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/lib/utils.ts): `src/lib/utils.ts`
- [Analytics](https://github.com/thegreatrishabh/emi-calculator-pro/blob/master/src/lib/analytics.ts): `src/lib/analytics.ts`

### Other components

- **Borrower**
- **Browser runtime**
- **Analytics providers**

## Connections

- Borrower → React entry: uses
- Browser runtime → React entry: runs (evidence: `src/main.tsx`)
- React entry → App and routing: renders (evidence: `src/main.tsx`)
- App and routing → Loan calculator: renders (evidence: `src/App.tsx`)
- App and routing → Extension popup: renders (evidence: `src/App.tsx`)
- App and routing → Blog listing: routes to (evidence: `src/App.tsx`)
- App and routing → Blog article: routes to (evidence: `src/App.tsx`)
- App and routing → FAQ page: routes to (evidence: `src/App.tsx`)
- App and routing → Disclaimer page: routes to (evidence: `src/App.tsx`)
- App and routing → Privacy page: routes to (evidence: `src/App.tsx`)
- App and routing → Terms page: routes to (evidence: `src/App.tsx`)
- Loan calculator → Amortization logic: calculates with (evidence: `src/Calculator.tsx`)
- Loan calculator → Country settings: reads settings (evidence: `src/Calculator.tsx`)
- Loan calculator → Formatting helpers: formats values (evidence: `src/Calculator.tsx`)
- Loan calculator → Analytics: tracks events (evidence: `src/Calculator.tsx`)
- Extension popup → Amortization logic: calculates with (evidence: `src/components/ExtensionPopup.tsx`)
- Extension popup → Country settings: reads settings (evidence: `src/components/ExtensionPopup.tsx`)
- Extension popup → Formatting helpers: formats values (evidence: `src/components/ExtensionPopup.tsx`)
- Extension popup → Analytics: tracks events (evidence: `src/components/ExtensionPopup.tsx`)
- Blog listing → Blog metadata: reads metadata (evidence: `src/pages/BlogList.tsx`)
- Blog listing → Document metadata: sets metadata (evidence: `src/pages/BlogList.tsx`)
- Blog listing → Analytics: tracks events (evidence: `src/pages/BlogList.tsx`)
- Blog article → Blog metadata: reads metadata (evidence: `src/pages/BlogPost.tsx`)
- Blog article → Markdown articles: fetches article (evidence: `src/pages/BlogPost.tsx`)
- Blog article → Document metadata: sets metadata (evidence: `src/pages/BlogPost.tsx`)
- Blog article → Analytics: tracks events (evidence: `src/pages/BlogPost.tsx`)
- FAQ page → Document metadata: sets metadata (evidence: `src/pages/FAQ.tsx`)
- Disclaimer page → Document metadata: sets metadata (evidence: `src/pages/Disclaimer.tsx`)
- Terms page → Document metadata: sets metadata (evidence: `src/pages/TermsOfUse.tsx`)
- React entry → Analytics: initializes (evidence: `src/main.tsx`)
- Analytics → Analytics providers: sends events (evidence: `src/lib/analytics.ts`)