# zoom/zoomapps-advancedsample-react architecture

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

- Interactive diagram: https://gitdiagram.com/zoom/zoomapps-advancedsample-react
- Repository: https://github.com/zoom/zoomapps-advancedsample-react

## Overview

This repository is an Advanced Zoom Apps sample: users install and authorize the app, open its React UI inside Zoom, and exercise Zoom SDK, REST API, and authentication demonstrations. A separate RTMS sample receives meeting media/transcripts and converts them to files. The sampled source supports the OAuth, session, proxy, SDK connection, and RTMS event flows shown; other documented SDK demonstrations are represented at the UI capability level because their implementation was not sampled.

Main entry points: [`backend/api/zoomapp/controller.js`](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoomapp/controller.js) (App OAuth and home), [`frontend/src/App.js`](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/App.js) (React app), [`backend/api/thirdpartyauth/controller.js`](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/thirdpartyauth/controller.js) (Third-party OAuth), [`backend/util/zoom-api.js`](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/util/zoom-api.js) (Zoom API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Zoom App experience"]
  node_frontend["React app<br/>[App.js]"]
  node_sdkdemos["SDK demonstrations<br/>[ApiScrollview.js]"]
  node_authorizationui["Authorization UI<br/>[Authorization.js]"]
end

subgraph group_auth["Authentication and API"]
  node_zoomapprouter["App routes<br/>[router.js]"]
  node_zoomappcontroller["App OAuth and home<br/>[controller.js]"]
  node_sessions["Session middleware<br/>[middleware.js]"]
  node_store[("User token store<br/>[store.js]")]
  node_zoomapi["Zoom API client<br/>[zoom-api.js]"]
  node_zoomrestproxy["REST proxy<br/>[controller.js]"]
  node_zoomrestmiddleware["REST auth middleware<br/>[middleware.js]"]
  node_thirdpartyauth["Third-party OAuth<br/>[controller.js]"]
  node_thirdpartyrouter["Third-party routes<br/>[router.js]"]
end

subgraph group_rtms["RTMS media processing"]
  node_rtmssdk["RTMS SDK consumer<br/>[index.js]"]
  node_rtmsserver["RTMS WebSocket server<br/>[index.js]"]
  node_rtmscontroller["RTMS event handler<br/>[controller.js]"]
  node_converters["Media converters"]
end

node_user(("Zoom user"))
node_zoomclient(("Zoom client"))
node_zoomrest["Zoom REST API"]
node_auth0["Auth0 provider"]
node_zoom["Zoom authorization"]
node_rtmswebhook(("RTMS webhook service"))
node_zoommedia["Zoom RTMS services"]

node_user -->|"starts install"| node_zoomappcontroller
node_zoomappcontroller -->|"redirects for consent"| node_zoom
node_zoom -->|"returns auth code"| node_zoomappcontroller
node_zoomappcontroller -->|"exchanges code"| node_zoomapi
node_zoomappcontroller -->|"requests user and deeplink"| node_zoomapi
node_zoomapi -->|"calls"| node_zoomrest
node_zoomappcontroller -->|"saves user tokens"| node_store
node_zoomappcontroller -->|"uses session"| node_sessions
node_zoomclient -->|"opens app home"| node_zoomappcontroller
node_zoomappcontroller -->|"proxies app UI"| node_frontend
node_zoomclient -->|"hosts embedded UI"| node_frontend
node_user -->|"uses demonstrations"| node_frontend
node_frontend -->|"renders controls"| node_sdkdemos
node_frontend -->|"renders auth flows"| node_authorizationui
node_frontend -->|"configures and calls SDK"| node_zoomclient
node_authorizationui -->|"requests in-client auth"| node_zoomapprouter
node_zoomapprouter -->|"dispatches routes"| node_zoomappcontroller
node_zoomappcontroller -->|"exchanges client code"| node_zoomapi
node_zoomappcontroller -->|"saves tokens"| node_store
node_zoomappcontroller -.->|"optional auth redirect"| node_thirdpartyrouter
node_thirdpartyrouter -->|"dispatches routes"| node_thirdpartyauth
node_thirdpartyauth -->|"redirects for Zoom auth"| node_zoom
node_thirdpartyauth -->|"gets Zoom token and user"| node_zoomapi
node_thirdpartyauth -->|"saves and reads credentials"| node_store
node_thirdpartyauth -.->|"redirects and exchanges code"| node_auth0
node_zoomrestmiddleware -->|"loads user tokens"| node_store
node_zoomrestmiddleware -->|"authorizes proxy request"| node_zoomrestproxy
node_zoomrestproxy -->|"forwards API request"| node_zoomrest
node_rtmswebhook -->|"delivers meeting events"| node_rtmssdk
node_rtmssdk -->|"converts collected media"| node_converters
node_rtmswebhook -->|"posts events"| node_rtmsserver
node_rtmsserver -->|"dispatches RTMS routes"| node_rtmscontroller
node_rtmscontroller -->|"connects signaling and media"| node_zoommedia
node_zoommedia -->|"streams media and transcripts"| node_rtmscontroller
node_rtmscontroller -->|"converts meeting data"| node_converters

click node_frontend "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/App.js"
click node_sdkdemos "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/components/ApiScrollview.js"
click node_authorizationui "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/components/Authorization.js"
click node_zoomapprouter "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoomapp/router.js"
click node_zoomappcontroller "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoomapp/controller.js"
click node_sessions "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/middleware.js"
click node_store "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/util/store.js"
click node_zoomapi "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/util/zoom-api.js"
click node_zoomrestproxy "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoom/controller.js"
click node_zoomrestmiddleware "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoom/middleware.js"
click node_thirdpartyauth "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/thirdpartyauth/controller.js"
click node_thirdpartyrouter "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/thirdpartyauth/router.js"
click node_rtmssdk "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/sdk/index.js"
click node_rtmsserver "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/websocket/index.js"
click node_rtmscontroller "https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/websocket/api/controller.js"
click node_converters "https://github.com/zoom/zoomapps-advancedsample-react/tree/main/rtms/utils"

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_frontend,node_sdkdemos,node_authorizationui,node_user,node_zoomclient toneBlue
class node_zoomapprouter,node_zoomappcontroller,node_sessions,node_store,node_zoomapi,node_zoomrestproxy,node_zoomrestmiddleware,node_thirdpartyauth,node_thirdpartyrouter toneAmber
class node_rtmssdk,node_rtmsserver,node_rtmscontroller,node_converters,node_zoomrest,node_rtmswebhook toneMint
class node_auth0,node_zoom,node_zoommedia toneIndigo
```

## Components

### Zoom App experience

- [React app](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [SDK demonstrations](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/components/ApiScrollview.js): `frontend/src/components/ApiScrollview.js`
- [Authorization UI](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/frontend/src/components/Authorization.js): `frontend/src/components/Authorization.js`

### Authentication and API

- [App routes](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoomapp/router.js): `backend/api/zoomapp/router.js`
- [App OAuth and home](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoomapp/controller.js): `backend/api/zoomapp/controller.js`
- [Session middleware](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/middleware.js): `backend/middleware.js`
- [User token store](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/util/store.js): `backend/util/store.js`
- [Zoom API client](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/util/zoom-api.js): `backend/util/zoom-api.js`
- [REST proxy](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoom/controller.js): `backend/api/zoom/controller.js`
- [REST auth middleware](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/zoom/middleware.js): `backend/api/zoom/middleware.js`
- [Third-party OAuth](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/thirdpartyauth/controller.js): `backend/api/thirdpartyauth/controller.js`
- [Third-party routes](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/backend/api/thirdpartyauth/router.js): `backend/api/thirdpartyauth/router.js`

### RTMS media processing

- [RTMS SDK consumer](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/sdk/index.js): `rtms/sdk/index.js`
- [RTMS WebSocket server](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/websocket/index.js): `rtms/websocket/index.js`
- [RTMS event handler](https://github.com/zoom/zoomapps-advancedsample-react/blob/main/rtms/websocket/api/controller.js): `rtms/websocket/api/controller.js`
- [Media converters](https://github.com/zoom/zoomapps-advancedsample-react/tree/main/rtms/utils): `rtms/utils`

### Other components

- **Zoom user**
- **Zoom client**
- **Zoom REST API**
- **Auth0 provider**
- **Zoom authorization**
- **RTMS webhook service**
- **Zoom RTMS services**

## Connections

- Zoom user → App OAuth and home: starts install
- App OAuth and home → Zoom authorization: redirects for consent
- Zoom authorization → App OAuth and home: returns auth code
- App OAuth and home → Zoom API client: exchanges code
- App OAuth and home → Zoom API client: requests user and deeplink
- Zoom API client → Zoom REST API: calls
- App OAuth and home → User token store: saves user tokens
- App OAuth and home → Session middleware: uses session
- Zoom client → App OAuth and home: opens app home
- App OAuth and home → React app: proxies app UI
- Zoom client → React app: hosts embedded UI
- Zoom user → React app: uses demonstrations
- React app → SDK demonstrations: renders controls
- React app → Authorization UI: renders auth flows
- React app → Zoom client: configures and calls SDK
- Authorization UI → App routes: requests in-client auth
- App routes → App OAuth and home: dispatches routes
- App OAuth and home → Zoom API client: exchanges client code
- App OAuth and home → User token store: saves tokens
- App OAuth and home → Third-party routes: optional auth redirect
- Third-party routes → Third-party OAuth: dispatches routes
- Third-party OAuth → Zoom authorization: redirects for Zoom auth
- Third-party OAuth → Zoom API client: gets Zoom token and user
- Third-party OAuth → User token store: saves and reads credentials
- Third-party OAuth → Auth0 provider: redirects and exchanges code
- REST auth middleware → User token store: loads user tokens
- REST auth middleware → REST proxy: authorizes proxy request
- REST proxy → Zoom REST API: forwards API request
- RTMS webhook service → RTMS SDK consumer: delivers meeting events
- RTMS SDK consumer → Media converters: converts collected media
- RTMS webhook service → RTMS WebSocket server: posts events
- RTMS WebSocket server → RTMS event handler: dispatches RTMS routes
- RTMS event handler → Zoom RTMS services: connects signaling and media
- Zoom RTMS services → RTMS event handler: streams media and transcripts
- RTMS event handler → Media converters: converts meeting data