# izayata/reference-react-typescript architecture

> Architecture diagram of the GitHub repository izayata/reference-react-typescript, 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/izayata/reference-react-typescript
- Repository: https://github.com/izayata/reference-react-typescript

## Overview

This is a React single-page restaurant ordering frontend. Visitors browse menu items and food details, manage a cart, and submit guest or authenticated orders; users can also register, log in, and manage account details and order history. The route table and checkout implementation are sampled, as are parts of the validated model/converter layer. Other major feature areas are retained from the README and file tree; their internal calls are not asserted where source was not shown.

Main entry points: [`src/App.tsx`](https://github.com/izayata/reference-react-typescript/blob/main/src/App.tsx) (Routes and auth bootstrap), [`src/main/components/page/Checkout/Checkout.tsx`](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Checkout/Checkout.tsx) (Checkout and order submission), [`src/main/components/page/Register/Register.tsx`](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Register/Register.tsx) (Registration), [`src/main/converter/AddressModelConverter.ts`](https://github.com/izayata/reference-react-typescript/blob/main/src/main/converter/AddressModelConverter.ts) (Address conversion)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Routes and auth bootstrap<br/>[App.tsx]"]
  node_shell["Navigation and chrome<br/>[NavigationBar.tsx]"]
end

subgraph group_catalog["Restaurant browsing"]
  node_home["Home and gallery<br/>[index.tsx]"]
  node_menu["Menu browsing<br/>[Menu.tsx]"]
  node_food["Food details and allergens<br/>[index.tsx]"]
end

subgraph group_ordering["Cart and checkout"]
  node_cart["Shopping cart<br/>[ShoppingCart.tsx]"]
  node_checkout["Checkout and order submission<br/>[Checkout.tsx]"]
end

subgraph group_accounts["Account workflows"]
  node_register["Registration<br/>[Register.tsx]"]
  node_login["Login<br/>[Login.tsx]"]
  node_profile["Profile and order history<br/>[UserProfile.tsx]"]
  node_authguard["Account route guard"]
end

subgraph group_domain["Domain and support"]
  node_models["Validated domain models<br/>[AddressModel.tsx]"]
  node_addressbuilder["Address builder"]
  node_addressconverter["Address conversion"]
  node_persistence["Selected-state persistence<br/>[Persistence.tsx]"]
  node_i18n["Hungarian translations<br/>[i18n.ts]"]
  node_modal["Modal message state"]
end

node_visitor(("Visitor"))
node_backend["Spring Boot API"]

node_visitor -->|"opens app"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_menu
node_app -->|"routes to"| node_food
node_app -->|"routes to"| node_cart
node_app -->|"routes to"| node_checkout
node_app -->|"routes to"| node_register
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_profile
node_app -->|"guards account routes"| node_authguard
node_app -->|"renders"| node_shell
node_app -->|"wraps app"| node_persistence
node_app -->|"loads translations"| node_i18n
node_checkout -->|"fetches cart foods"| node_cart
node_checkout -->|"submits orders"| node_backend
node_checkout -->|"converts address"| node_addressconverter
node_addressconverter -->|"builds address"| node_addressbuilder
node_addressbuilder -->|"constructs address model"| node_models
node_register -->|"converts addresses"| node_addressconverter
node_register -->|"builds registration model"| node_models
node_app -->|"checks auth status"| node_backend
node_menu -.->|"loads menu data"| node_backend
node_register -.->|"registers account"| node_backend
node_login -.->|"authenticates session"| node_backend
node_profile -.->|"loads account data"| node_backend

click node_app "https://github.com/izayata/reference-react-typescript/blob/main/src/App.tsx"
click node_shell "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/navigation-bar/NavigationBar.tsx"
click node_home "https://github.com/izayata/reference-react-typescript/blob/main/src/main/pages/home/index.tsx"
click node_menu "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Menu/Menu.tsx"
click node_food "https://github.com/izayata/reference-react-typescript/blob/main/src/main/pages/FoodDetailsPage/index.tsx"
click node_cart "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/ShoppingCart/ShoppingCart.tsx"
click node_checkout "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Checkout/Checkout.tsx"
click node_register "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Register/Register.tsx"
click node_login "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Login/Login.tsx"
click node_profile "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/UserProfile/UserProfile.tsx"
click node_authguard "https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/functional/AccountRouteGuard/AccountRouteGuard.tsx"
click node_models "https://github.com/izayata/reference-react-typescript/blob/main/src/main/model/customer/AddressModel.tsx"
click node_addressbuilder "https://github.com/izayata/reference-react-typescript/blob/main/src/main/builder/AddressModelBuilder/AddressModelBuilder.tsx"
click node_addressconverter "https://github.com/izayata/reference-react-typescript/blob/main/src/main/converter/AddressModelConverter.ts"
click node_persistence "https://github.com/izayata/reference-react-typescript/blob/main/src/main/supports/Persistence.tsx"
click node_i18n "https://github.com/izayata/reference-react-typescript/blob/main/src/main/i18n/i18n.ts"
click node_modal "https://github.com/izayata/reference-react-typescript/blob/main/src/main/context/ModalMessageContext/ModalMessageContext.tsx"

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_app,node_shell toneBlue
class node_home,node_menu,node_food toneAmber
class node_cart,node_checkout,node_backend toneMint
class node_register,node_login,node_profile,node_authguard toneRose
class node_models,node_addressbuilder,node_addressconverter,node_persistence,node_i18n,node_modal,node_visitor toneIndigo
```

## Components

### App shell

- [Routes and auth bootstrap](https://github.com/izayata/reference-react-typescript/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation and chrome](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/navigation-bar/NavigationBar.tsx): `src/main/components/navigation-bar/NavigationBar.tsx`

### Restaurant browsing

- [Home and gallery](https://github.com/izayata/reference-react-typescript/blob/main/src/main/pages/home/index.tsx): `src/main/pages/home/index.tsx`
- [Menu browsing](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Menu/Menu.tsx): `src/main/components/page/Menu/Menu.tsx`
- [Food details and allergens](https://github.com/izayata/reference-react-typescript/blob/main/src/main/pages/FoodDetailsPage/index.tsx): `src/main/pages/FoodDetailsPage/index.tsx`

### Cart and checkout

- [Shopping cart](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/ShoppingCart/ShoppingCart.tsx): `src/main/components/page/ShoppingCart/ShoppingCart.tsx`
- [Checkout and order submission](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Checkout/Checkout.tsx): `src/main/components/page/Checkout/Checkout.tsx`

### Account workflows

- [Registration](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Register/Register.tsx): `src/main/components/page/Register/Register.tsx`
- [Login](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/Login/Login.tsx): `src/main/components/page/Login/Login.tsx`
- [Profile and order history](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/page/UserProfile/UserProfile.tsx): `src/main/components/page/UserProfile/UserProfile.tsx`
- [Account route guard](https://github.com/izayata/reference-react-typescript/blob/main/src/main/components/functional/AccountRouteGuard/AccountRouteGuard.tsx): `src/main/components/functional/AccountRouteGuard/AccountRouteGuard.tsx`

### Domain and support

- [Validated domain models](https://github.com/izayata/reference-react-typescript/blob/main/src/main/model/customer/AddressModel.tsx): `src/main/model/customer/AddressModel.tsx`
- [Address builder](https://github.com/izayata/reference-react-typescript/blob/main/src/main/builder/AddressModelBuilder/AddressModelBuilder.tsx): `src/main/builder/AddressModelBuilder/AddressModelBuilder.tsx`
- [Address conversion](https://github.com/izayata/reference-react-typescript/blob/main/src/main/converter/AddressModelConverter.ts): `src/main/converter/AddressModelConverter.ts`
- [Selected-state persistence](https://github.com/izayata/reference-react-typescript/blob/main/src/main/supports/Persistence.tsx): `src/main/supports/Persistence.tsx`
- [Hungarian translations](https://github.com/izayata/reference-react-typescript/blob/main/src/main/i18n/i18n.ts): `src/main/i18n/i18n.ts`
- [Modal message state](https://github.com/izayata/reference-react-typescript/blob/main/src/main/context/ModalMessageContext/ModalMessageContext.tsx): `src/main/context/ModalMessageContext/ModalMessageContext.tsx`

### Other components

- **Visitor**
- **Spring Boot API**

## Connections

- Visitor → Routes and auth bootstrap: opens app
- Routes and auth bootstrap → Home and gallery: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Menu browsing: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Food details and allergens: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Shopping cart: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Checkout and order submission: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Registration: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Login: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Profile and order history: routes to (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Account route guard: guards account routes (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Navigation and chrome: renders (evidence: `src/App.tsx`)
- Routes and auth bootstrap → Selected-state persistence: wraps app (evidence: `src/index.tsx`)
- Routes and auth bootstrap → Hungarian translations: loads translations (evidence: `src/index.tsx`)
- Checkout and order submission → Shopping cart: fetches cart foods (evidence: `src/main/components/page/Checkout/Checkout.tsx`)
- Checkout and order submission → Spring Boot API: submits orders (evidence: `src/main/components/page/Checkout/Checkout.tsx`)
- Checkout and order submission → Address conversion: converts address (evidence: `src/main/components/page/Checkout/Checkout.tsx`)
- Address conversion → Address builder: builds address (evidence: `src/main/converter/AddressModelConverter.ts`)
- Address builder → Validated domain models: constructs address model (evidence: `src/main/builder/AddressModelBuilder/AddressModelBuilder.tsx`)
- Registration → Address conversion: converts addresses (evidence: `src/main/components/page/Register/Register.tsx`)
- Registration → Validated domain models: builds registration model (evidence: `src/main/components/page/Register/Register.tsx`)
- Routes and auth bootstrap → Spring Boot API: checks auth status (evidence: `src/App.tsx`)
- Menu browsing → Spring Boot API: loads menu data (evidence: `README.md`)
- Registration → Spring Boot API: registers account (evidence: `README.md`)
- Login → Spring Boot API: authenticates session (evidence: `README.md`)
- Profile and order history → Spring Boot API: loads account data (evidence: `README.md`)