# pjsaunders/rclone-webui-react architecture

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

- Interactive diagram: https://gitdiagram.com/pjsaunders/rclone-webui-react
- Repository: https://github.com/pjsaunders/rclone-webui-react
- Video tour (about a minute): https://gitdiagram.com/pjsaunders/rclone-webui-react/video

## Overview

Rclone Web UI is a browser-based control panel for an rclone RC server. Users connect to the server, manage remote configurations, browse remote files, perform file operations, and monitor backend activity or mounts. The map includes the application shell, domain screens, Redux state, and the API boundary. README capabilities are retained, but links from individual screens to actions and API calls are limited because those implementations were not sampled.

Main entry points: [`src/routes.js`](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/routes.js) (Route definitions), [`src/App.js`](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/App.js) (React application), [`src/views/Explorer/FilesView/FilesView.js`](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/FilesView/FilesView.js) (File listing), [`src/containers/DefaultLayout/DefaultLayout.js`](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/containers/DefaultLayout/DefaultLayout.js) (Default layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["React application<br/>[App.js]"]
  node_routing["Route definitions<br/>[routes.js]"]
  node_layout["Default layout<br/>[DefaultLayout.js]"]
  node_login["Login<br/>[Login.js]"]
end

subgraph group_remotes["Remote management"]
  node_newdrive["Create remote<br/>[NewDrive.js]"]
  node_config["Remote configs<br/>[ShowConfig.js]"]
end

subgraph group_files["Remote files"]
  node_explorer["Remote explorer"]
  node_remoteview["Remote view<br/>[RemoteExplorer.js]"]
  node_fileview["File listing<br/>[FilesView.js]"]
  node_fileactions["File actions<br/>[FileActions.js]"]
  node_uploads["Upload interface<br/>[FileUploadModal.js]"]
end

subgraph group_operations["Operations and status"]
  node_home["Home dashboard<br/>[Home.js]"]
  node_mounts["Mount dashboard<br/>[MountDashboard.js]"]
  node_backend["Backend dashboard<br/>[RCloneDashboard.js]"]
  node_status["Status widgets"]
end

subgraph group_state["State and API"]
  node_actions["Redux actions<br/>[index.js]"]
  node_reducers["Root reducer<br/>[index.js]"]
  node_store["Redux store<br/>[store.js]"]
  node_api["RC API client<br/>[API.js]"]
end

node_user(("Browser user"))
node_server{{"Rclone RC server"}}

node_user -->|"opens"| node_app
node_app -->|"renders"| node_layout
node_app -->|"routes to"| node_login
node_layout -->|"uses routes"| node_routing
node_routing -->|"routes to"| node_home
node_routing -->|"routes to"| node_newdrive
node_routing -->|"routes to"| node_config
node_routing -->|"routes to"| node_explorer
node_routing -->|"routes to"| node_mounts
node_routing -->|"routes to"| node_backend
node_explorer -->|"renders"| node_remoteview
node_remoteview -->|"shows files"| node_fileview
node_fileview -->|"offers actions"| node_fileactions
node_fileview -->|"offers upload"| node_uploads
node_backend -->|"shows status"| node_status
node_store -->|"reduces actions"| node_reducers
node_actions -->|"dispatches"| node_store
node_api -.->|"sends RC requests"| node_server
node_server -.->|"returns responses"| node_api

click node_app "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/App.js"
click node_routing "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/routes.js"
click node_layout "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/containers/DefaultLayout/DefaultLayout.js"
click node_login "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Pages/Login/Login.js"
click node_home "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Home/Home.js"
click node_newdrive "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RemoteManagement/NewDrive/NewDrive.js"
click node_config "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RemoteManagement/ShowConfig/ShowConfig.js"
click node_explorer "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js"
click node_remoteview "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/RemoteExplorer/RemoteExplorer.js"
click node_fileview "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/FilesView/FilesView.js"
click node_fileactions "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/FilesView/FileActions.js"
click node_uploads "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Base/FileOperations/FileUploadModal.js"
click node_mounts "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/MountDashboard/MountDashboard.js"
click node_backend "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RCloneDashboard/RCloneDashboard.js"
click node_status "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Base/BackendStatusCard/BackendStatusCard.js"
click node_actions "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/actions/index.js"
click node_reducers "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/reducers/index.js"
click node_store "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/store.js"
click node_api "https://github.com/pjsaunders/rclone-webui-react/blob/master/src/utils/API/API.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_app,node_routing,node_layout,node_login,node_user toneBlue
class node_newdrive,node_config toneAmber
class node_explorer,node_remoteview,node_fileview,node_fileactions,node_uploads,node_server toneMint
class node_home,node_mounts,node_backend,node_status toneRose
class node_actions,node_reducers,node_store,node_api toneIndigo
```

## Components

### Application shell

- [React application](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/App.js): `src/App.js`
- [Route definitions](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/routes.js): `src/routes.js`
- [Default layout](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/containers/DefaultLayout/DefaultLayout.js): `src/containers/DefaultLayout/DefaultLayout.js`
- [Login](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Pages/Login/Login.js): `src/views/Pages/Login/Login.js`

### Remote management

- [Create remote](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RemoteManagement/NewDrive/NewDrive.js): `src/views/RemoteManagement/NewDrive/NewDrive.js`
- [Remote configs](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RemoteManagement/ShowConfig/ShowConfig.js): `src/views/RemoteManagement/ShowConfig/ShowConfig.js`

### Remote files

- [Remote explorer](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js): `src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js`
- [Remote view](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/RemoteExplorer/RemoteExplorer.js): `src/views/Explorer/RemoteExplorer/RemoteExplorer.js`
- [File listing](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/FilesView/FilesView.js): `src/views/Explorer/FilesView/FilesView.js`
- [File actions](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Explorer/FilesView/FileActions.js): `src/views/Explorer/FilesView/FileActions.js`
- [Upload interface](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Base/FileOperations/FileUploadModal.js): `src/views/Base/FileOperations/FileUploadModal.js`

### Operations and status

- [Home dashboard](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Home/Home.js): `src/views/Home/Home.js`
- [Mount dashboard](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/MountDashboard/MountDashboard.js): `src/views/MountDashboard/MountDashboard.js`
- [Backend dashboard](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/RCloneDashboard/RCloneDashboard.js): `src/views/RCloneDashboard/RCloneDashboard.js`
- [Status widgets](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/views/Base/BackendStatusCard/BackendStatusCard.js): `src/views/Base/BackendStatusCard/BackendStatusCard.js`

### State and API

- [Redux actions](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/actions/index.js): `src/actions/index.js`
- [Root reducer](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/reducers/index.js): `src/reducers/index.js`
- [Redux store](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/store.js): `src/store.js`
- [RC API client](https://github.com/pjsaunders/rclone-webui-react/blob/master/src/utils/API/API.js): `src/utils/API/API.js`

### Other components

- **Browser user**
- **Rclone RC server**

## Connections

- Browser user → React application: opens
- React application → Default layout: renders
- React application → Login: routes to
- Default layout → Route definitions: uses routes
- Route definitions → Home dashboard: routes to
- Route definitions → Create remote: routes to
- Route definitions → Remote configs: routes to
- Route definitions → Remote explorer: routes to
- Route definitions → Mount dashboard: routes to
- Route definitions → Backend dashboard: routes to
- Remote explorer → Remote view: renders
- Remote view → File listing: shows files
- File listing → File actions: offers actions
- File listing → Upload interface: offers upload
- Backend dashboard → Status widgets: shows status
- Redux store → Root reducer: reduces actions
- Redux actions → Redux store: dispatches
- RC API client → Rclone RC server: sends RC requests
- Rclone RC server → RC API client: returns responses