# vitorueno/finauto architecture

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

- Interactive diagram: https://gitdiagram.com/vitorueno/finauto
- Repository: https://github.com/vitorueno/finauto

## Overview

FinAuto is a browser-based car-financing calculator. The user enters vehicle price, down payment, monthly rate, and installment count; the form state layer validates and parses those inputs, calculates a fixed-payment amortization result, and sends animated values to the results view. Users can switch currency and language without losing typed values, and the results include an interest-share donut and an approximate effective annual rate. The README documents masks and responsive layout; their detailed wiring is not fully represented in the sampled source, so only supported connections are shown.

Main entry points: [`src/App.tsx`](https://github.com/vitorueno/finauto/blob/main/src/App.tsx) (App composition), [`src/hooks/useLoanForm.ts`](https://github.com/vitorueno/finauto/blob/main/src/hooks/useLoanForm.ts) (Loan form state), [`src/components/ResultsPane/ResultsPane.tsx`](https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/ResultsPane.tsx) (Results pane), [`src/components/Header/Header.tsx`](https://github.com/vitorueno/finauto/blob/main/src/components/Header/Header.tsx) (Header controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["React entry<br/>[main.tsx]"]
  node_appview["App composition<br/>[App.tsx]"]
  node_copy["EN/PT copy<br/>[copy.ts]"]
end

subgraph group_ui["User interface"]
  node_header["Header controls<br/>[Header.tsx]"]
  node_toggle["Segmented toggle"]
  node_form["Loan form<br/>[LoanForm.tsx]"]
  node_results["Results pane<br/>[ResultsPane.tsx]"]
  node_donut["Interest donut<br/>[Donut.tsx]"]
  node_stats["Result statistics<br/>[StatBlock.tsx]"]
  node_empty["Empty state<br/>[EmptyState.tsx]"]
end

subgraph group_state["Form state"]
  node_loanstate["Loan form state<br/>[useLoanForm.ts]"]
  node_countup["Count-up animation"]
  node_narrow["Responsive detection<br/>[useIsNarrow.ts]"]
end

subgraph group_domain["Calculation domain"]
  node_validation["Form validation"]
  node_amortization["Amortization math<br/>[amortization.ts]"]
  node_amount["Amount parsing<br/>[parseAmount.ts]"]
  node_amountmask["Amount mask<br/>[amountMask.ts]"]
  node_ratemask["Rate mask<br/>[rateMask.ts]"]
  node_separators["Currency separators<br/>[separators.ts]"]
  node_numberformat["Number formatting<br/>[numberFormat.ts]"]
  node_currencyformat["Currency formatting<br/>[currencyFormat.ts]"]
  node_interestshare["Interest share<br/>[interestShare.ts]"]
end

node_user(("Calculator user"))

node_user -->|"uses calculator"| node_appview
node_entry -->|"renders"| node_appview
node_appview -->|"manages form"| node_loanstate
node_appview -->|"checks width"| node_narrow
node_appview -->|"selects language copy"| node_copy
node_appview -->|"formats placeholders"| node_numberformat
node_appview -->|"formats rate placeholder"| node_ratemask
node_appview -->|"renders"| node_header
node_appview -->|"renders"| node_form
node_appview -->|"renders results"| node_results
node_header -->|"renders controls"| node_toggle
node_loanstate -->|"gets separators"| node_separators
node_loanstate -->|"masks amounts"| node_amountmask
node_loanstate -->|"masks and reformats rate"| node_ratemask
node_loanstate -->|"parses values"| node_amount
node_loanstate -->|"reformats values"| node_numberformat
node_loanstate -->|"validates submission"| node_validation
node_loanstate -->|"computes loan"| node_amortization
node_loanstate -->|"animates results"| node_countup
node_results -->|"formats amounts"| node_currencyformat
node_results -->|"computes share"| node_interestshare
node_results -->|"renders share"| node_donut
node_results -->|"renders metrics"| node_stats
node_results -->|"renders without results"| node_empty

click node_entry "https://github.com/vitorueno/finauto/blob/main/src/main.tsx"
click node_appview "https://github.com/vitorueno/finauto/blob/main/src/App.tsx"
click node_copy "https://github.com/vitorueno/finauto/blob/main/src/i18n/copy.ts"
click node_header "https://github.com/vitorueno/finauto/blob/main/src/components/Header/Header.tsx"
click node_toggle "https://github.com/vitorueno/finauto/blob/main/src/components/SegmentedToggle/SegmentedToggle.tsx"
click node_form "https://github.com/vitorueno/finauto/blob/main/src/components/LoanForm/LoanForm.tsx"
click node_results "https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/ResultsPane.tsx"
click node_donut "https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/Donut.tsx"
click node_stats "https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/StatBlock.tsx"
click node_empty "https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/EmptyState.tsx"
click node_loanstate "https://github.com/vitorueno/finauto/blob/main/src/hooks/useLoanForm.ts"
click node_countup "https://github.com/vitorueno/finauto/blob/main/src/hooks/useCountUpValues.ts"
click node_narrow "https://github.com/vitorueno/finauto/blob/main/src/hooks/useIsNarrow.ts"
click node_validation "https://github.com/vitorueno/finauto/blob/main/src/domain/validateLoanForm.ts"
click node_amortization "https://github.com/vitorueno/finauto/blob/main/src/domain/amortization.ts"
click node_amount "https://github.com/vitorueno/finauto/blob/main/src/domain/parseAmount.ts"
click node_amountmask "https://github.com/vitorueno/finauto/blob/main/src/domain/amountMask.ts"
click node_ratemask "https://github.com/vitorueno/finauto/blob/main/src/domain/rateMask.ts"
click node_separators "https://github.com/vitorueno/finauto/blob/main/src/domain/separators.ts"
click node_numberformat "https://github.com/vitorueno/finauto/blob/main/src/domain/numberFormat.ts"
click node_currencyformat "https://github.com/vitorueno/finauto/blob/main/src/domain/currencyFormat.ts"
click node_interestshare "https://github.com/vitorueno/finauto/blob/main/src/domain/interestShare.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_appview,node_copy,node_user toneBlue
class node_header,node_toggle,node_form,node_results,node_donut,node_stats,node_empty toneAmber
class node_loanstate,node_countup,node_narrow toneMint
class node_validation,node_amortization,node_amount,node_amountmask,node_ratemask,node_separators,node_numberformat,node_currencyformat,node_interestshare toneRose
```

## Components

### Application

- [React entry](https://github.com/vitorueno/finauto/blob/main/src/main.tsx): `src/main.tsx`
- [App composition](https://github.com/vitorueno/finauto/blob/main/src/App.tsx): `src/App.tsx`
- [EN/PT copy](https://github.com/vitorueno/finauto/blob/main/src/i18n/copy.ts): `src/i18n/copy.ts`

### User interface

- [Header controls](https://github.com/vitorueno/finauto/blob/main/src/components/Header/Header.tsx): `src/components/Header/Header.tsx`
- [Segmented toggle](https://github.com/vitorueno/finauto/blob/main/src/components/SegmentedToggle/SegmentedToggle.tsx): `src/components/SegmentedToggle/SegmentedToggle.tsx`
- [Loan form](https://github.com/vitorueno/finauto/blob/main/src/components/LoanForm/LoanForm.tsx): `src/components/LoanForm/LoanForm.tsx`
- [Results pane](https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/ResultsPane.tsx): `src/components/ResultsPane/ResultsPane.tsx`
- [Interest donut](https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/Donut.tsx): `src/components/ResultsPane/Donut.tsx`
- [Result statistics](https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/StatBlock.tsx): `src/components/ResultsPane/StatBlock.tsx`
- [Empty state](https://github.com/vitorueno/finauto/blob/main/src/components/ResultsPane/EmptyState.tsx): `src/components/ResultsPane/EmptyState.tsx`

### Form state

- [Loan form state](https://github.com/vitorueno/finauto/blob/main/src/hooks/useLoanForm.ts): `src/hooks/useLoanForm.ts`
- [Count-up animation](https://github.com/vitorueno/finauto/blob/main/src/hooks/useCountUpValues.ts): `src/hooks/useCountUpValues.ts`
- [Responsive detection](https://github.com/vitorueno/finauto/blob/main/src/hooks/useIsNarrow.ts): `src/hooks/useIsNarrow.ts`

### Calculation domain

- [Form validation](https://github.com/vitorueno/finauto/blob/main/src/domain/validateLoanForm.ts): `src/domain/validateLoanForm.ts`
- [Amortization math](https://github.com/vitorueno/finauto/blob/main/src/domain/amortization.ts): `src/domain/amortization.ts`
- [Amount parsing](https://github.com/vitorueno/finauto/blob/main/src/domain/parseAmount.ts): `src/domain/parseAmount.ts`
- [Amount mask](https://github.com/vitorueno/finauto/blob/main/src/domain/amountMask.ts): `src/domain/amountMask.ts`
- [Rate mask](https://github.com/vitorueno/finauto/blob/main/src/domain/rateMask.ts): `src/domain/rateMask.ts`
- [Currency separators](https://github.com/vitorueno/finauto/blob/main/src/domain/separators.ts): `src/domain/separators.ts`
- [Number formatting](https://github.com/vitorueno/finauto/blob/main/src/domain/numberFormat.ts): `src/domain/numberFormat.ts`
- [Currency formatting](https://github.com/vitorueno/finauto/blob/main/src/domain/currencyFormat.ts): `src/domain/currencyFormat.ts`
- [Interest share](https://github.com/vitorueno/finauto/blob/main/src/domain/interestShare.ts): `src/domain/interestShare.ts`

### Other components

- **Calculator user**

## Connections

- Calculator user → App composition: uses calculator
- React entry → App composition: renders
- App composition → Loan form state: manages form
- App composition → Responsive detection: checks width
- App composition → EN/PT copy: selects language copy
- App composition → Number formatting: formats placeholders
- App composition → Rate mask: formats rate placeholder
- App composition → Header controls: renders
- App composition → Loan form: renders
- App composition → Results pane: renders results
- Header controls → Segmented toggle: renders controls
- Loan form state → Currency separators: gets separators
- Loan form state → Amount mask: masks amounts
- Loan form state → Rate mask: masks and reformats rate
- Loan form state → Amount parsing: parses values
- Loan form state → Number formatting: reformats values
- Loan form state → Form validation: validates submission
- Loan form state → Amortization math: computes loan
- Loan form state → Count-up animation: animates results
- Results pane → Currency formatting: formats amounts
- Results pane → Interest share: computes share
- Results pane → Interest donut: renders share
- Results pane → Result statistics: renders metrics
- Results pane → Empty state: renders without results