How vitorueno/finauto works
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: App.tsx App composition · useLoanForm.ts Loan form state · ResultsPane.tsx Results pane · Header.tsx Header controls
Components 23
Application
- React entry
src/main.tsx - App composition
src/App.tsx - EN/PT copy
src/i18n/copy.ts
User interface
- Header controls
src/components/Header/Header.tsx - Segmented toggle
src/components/SegmentedToggle/SegmentedToggle.tsx - Loan form
src/components/LoanForm/LoanForm.tsx - Results pane
src/components/ResultsPane/ResultsPane.tsx - Interest donut
src/components/ResultsPane/Donut.tsx - Result statistics
src/components/ResultsPane/StatBlock.tsx - Empty state
src/components/ResultsPane/EmptyState.tsx
Form state
- Loan form state
src/hooks/useLoanForm.ts - Count-up animation
src/hooks/useCountUpValues.ts - Responsive detection
src/hooks/useIsNarrow.ts
Calculation domain
- Form validation
src/domain/validateLoanForm.ts - Amortization math
src/domain/amortization.ts - Amount parsing
src/domain/parseAmount.ts - Amount mask
src/domain/amountMask.ts - Rate mask
src/domain/rateMask.ts - Currency separators
src/domain/separators.ts - Number formatting
src/domain/numberFormat.ts - Currency formatting
src/domain/currencyFormat.ts - Interest share
src/domain/interestShare.ts
Other components
- Calculator user
Connections 24
- 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