# sarfaroj95/online-bank-ui architecture

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

- Interactive diagram: https://gitdiagram.com/sarfaroj95/online-bank-ui
- Repository: https://github.com/sarfaroj95/online-bank-ui

## Overview

OnlineBank is a small Angular banking-interface prototype. A visitor reaches the app, whose router selects a home, login, admin-login, or dashboard screen; the dashboard includes a responsive left menu. The README describes the project but documents no banking operations, authentication behavior, backend, or stored data, and the sampled components contain no such logic. The graph therefore shows only the verified application shell and route-level UI; page details beyond the sampled component code remain uncertain.

Main entry points: [`src/app/app.routes.ts`](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.routes.ts) (Route table), [`src/main.ts`](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/main.ts) (App bootstrap), [`src/app/app.ts`](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.ts) (Root app), [`src/app/app.config.ts`](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.config.ts) (Router setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_app["Root app<br/>[app.ts]"]
  node_router_config["Router setup<br/>[app.config.ts]"]
  node_routes["Route table<br/>[app.routes.ts]"]
end

subgraph group_screens["User screens"]
  node_home["Home screen<br/>[home.ts]"]
  node_login["User login<br/>[login.ts]"]
  node_admin_login["Admin login<br/>[admin-login.ts]"]
  node_dashboard["Dashboard<br/>[dashboard.ts]"]
  node_left_menu["Responsive menu"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_app
node_app -->|"uses routing"| node_router_config
node_router_config -->|"registers routes"| node_routes
node_routes -->|"dispatches"| node_home
node_routes -->|"dispatches"| node_login
node_routes -->|"dispatches"| node_admin_login
node_routes -->|"dispatches"| node_dashboard
node_dashboard -->|"renders"| node_left_menu

click node_bootstrap "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/main.ts"
click node_app "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.ts"
click node_router_config "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.config.ts"
click node_routes "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.routes.ts"
click node_home "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/home/home.ts"
click node_login "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/login/login.ts"
click node_admin_login "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/admin-login/admin-login.ts"
click node_dashboard "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/dashboard/dashboard.ts"
click node_left_menu "https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/dashboard/left-menu/left-menu.component.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_bootstrap,node_app,node_router_config,node_routes toneBlue
class node_home,node_login,node_admin_login,node_dashboard,node_left_menu toneAmber
class node_visitor toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/main.ts): `src/main.ts`
- [Root app](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.ts): `src/app/app.ts`
- [Router setup](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.config.ts): `src/app/app.config.ts`
- [Route table](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`

### User screens

- [Home screen](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/home/home.ts): `src/app/components/home/home.ts`
- [User login](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/login/login.ts): `src/app/components/login/login.ts`
- [Admin login](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/admin-login/admin-login.ts): `src/app/components/admin-login/admin-login.ts`
- [Dashboard](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/dashboard/dashboard.ts): `src/app/components/dashboard/dashboard.ts`
- [Responsive menu](https://github.com/sarfaroj95/online-bank-ui/blob/main/src/app/components/dashboard/left-menu/left-menu.component.ts): `src/app/components/dashboard/left-menu/left-menu.component.ts`

### Other components

- **Visitor**

## Connections

- Visitor → App bootstrap: opens app
- App bootstrap → Root app: bootstraps
- Root app → Router setup: uses routing
- Router setup → Route table: registers routes
- Route table → Home screen: dispatches
- Route table → User login: dispatches
- Route table → Admin login: dispatches
- Route table → Dashboard: dispatches
- Dashboard → Responsive menu: renders