# rifathowladar/royal-bank architecture

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

## Overview

Royal Bank is a demo digital-banking application with public banking information, customer self-service, and staff administration. The customer journey covers account access and verification, then banking tasks such as account management, transfers, bills, cards, QR payments, and support. Staff have separate operational and oversight areas for approvals, KYC, AML, fraud, audit, reporting, and access control. The backend services use simulated browser storage rather than a demonstrated remote banking API. Source excerpts confirm routing, authentication, selected service-to-storage interactions, and the mock database; other service wiring is not shown.

Main entry points: [`src/routes/AppRoutes.tsx`](https://github.com/rifathowladar/royal-bank/blob/main/src/routes/AppRoutes.tsx) (Application routes), [`src/backend/mockApi/storage.ts`](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/mockApi/storage.ts) (Mock database), [`src/pages/auth`](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/auth) (Authentication pages), [`src/backend/services/authService.ts`](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/authService.ts) (Authentication service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application experience"]
  node_routes["Application routes<br/>[AppRoutes.tsx]"]
  node_public["Public banking"]
  node_authpages["Authentication pages"]
end

subgraph group_customer["Customer banking"]
  node_customerpages["Customer workspace"]
  node_accountpages["Account management"]
  node_transferpages["Money transfers<br/>[TransfersPage.tsx]"]
  node_billpages["Bills and recharge"]
  node_cardpages["Customer cards"]
  node_qrpages["QR payments"]
  node_othercustomer["Customer services"]
end

subgraph group_admin["Bank administration"]
  node_adminpages["Admin workspace"]
  node_amlpages["AML oversight"]
  node_fraudpages["Fraud oversight"]
  node_opsadmin["Operational admin"]
  node_reports["Regulatory reports"]
  node_rbac["Roles and permissions"]
end

subgraph group_backend["Mock backend"]
  node_authservice["Authentication service<br/>[authService.ts]"]
  node_adminreportsvc["Report service"]
  node_adminqrsvc["Admin QR service<br/>[adminQrService.ts]"]
  node_database[("Mock database<br/>[storage.ts]")]
end

node_visitor(("Visitor or user"))

node_visitor -->|"opens app"| node_routes
node_routes -->|"routes to"| node_public
node_routes -->|"routes to"| node_authpages
node_routes -->|"routes to"| node_customerpages
node_routes -->|"routes to"| node_accountpages
node_routes -->|"routes to"| node_transferpages
node_routes -->|"routes to"| node_billpages
node_routes -->|"routes to"| node_cardpages
node_routes -->|"routes to"| node_qrpages
node_routes -->|"routes to"| node_othercustomer
node_routes -->|"routes to"| node_adminpages
node_routes -->|"routes to"| node_amlpages
node_routes -->|"routes to"| node_fraudpages
node_routes -->|"routes to"| node_opsadmin
node_routes -->|"routes to"| node_reports
node_routes -->|"routes to"| node_rbac
node_authpages -->|"verifies 2FA"| node_authservice
node_authservice -->|"reads and writes"| node_database
node_adminreportsvc -->|"reads report data"| node_database
node_adminqrsvc -->|"reads and writes"| node_database

click node_routes "https://github.com/rifathowladar/royal-bank/blob/main/src/routes/AppRoutes.tsx"
click node_public "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/public"
click node_authpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/auth"
click node_customerpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer"
click node_accountpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer"
click node_transferpages "https://github.com/rifathowladar/royal-bank/blob/main/src/pages/customer/TransfersPage.tsx"
click node_billpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/bills"
click node_cardpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/cards"
click node_qrpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/qr"
click node_othercustomer "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer"
click node_adminpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin"
click node_amlpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/aml"
click node_fraudpages "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/fraud"
click node_opsadmin "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin"
click node_reports "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/reports"
click node_rbac "https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/rbac"
click node_authservice "https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/authService.ts"
click node_adminreportsvc "https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/adminReportService.ts"
click node_adminqrsvc "https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/adminQrService.ts"
click node_database "https://github.com/rifathowladar/royal-bank/blob/main/src/backend/mockApi/storage.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_routes,node_public,node_authpages,node_visitor toneBlue
class node_customerpages,node_accountpages,node_transferpages,node_billpages,node_cardpages,node_qrpages,node_othercustomer toneAmber
class node_adminpages,node_amlpages,node_fraudpages,node_opsadmin,node_reports,node_rbac toneMint
class node_authservice,node_adminreportsvc,node_adminqrsvc,node_database toneRose
```

## Components

### Application experience

- [Application routes](https://github.com/rifathowladar/royal-bank/blob/main/src/routes/AppRoutes.tsx): `src/routes/AppRoutes.tsx`
- [Public banking](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/public): `src/pages/public`
- [Authentication pages](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/auth): `src/pages/auth`

### Customer banking

- [Customer workspace](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer): `src/pages/customer`
- [Account management](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer): `src/pages/customer`
- [Money transfers](https://github.com/rifathowladar/royal-bank/blob/main/src/pages/customer/TransfersPage.tsx): `src/pages/customer/TransfersPage.tsx`
- [Bills and recharge](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/bills): `src/pages/customer/bills`
- [Customer cards](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/cards): `src/pages/customer/cards`
- [QR payments](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer/qr): `src/pages/customer/qr`
- [Customer services](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/customer): `src/pages/customer`

### Bank administration

- [Admin workspace](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin): `src/pages/admin`
- [AML oversight](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/aml): `src/pages/admin/aml`
- [Fraud oversight](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/fraud): `src/pages/admin/fraud`
- [Operational admin](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin): `src/pages/admin`
- [Regulatory reports](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/reports): `src/pages/admin/reports`
- [Roles and permissions](https://github.com/rifathowladar/royal-bank/tree/main/src/pages/admin/rbac): `src/pages/admin/rbac`

### Mock backend

- [Authentication service](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/authService.ts): `src/backend/services/authService.ts`
- [Report service](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/adminReportService.ts): `src/backend/services/adminReportService.ts`
- [Admin QR service](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/services/adminQrService.ts): `src/backend/services/adminQrService.ts`
- [Mock database](https://github.com/rifathowladar/royal-bank/blob/main/src/backend/mockApi/storage.ts): `src/backend/mockApi/storage.ts`

### Other components

- **Visitor or user**

## Connections

- Visitor or user → Application routes: opens app
- Application routes → Public banking: routes to
- Application routes → Authentication pages: routes to
- Application routes → Customer workspace: routes to
- Application routes → Account management: routes to
- Application routes → Money transfers: routes to
- Application routes → Bills and recharge: routes to
- Application routes → Customer cards: routes to
- Application routes → QR payments: routes to
- Application routes → Customer services: routes to
- Application routes → Admin workspace: routes to
- Application routes → AML oversight: routes to
- Application routes → Fraud oversight: routes to
- Application routes → Operational admin: routes to
- Application routes → Regulatory reports: routes to
- Application routes → Roles and permissions: routes to
- Authentication pages → Authentication service: verifies 2FA
- Authentication service → Mock database: reads and writes
- Report service → Mock database: reads report data
- Admin QR service → Mock database: reads and writes