# lokiasgardian/react_calculator architecture

> Architecture diagram of the GitHub repository lokiasgardian/react_calculator, 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/lokiasgardian/react_calculator
- Repository: https://github.com/lokiasgardian/react_calculator

## Overview

A small browser calculator: users enter an expression, evaluate it, and see the result in the React UI. The same component manages keypad input, calculation, and theme state; it also persists the theme in browser localStorage. Source excerpts show the app bootstrap and component, but the README documents no additional capabilities.

Main entry points: [`src/App.js`](https://github.com/lokiasgardian/react_calculator/blob/main/src/App.js) (Calculator UI), [`src/index.js`](https://github.com/lokiasgardian/react_calculator/blob/main/src/index.js) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("User"))
node_bootstrap["React bootstrap<br/>[index.js]"]
node_calculator["Calculator UI<br/>[App.js]"]
node_storage[("Browser localStorage")]

node_bootstrap -->|"renders"| node_calculator
node_user -->|"enters expression"| node_calculator
node_calculator -->|"displays result"| node_user
node_calculator -->|"reads theme"| node_storage
node_calculator -->|"writes theme"| node_storage

click node_bootstrap "https://github.com/lokiasgardian/react_calculator/blob/main/src/index.js"
click node_calculator "https://github.com/lokiasgardian/react_calculator/blob/main/src/App.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_user,node_calculator toneBlue
class node_bootstrap toneTeal
class node_storage toneAmber
```

## Components

### Other components

- **User**
- [React bootstrap](https://github.com/lokiasgardian/react_calculator/blob/main/src/index.js): `src/index.js`
- [Calculator UI](https://github.com/lokiasgardian/react_calculator/blob/main/src/App.js): `src/App.js`
- **Browser localStorage**

## Connections

- React bootstrap → Calculator UI: renders
- User → Calculator UI: enters expression
- Calculator UI → User: displays result
- Calculator UI → Browser localStorage: reads theme
- Calculator UI → Browser localStorage: writes theme