# anshulmaletha/signvoice-async architecture

> Architecture diagram of the GitHub repository anshulmaletha/signvoice-async, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/anshulmaletha/signvoice-async
- Repository: https://github.com/anshulmaletha/signvoice-async

## Overview

SignVoice is a browser app for accessible two-person video meetings. Users enter through the landing/login experience, start or join a shareable room, then communicate by video/audio, signs, speech, and typed chat in one conversation. MeetingRoom orchestrates local media, signaling, recognition, and incoming-sign speech; WebRTC carries media while Supabase Realtime handles signaling. Stores support conversation history and account/workspace views. The map follows README capabilities and shown imports/calls; unsampled integrations are omitted or shown only where documented.

Main entry points: [`src/components/meeting/MeetingRoom.jsx`](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/meeting/MeetingRoom.jsx) (Meeting room), [`src/App.jsx`](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/App.jsx) (App navigation), [`src/views/DashboardView.jsx`](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/views/DashboardView.jsx) (Dashboard), [`src/services/webrtcSignaling.js`](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/webrtcSignaling.js) (Realtime signaling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["App navigation<br/>[App.jsx]"]
  node_landing["Landing experience<br/>[LandingPage.jsx]"]
  node_login["Login view<br/>[LoginView.jsx]"]
end

subgraph group_meeting["Meeting runtime"]
  node_meeting_id["Meeting IDs<br/>[meetingId.js]"]
  node_room["Meeting room<br/>[MeetingRoom.jsx]"]
  node_session_identity["Participant identity<br/>[sessionService.js]"]
  node_media["WebRTC media<br/>[webrtcManager.js]"]
  node_signaling["Realtime signaling<br/>[webrtcSignaling.js]"]
  node_supabase["Supabase<br/>[supabaseClient.js]"]
end

subgraph group_communication["Communication modes"]
  node_gesture["Gesture recognition"]
  node_gesture_classifier["Custom classifier"]
  node_gesture_model["Classifier model data<br/>[customModelData.js]"]
  node_speech["Speech recognition<br/>[SpeechToText.js]"]
  node_tts["Text to speech<br/>[TextToSpeech.js]"]
  node_chat["Meeting chat and captions<br/>[MeetingRoom.jsx]"]
  node_speech_user["Speech workspace"]
end

subgraph group_workspace["Workspace state"]
  node_dashboard["Dashboard<br/>[DashboardView.jsx]"]
  node_conversation[("Conversation history")]
  node_sessions[("Saved sessions<br/>[sessionStore.js]")]
  node_friends[("Friends<br/>[friendStore.js]")]
  node_profile[("Profile<br/>[profileStore.js]")]
  node_settings[("Settings<br/>[settingsStore.js]")]
end

node_participant(("Participant"))

node_participant -->|"uses"| node_app
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_login
node_app -->|"generates ID"| node_meeting_id
node_app -->|"routes to"| node_room
node_participant -->|"joins room"| node_room
node_room -->|"validates ID"| node_meeting_id
node_room -->|"gets identity"| node_session_identity
node_room -->|"acquires media"| node_media
node_room -->|"creates channel"| node_signaling
node_room -->|"starts recognition"| node_gesture
node_room -->|"uses recognition"| node_speech
node_room -->|"records signs"| node_conversation
node_room -->|"speaks incoming sign"| node_tts
node_media -->|"sends session signals"| node_signaling
node_signaling -->|"uses client"| node_supabase
node_gesture -->|"classifies landmarks"| node_gesture_classifier
node_gesture_classifier -->|"reads model data"| node_gesture_model
node_speech -->|"checks speech state"| node_tts
node_dashboard -->|"reads and saves"| node_sessions
node_dashboard -->|"reads"| node_friends
node_dashboard -->|"reads"| node_conversation
node_dashboard -->|"reads"| node_profile
node_speech_user -.->|"captures speech"| node_speech
node_room -->|"hosts chat"| node_chat

click node_app "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/App.jsx"
click node_landing "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/LandingPage.jsx"
click node_login "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/views/LoginView.jsx"
click node_dashboard "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/views/DashboardView.jsx"
click node_meeting_id "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/utils/meetingId.js"
click node_room "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/meeting/MeetingRoom.jsx"
click node_session_identity "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/sessionService.js"
click node_media "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/webrtcManager.js"
click node_signaling "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/webrtcSignaling.js"
click node_supabase "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/supabaseClient.js"
click node_gesture "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/GestureRecognizer.js"
click node_gesture_classifier "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/customGestureClassifier.js"
click node_gesture_model "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/customModelData.js"
click node_speech "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/speech/SpeechToText.js"
click node_tts "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/audio/TextToSpeech.js"
click node_chat "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/meeting/MeetingRoom.jsx"
click node_conversation "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/conversationStore.js"
click node_sessions "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/sessionStore.js"
click node_friends "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/friendStore.js"
click node_profile "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/profileStore.js"
click node_settings "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/settingsStore.js"
click node_speech_user "https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/SpeechUserPanel.jsx"

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_landing,node_login toneBlue
class node_meeting_id,node_room,node_session_identity,node_media,node_signaling,node_supabase toneAmber
class node_gesture,node_gesture_classifier,node_gesture_model,node_speech,node_tts,node_chat,node_speech_user toneMint
class node_dashboard,node_conversation,node_sessions,node_friends,node_profile,node_settings toneRose
class node_participant toneIndigo
```

## Components

### App entry

- [App navigation](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/App.jsx): `src/App.jsx`
- [Landing experience](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/LandingPage.jsx): `src/components/LandingPage.jsx`
- [Login view](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/views/LoginView.jsx): `src/views/LoginView.jsx`

### Meeting runtime

- [Meeting IDs](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/utils/meetingId.js): `src/utils/meetingId.js`
- [Meeting room](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/meeting/MeetingRoom.jsx): `src/components/meeting/MeetingRoom.jsx`
- [Participant identity](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/sessionService.js): `src/services/sessionService.js`
- [WebRTC media](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/webrtcManager.js): `src/services/webrtcManager.js`
- [Realtime signaling](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/webrtcSignaling.js): `src/services/webrtcSignaling.js`
- [Supabase](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/supabaseClient.js): `src/services/supabaseClient.js`

### Communication modes

- [Gesture recognition](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/GestureRecognizer.js): `src/gesture/GestureRecognizer.js`
- [Custom classifier](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/customGestureClassifier.js): `src/gesture/customGestureClassifier.js`
- [Classifier model data](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/gesture/customModelData.js): `src/gesture/customModelData.js`
- [Speech recognition](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/speech/SpeechToText.js): `src/speech/SpeechToText.js`
- [Text to speech](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/audio/TextToSpeech.js): `src/audio/TextToSpeech.js`
- [Meeting chat and captions](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/meeting/MeetingRoom.jsx): `src/components/meeting/MeetingRoom.jsx`
- [Speech workspace](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/components/SpeechUserPanel.jsx): `src/components/SpeechUserPanel.jsx`

### Workspace state

- [Dashboard](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/views/DashboardView.jsx): `src/views/DashboardView.jsx`
- [Conversation history](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/conversationStore.js): `src/services/conversationStore.js`
- [Saved sessions](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/sessionStore.js): `src/services/sessionStore.js`
- [Friends](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/friendStore.js): `src/services/friendStore.js`
- [Profile](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/profileStore.js): `src/services/profileStore.js`
- [Settings](https://github.com/anshulmaletha/signvoice-async/blob/integration/src/services/settingsStore.js): `src/services/settingsStore.js`

### Other components

- **Participant**

## Connections

- Participant → App navigation: uses
- App navigation → Landing experience: renders (evidence: `src/App.jsx`)
- App navigation → Login view: renders (evidence: `src/App.jsx`)
- App navigation → Meeting IDs: generates ID (evidence: `src/App.jsx`)
- App navigation → Meeting room: routes to (evidence: `src/App.jsx`)
- Participant → Meeting room: joins room
- Meeting room → Meeting IDs: validates ID (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Participant identity: gets identity (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → WebRTC media: acquires media (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Realtime signaling: creates channel (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Gesture recognition: starts recognition (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Speech recognition: uses recognition (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Conversation history: records signs (evidence: `src/components/meeting/MeetingRoom.jsx`)
- Meeting room → Text to speech: speaks incoming sign (evidence: `src/components/meeting/MeetingRoom.jsx`)
- WebRTC media → Realtime signaling: sends session signals (evidence: `src/services/webrtcManager.js`)
- Realtime signaling → Supabase: uses client (evidence: `src/services/webrtcSignaling.js`)
- Gesture recognition → Custom classifier: classifies landmarks (evidence: `src/gesture/GestureRecognizer.js`)
- Custom classifier → Classifier model data: reads model data (evidence: `src/gesture/customGestureClassifier.js`)
- Speech recognition → Text to speech: checks speech state (evidence: `src/speech/SpeechToText.js`)
- Dashboard → Saved sessions: reads and saves (evidence: `src/views/DashboardView.jsx`)
- Dashboard → Friends: reads (evidence: `src/views/DashboardView.jsx`)
- Dashboard → Conversation history: reads (evidence: `src/views/DashboardView.jsx`)
- Dashboard → Profile: reads (evidence: `src/views/DashboardView.jsx`)
- Speech workspace → Speech recognition: captures speech
- Meeting room → Meeting chat and captions: hosts chat (evidence: `src/components/meeting/MeetingRoom.jsx`)