# stefavag88/react-calculator architecture

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

- Interactive diagram: https://gitdiagram.com/stefavag88/react-calculator
- Repository: https://github.com/stefavag88/react-calculator

## Overview

This is a browser-based React calculator with a currency-conversion panel. The user enters numbers and operators on the keypad; Calculator owns the expression and screen state, requests evaluation when needed, and displays the result. The top-bar control toggles conversion, which fetches rates on demand and converts the current screen value. The README documents only Create React App setup; the workflow comes from sampled source, while the rate endpoint configuration is represented by its existing constants module.

Main entry points: [`src/components/Calculator/index.js`](https://github.com/stefavag88/react-calculator/blob/master/src/components/Calculator/index.js) (Calculator state), [`src/components/CurrencyConverter/index.js`](https://github.com/stefavag88/react-calculator/blob/master/src/components/CurrencyConverter/index.js) (Currency converter), [`src/components/buttons/Control/index.js`](https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Control/index.js) (Control button), [`src/components/KeyPad/index.js`](https://github.com/stefavag88/react-calculator/blob/master/src/components/KeyPad/index.js) (Keypad)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Calculator UI"]
  node_entry["React entry<br/>[index.js]"]
  node_calculator["Calculator state<br/>[index.js]"]
  node_boundary["Error boundary<br/>[index.js]"]
  node_topbar["Top bar<br/>[index.js]"]
  node_keypad["Keypad<br/>[index.js]"]
  node_number["Number button<br/>[index.js]"]
  node_operator["Operator button<br/>[index.js]"]
  node_control["Control button<br/>[index.js]"]
  node_screen["Screen<br/>[index.js]"]
end

subgraph group_math["Calculation"]
  node_parser["Expression parser<br/>[parser.js]"]
  node_expr_eval["expr-eval"]
end

subgraph group_currency["Currency conversion"]
  node_converter["Currency converter<br/>[index.js]"]
  node_constants["Rate configuration<br/>[constants.js]"]
end

node_user(("User"))
node_rate_service["Exchange-rate API"]

node_user -->|"enters digits"| node_number
node_user -->|"selects operation"| node_operator
node_user -->|"selects control"| node_control
node_entry -->|"renders"| node_calculator
node_calculator -->|"wraps UI"| node_boundary
node_calculator -->|"renders"| node_topbar
node_calculator -->|"renders"| node_keypad
node_calculator -->|"passes state"| node_screen
node_keypad -->|"renders"| node_number
node_keypad -->|"renders"| node_operator
node_topbar -->|"renders"| node_control
node_number -->|"dispatches input"| node_calculator
node_operator -->|"dispatches action"| node_calculator
node_control -->|"toggles converter"| node_calculator
node_screen -->|"passes value"| node_converter
node_calculator -->|"requests evaluation"| node_parser
node_parser -->|"parses expression"| node_expr_eval
node_converter -->|"reads rate config"| node_constants
node_converter -->|"fetches rates"| node_rate_service
node_user -->|"chooses target rate"| node_converter
node_converter -->|"renders update control"| node_control

click node_entry "https://github.com/stefavag88/react-calculator/blob/master/src/index.js"
click node_calculator "https://github.com/stefavag88/react-calculator/blob/master/src/components/Calculator/index.js"
click node_boundary "https://github.com/stefavag88/react-calculator/blob/master/src/components/ErrorBoundary/index.js"
click node_topbar "https://github.com/stefavag88/react-calculator/blob/master/src/components/TopBar/index.js"
click node_keypad "https://github.com/stefavag88/react-calculator/blob/master/src/components/KeyPad/index.js"
click node_number "https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Number/index.js"
click node_operator "https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Operator/index.js"
click node_control "https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Control/index.js"
click node_screen "https://github.com/stefavag88/react-calculator/blob/master/src/components/Screen/index.js"
click node_parser "https://github.com/stefavag88/react-calculator/blob/master/src/common/parser.js"
click node_converter "https://github.com/stefavag88/react-calculator/blob/master/src/components/CurrencyConverter/index.js"
click node_constants "https://github.com/stefavag88/react-calculator/blob/master/src/common/constants.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_entry,node_calculator,node_boundary,node_topbar,node_keypad,node_number,node_operator,node_control,node_screen,node_user toneBlue
class node_parser,node_expr_eval toneAmber
class node_converter,node_constants,node_rate_service toneMint
```

## Components

### Calculator UI

- [React entry](https://github.com/stefavag88/react-calculator/blob/master/src/index.js): `src/index.js`
- [Calculator state](https://github.com/stefavag88/react-calculator/blob/master/src/components/Calculator/index.js): `src/components/Calculator/index.js`
- [Error boundary](https://github.com/stefavag88/react-calculator/blob/master/src/components/ErrorBoundary/index.js): `src/components/ErrorBoundary/index.js`
- [Top bar](https://github.com/stefavag88/react-calculator/blob/master/src/components/TopBar/index.js): `src/components/TopBar/index.js`
- [Keypad](https://github.com/stefavag88/react-calculator/blob/master/src/components/KeyPad/index.js): `src/components/KeyPad/index.js`
- [Number button](https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Number/index.js): `src/components/buttons/Number/index.js`
- [Operator button](https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Operator/index.js): `src/components/buttons/Operator/index.js`
- [Control button](https://github.com/stefavag88/react-calculator/blob/master/src/components/buttons/Control/index.js): `src/components/buttons/Control/index.js`
- [Screen](https://github.com/stefavag88/react-calculator/blob/master/src/components/Screen/index.js): `src/components/Screen/index.js`

### Calculation

- [Expression parser](https://github.com/stefavag88/react-calculator/blob/master/src/common/parser.js): `src/common/parser.js`
- **expr-eval**

### Currency conversion

- [Currency converter](https://github.com/stefavag88/react-calculator/blob/master/src/components/CurrencyConverter/index.js): `src/components/CurrencyConverter/index.js`
- [Rate configuration](https://github.com/stefavag88/react-calculator/blob/master/src/common/constants.js): `src/common/constants.js`

### Other components

- **User**
- **Exchange-rate API**

## Connections

- User → Number button: enters digits
- User → Operator button: selects operation
- User → Control button: selects control
- React entry → Calculator state: renders
- Calculator state → Error boundary: wraps UI
- Calculator state → Top bar: renders
- Calculator state → Keypad: renders
- Calculator state → Screen: passes state
- Keypad → Number button: renders
- Keypad → Operator button: renders
- Top bar → Control button: renders
- Number button → Calculator state: dispatches input
- Operator button → Calculator state: dispatches action
- Control button → Calculator state: toggles converter
- Screen → Currency converter: passes value
- Calculator state → Expression parser: requests evaluation
- Expression parser → expr-eval: parses expression
- Currency converter → Rate configuration: reads rate config
- Currency converter → Exchange-rate API: fetches rates
- User → Currency converter: chooses target rate
- Currency converter → Control button: renders update control