# mohamedarman/unified-cloud-file-manager- architecture

> Architecture diagram of the GitHub repository mohamedarman/unified-cloud-file-manager-, 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/mohamedarman/unified-cloud-file-manager-
- Repository: https://github.com/mohamedarman/unified-cloud-file-manager-

## Overview

Unified Cloud File Manager is a React web app for managing files across separately owned cloud accounts. Users authenticate, enter the application shell, then browse and operate on account-scoped files; the shared file-manager context maintains account, file, transfer, quota, and operation state. The repository also presents search, gallery, infrastructure, security, and operational views. The README documents isolation, quota governance, redaction, and durable writes. Some feature implementations were not sampled, so their placement is shown without guessed call edges.

Main entry points: [`src/context/FileManagerContext.tsx`](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/FileManagerContext.tsx) (File manager state), [`src/App.tsx`](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/App.tsx) (Application shell), [`src/main.tsx`](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/main.tsx) (React bootstrap), [`src/context/AuthContext.tsx`](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/AuthContext.tsx) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_bootstrap["React bootstrap<br/>[main.tsx]"]
  node_app["Application shell<br/>[App.tsx]"]
  node_login["Login<br/>[LoginPage.tsx]"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
  node_authservice["Credential service<br/>[authService.ts]"]
  node_router["View router<br/>[ViewRouter.tsx]"]
end

subgraph group_files["Cloud file management"]
  node_filecontext["File manager state"]
  node_filetypes["Account and file models<br/>[index.ts]"]
  node_database[("Local persistence<br/>[databaseService.ts]")]
  node_mockdata["Sample cloud data<br/>[mockData.ts]"]
  node_browser["File browser<br/>[FileBrowser.tsx]"]
  node_transfers["Transfer monitor<br/>[TransferDrawer.tsx]"]
  node_operations["Pending operations"]
end

subgraph group_insights["Views and insights"]
  node_dashboard["Multi-cloud dashboard"]
  node_search["Cross-account search"]
  node_gallery["Media gallery<br/>[GalleryView.tsx]"]
  node_infrastructure["Infrastructure views"]
end

subgraph group_controls["Security and operations"]
  node_quota["Quota governance<br/>[quotaGovernor.ts]"]
  node_storageview["Storage visualizer"]
  node_accountstate["Account state machine"]
  node_redactor["Security redaction<br/>[redactor.ts]"]
  node_audit["Audit logging<br/>[auditService.ts]"]
end

node_user(("User"))

node_user -->|"opens app"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_app -->|"reads state"| node_auth
node_app -->|"reads state"| node_filecontext
node_app -->|"shows when unauthenticated"| node_login
node_app -->|"renders views"| node_router
node_filecontext -->|"uses models"| node_filetypes
node_filecontext -->|"persists files and operations"| node_database
node_filecontext -->|"loads sample data"| node_mockdata
node_filecontext -->|"uses transitions"| node_accountstate
node_filecontext -->|"uses governor"| node_quota
node_filecontext -->|"uses redaction"| node_redactor
node_filecontext -.->|"provides file state"| node_browser
node_filecontext -.->|"provides transfer state"| node_transfers
node_filecontext -.->|"tracks queued writes"| node_operations
node_filecontext -.->|"records actions"| node_audit
node_filecontext -.->|"provides account data"| node_dashboard
node_filecontext -.->|"provides account data"| node_search
node_filecontext -.->|"provides file data"| node_gallery
node_filecontext -->|"provides quota data"| node_storageview
node_auth -.->|"uses service"| node_authservice
node_router -.->|"routes to"| node_infrastructure
node_user -.->|"signs in"| node_login

click node_bootstrap "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/main.tsx"
click node_app "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/App.tsx"
click node_login "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Auth/LoginPage.tsx"
click node_auth "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/AuthContext.tsx"
click node_authservice "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/authService.ts"
click node_router "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Router/ViewRouter.tsx"
click node_filecontext "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/FileManagerContext.tsx"
click node_filetypes "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/types/index.ts"
click node_database "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/databaseService.ts"
click node_mockdata "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/data/mockData.ts"
click node_browser "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/FileBrowser/FileBrowser.tsx"
click node_transfers "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/TransferDrawer.tsx"
click node_operations "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Operations/PendingOperationsView.tsx"
click node_dashboard "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Dashboard/MultiCloudDashboardView.tsx"
click node_search "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Search/CrossAccountSearchView.tsx"
click node_gallery "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Gallery/GalleryView.tsx"
click node_infrastructure "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/InfrastructureContext.tsx"
click node_quota "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/quotaGovernor.ts"
click node_storageview "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Quota/StorageVisualizer.tsx"
click node_accountstate "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/accountStateMachine.ts"
click node_redactor "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/redactor.ts"
click node_audit "https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/auditService.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_login,node_auth,node_authservice,node_router,node_user toneBlue
class node_filecontext,node_filetypes,node_database,node_mockdata,node_browser,node_transfers,node_operations toneAmber
class node_dashboard,node_search,node_gallery,node_infrastructure toneMint
class node_quota,node_storageview,node_accountstate,node_redactor,node_audit toneRose
```

## Components

### Application entry

- [React bootstrap](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/main.tsx): `src/main.tsx`
- [Application shell](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/App.tsx): `src/App.tsx`
- [Login](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Auth/LoginPage.tsx): `src/components/Auth/LoginPage.tsx`
- [Authentication state](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Credential service](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/authService.ts): `src/services/authService.ts`
- [View router](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Router/ViewRouter.tsx): `src/components/Router/ViewRouter.tsx`

### Cloud file management

- [File manager state](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/FileManagerContext.tsx): `src/context/FileManagerContext.tsx`
- [Account and file models](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/types/index.ts): `src/types/index.ts`
- [Local persistence](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/databaseService.ts): `src/services/databaseService.ts`
- [Sample cloud data](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [File browser](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/FileBrowser/FileBrowser.tsx): `src/components/FileBrowser/FileBrowser.tsx`
- [Transfer monitor](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/TransferDrawer.tsx): `src/components/TransferDrawer.tsx`
- [Pending operations](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Operations/PendingOperationsView.tsx): `src/components/Operations/PendingOperationsView.tsx`

### Views and insights

- [Multi-cloud dashboard](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Dashboard/MultiCloudDashboardView.tsx): `src/components/Dashboard/MultiCloudDashboardView.tsx`
- [Cross-account search](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Search/CrossAccountSearchView.tsx): `src/components/Search/CrossAccountSearchView.tsx`
- [Media gallery](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Gallery/GalleryView.tsx): `src/components/Gallery/GalleryView.tsx`
- [Infrastructure views](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/context/InfrastructureContext.tsx): `src/context/InfrastructureContext.tsx`

### Security and operations

- [Quota governance](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/quotaGovernor.ts): `src/utils/quotaGovernor.ts`
- [Storage visualizer](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/components/Quota/StorageVisualizer.tsx): `src/components/Quota/StorageVisualizer.tsx`
- [Account state machine](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/accountStateMachine.ts): `src/utils/accountStateMachine.ts`
- [Security redaction](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/utils/redactor.ts): `src/utils/redactor.ts`
- [Audit logging](https://github.com/mohamedarman/unified-cloud-file-manager-/blob/main/src/services/auditService.ts): `src/services/auditService.ts`

### Other components

- **User**

## Connections

- User → React bootstrap: opens app (evidence: `src/main.tsx`)
- React bootstrap → Application shell: renders (evidence: `src/main.tsx`)
- Application shell → Authentication state: reads state (evidence: `src/App.tsx`)
- Application shell → File manager state: reads state (evidence: `src/App.tsx`)
- Application shell → Login: shows when unauthenticated (evidence: `src/App.tsx`)
- Application shell → View router: renders views (evidence: `src/App.tsx`)
- File manager state → Account and file models: uses models (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → Local persistence: persists files and operations (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → Sample cloud data: loads sample data (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → Account state machine: uses transitions (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → Quota governance: uses governor (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → Security redaction: uses redaction (evidence: `src/context/FileManagerContext.tsx`)
- File manager state → File browser: provides file state
- File manager state → Transfer monitor: provides transfer state
- File manager state → Pending operations: tracks queued writes (evidence: `README.md`)
- File manager state → Audit logging: records actions
- File manager state → Multi-cloud dashboard: provides account data
- File manager state → Cross-account search: provides account data
- File manager state → Media gallery: provides file data
- File manager state → Storage visualizer: provides quota data (evidence: `src/components/Quota/StorageVisualizer.tsx`)
- Authentication state → Credential service: uses service
- View router → Infrastructure views: routes to
- User → Login: signs in