# enclicainteractive/voltapp architecture

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

## Overview

VoltApp is the React frontend for VoltChat: users authenticate, enter channel or direct-message conversations, and communicate through real-time messaging and WebRTC voice. The app also provides server administration, discovery, and a broad catalog of collaborative activities. Encryption and shared application contexts support the communication experience. The README documents the main backend integrations; sampled source confirms app routing, authentication calls, and selected feature wiring, so unsampled feature-level connections are kept conservative.

Main entry points: [`src/pages/ChatPage.jsx`](https://github.com/enclicainteractive/voltapp/blob/master/src/pages/ChatPage.jsx) (Chat page), [`src/App.jsx`](https://github.com/enclicainteractive/voltapp/blob/master/src/App.jsx) (App routes), [`src/components/ChatArea.jsx`](https://github.com/enclicainteractive/voltapp/blob/master/src/components/ChatArea.jsx) (Messages and channels), [`src/services/apiService.js`](https://github.com/enclicainteractive/voltapp/blob/master/src/services/apiService.js) (API service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App routes<br/>[App.jsx]"]
  node_api["API service<br/>[apiService.js]"]
  node_theme["Themes<br/>[ThemeContext.jsx]"]
  node_serviceworker["PWA service worker<br/>[sw.js]"]
end

subgraph group_communication["Chat and calling"]
  node_chatpage["Chat page<br/>[ChatPage.jsx]"]
  node_chatui["Messages and channels<br/>[ChatArea.jsx]"]
  node_socket["Realtime socket<br/>[SocketContext.jsx]"]
  node_voice["Voice and calls"]
  node_callcontext["Call context<br/>[CallContext.jsx]"]
  node_dm["Direct messages<br/>[DMChat.jsx]"]
  node_widgets["Chat widgets<br/>[WidgetManager.jsx]"]
  node_widgetservice[("Widget persistence<br/>[widgetService.js]")]
end

subgraph group_community["Servers and discovery"]
  node_servers["Server management<br/>[ServerSidebar.jsx]"]
  node_events["Server events"]
  node_discovery["Discovery and friends<br/>[Discovery.jsx]"]
end

subgraph group_activities["Collaborative activities"]
  node_activitiespanel["Activity picker<br/>[ActivityPicker.jsx]"]
  node_activityhost["Builtin activity host"]
  node_activitycatalog["Builtin activities<br/>[definitions.js]"]
end

subgraph group_security["Identity and security"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
  node_authservice["OAuth and auth<br/>[authService.js]"]
  node_encryption["End-to-end encryption<br/>[E2eContext.jsx]"]
end

node_user(("User"))
node_backend["Voltage backend"]
node_oauth["Enclica OAuth"]

node_user -->|"uses"| node_app
node_app -->|"provides"| node_auth
node_app -->|"routes"| node_chatpage
node_app -->|"provides"| node_theme
node_auth -->|"requests auth"| node_authservice
node_authservice -->|"exchanges tokens"| node_oauth
node_authservice -->|"calls auth API"| node_backend
node_chatpage -->|"renders"| node_chatui
node_chatpage -->|"shows servers"| node_servers
node_chatui -->|"loads messages"| node_api
node_chatui -->|"receives updates"| node_socket
node_socket -->|"connects realtime"| node_backend
node_api -->|"calls API"| node_backend
node_chatpage -->|"opens DMs"| node_dm
node_chatpage -->|"opens voice"| node_voice
node_voice -->|"uses call state"| node_callcontext
node_chatui -->|"uses encryption"| node_encryption
node_servers -->|"manages servers"| node_api
node_events -->|"manages events"| node_api
node_chatpage -->|"opens discovery"| node_discovery
node_chatpage -->|"opens activities"| node_activitiespanel
node_activitiespanel -->|"selects activity"| node_activityhost
node_activityhost -->|"resolves activity"| node_activitycatalog
node_chatpage -->|"opens widgets"| node_widgets
node_widgets -->|"loads and saves"| node_widgetservice
node_user -.->|"uses offline app"| node_serviceworker

click node_app "https://github.com/enclicainteractive/voltapp/blob/master/src/App.jsx"
click node_auth "https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/AuthContext.jsx"
click node_authservice "https://github.com/enclicainteractive/voltapp/blob/master/src/services/authService.js"
click node_chatpage "https://github.com/enclicainteractive/voltapp/blob/master/src/pages/ChatPage.jsx"
click node_chatui "https://github.com/enclicainteractive/voltapp/blob/master/src/components/ChatArea.jsx"
click node_socket "https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/SocketContext.jsx"
click node_api "https://github.com/enclicainteractive/voltapp/blob/master/src/services/apiService.js"
click node_voice "https://github.com/enclicainteractive/voltapp/blob/master/src/components/UnifiedVoiceView.jsx"
click node_callcontext "https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/CallContext.jsx"
click node_dm "https://github.com/enclicainteractive/voltapp/blob/master/src/components/DMChat.jsx"
click node_encryption "https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/E2eContext.jsx"
click node_servers "https://github.com/enclicainteractive/voltapp/blob/master/src/components/ServerSidebar.jsx"
click node_events "https://github.com/enclicainteractive/voltapp/blob/master/src/components/ServerEventsManager.jsx"
click node_discovery "https://github.com/enclicainteractive/voltapp/blob/master/src/components/Discovery.jsx"
click node_activitiespanel "https://github.com/enclicainteractive/voltapp/blob/master/src/components/ActivityPicker.jsx"
click node_activityhost "https://github.com/enclicainteractive/voltapp/blob/master/src/activities/BuiltinActivityHost.jsx"
click node_activitycatalog "https://github.com/enclicainteractive/voltapp/blob/master/src/activities/builtin/definitions.js"
click node_widgets "https://github.com/enclicainteractive/voltapp/blob/master/src/components/WidgetManager.jsx"
click node_widgetservice "https://github.com/enclicainteractive/voltapp/blob/master/src/services/widgetService.js"
click node_theme "https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/ThemeContext.jsx"
click node_serviceworker "https://github.com/enclicainteractive/voltapp/blob/master/public/sw.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_api,node_theme,node_serviceworker,node_user toneBlue
class node_chatpage,node_chatui,node_socket,node_voice,node_callcontext,node_dm,node_widgets,node_widgetservice toneAmber
class node_servers,node_events,node_discovery toneMint
class node_activitiespanel,node_activityhost,node_activitycatalog toneRose
class node_auth,node_authservice,node_encryption,node_backend,node_oauth toneIndigo
```

## Components

### Application shell

- [App routes](https://github.com/enclicainteractive/voltapp/blob/master/src/App.jsx): `src/App.jsx`
- [API service](https://github.com/enclicainteractive/voltapp/blob/master/src/services/apiService.js): `src/services/apiService.js`
- [Themes](https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/ThemeContext.jsx): `src/contexts/ThemeContext.jsx`
- [PWA service worker](https://github.com/enclicainteractive/voltapp/blob/master/public/sw.js): `public/sw.js`

### Chat and calling

- [Chat page](https://github.com/enclicainteractive/voltapp/blob/master/src/pages/ChatPage.jsx): `src/pages/ChatPage.jsx`
- [Messages and channels](https://github.com/enclicainteractive/voltapp/blob/master/src/components/ChatArea.jsx): `src/components/ChatArea.jsx`
- [Realtime socket](https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/SocketContext.jsx): `src/contexts/SocketContext.jsx`
- [Voice and calls](https://github.com/enclicainteractive/voltapp/blob/master/src/components/UnifiedVoiceView.jsx): `src/components/UnifiedVoiceView.jsx`
- [Call context](https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/CallContext.jsx): `src/contexts/CallContext.jsx`
- [Direct messages](https://github.com/enclicainteractive/voltapp/blob/master/src/components/DMChat.jsx): `src/components/DMChat.jsx`
- [Chat widgets](https://github.com/enclicainteractive/voltapp/blob/master/src/components/WidgetManager.jsx): `src/components/WidgetManager.jsx`
- [Widget persistence](https://github.com/enclicainteractive/voltapp/blob/master/src/services/widgetService.js): `src/services/widgetService.js`

### Servers and discovery

- [Server management](https://github.com/enclicainteractive/voltapp/blob/master/src/components/ServerSidebar.jsx): `src/components/ServerSidebar.jsx`
- [Server events](https://github.com/enclicainteractive/voltapp/blob/master/src/components/ServerEventsManager.jsx): `src/components/ServerEventsManager.jsx`
- [Discovery and friends](https://github.com/enclicainteractive/voltapp/blob/master/src/components/Discovery.jsx): `src/components/Discovery.jsx`

### Collaborative activities

- [Activity picker](https://github.com/enclicainteractive/voltapp/blob/master/src/components/ActivityPicker.jsx): `src/components/ActivityPicker.jsx`
- [Builtin activity host](https://github.com/enclicainteractive/voltapp/blob/master/src/activities/BuiltinActivityHost.jsx): `src/activities/BuiltinActivityHost.jsx`
- [Builtin activities](https://github.com/enclicainteractive/voltapp/blob/master/src/activities/builtin/definitions.js): `src/activities/builtin/definitions.js`

### Identity and security

- [Auth context](https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/AuthContext.jsx): `src/contexts/AuthContext.jsx`
- [OAuth and auth](https://github.com/enclicainteractive/voltapp/blob/master/src/services/authService.js): `src/services/authService.js`
- [End-to-end encryption](https://github.com/enclicainteractive/voltapp/blob/master/src/contexts/E2eContext.jsx): `src/contexts/E2eContext.jsx`

### Other components

- **User**
- **Voltage backend**
- **Enclica OAuth**

## Connections

- User → App routes: uses
- App routes → Auth context: provides
- App routes → Chat page: routes
- App routes → Themes: provides
- Auth context → OAuth and auth: requests auth
- OAuth and auth → Enclica OAuth: exchanges tokens
- OAuth and auth → Voltage backend: calls auth API
- Chat page → Messages and channels: renders
- Chat page → Server management: shows servers
- Messages and channels → API service: loads messages
- Messages and channels → Realtime socket: receives updates
- Realtime socket → Voltage backend: connects realtime
- API service → Voltage backend: calls API
- Chat page → Direct messages: opens DMs
- Chat page → Voice and calls: opens voice
- Voice and calls → Call context: uses call state
- Messages and channels → End-to-end encryption: uses encryption
- Server management → API service: manages servers
- Server events → API service: manages events
- Chat page → Discovery and friends: opens discovery
- Chat page → Activity picker: opens activities
- Activity picker → Builtin activity host: selects activity
- Builtin activity host → Builtin activities: resolves activity
- Chat page → Chat widgets: opens widgets
- Chat widgets → Widget persistence: loads and saves
- User → PWA service worker: uses offline app