# ventee-app/ventee-mobile architecture

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

- Interactive diagram: https://gitdiagram.com/ventee-app/ventee-mobile
- Repository: https://github.com/ventee-app/ventee-mobile

## Overview

Ventee transfers selected device contacts through a proxy WebSocket server. In sharing, the app loads contacts, lets the user select them, displays a QR code for the connection, sends the selected contacts after a peer requests them, and shows completion. Receiving scans that code, requests the transfer, lets the user review contacts, and saves them to the device. The graph also shows navigation, shared connection state, and the contact-list UI. Some connection-hook internals and the scanner implementation were not excerpted, so uncertain links are omitted.

Main entry points: [`screens/ShareContacts/ShareContacts.tsx`](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/ShareContacts.tsx) (Share workflow), [`screens/ReceiveContacts/ReceiveContacts.tsx`](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ReceiveContacts/ReceiveContacts.tsx) (Receive workflow), [`navigation/index.tsx`](https://github.com/ventee-app/ventee-mobile/blob/release/navigation/index.tsx) (Screen navigation), [`components/ContactsList/ContactsList.tsx`](https://github.com/ventee-app/ventee-mobile/blob/release/components/ContactsList/ContactsList.tsx) (Contact selector)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["App entry<br/>[App.tsx]"]
  node_navigation["Screen navigation<br/>[index.tsx]"]
  node_about["About screen<br/>[About.tsx]"]
end

subgraph group_sharing["Contact sharing"]
  node_share["Share workflow<br/>[ShareContacts.tsx]"]
  node_qrcode["Connection QR<br/>[QRCode.tsx]"]
  node_empty["Empty state<br/>[EmptyList.tsx]"]
end

subgraph group_receiving["Contact receiving"]
  node_receive["Receive workflow"]
  node_scanner["QR scanner<br/>[Scanner.tsx]"]
end

subgraph group_shared["Shared runtime"]
  node_contactlist["Contact selector<br/>[ContactsList.tsx]"]
  node_contactrow["Contact row<br/>[Contact.tsx]"]
  node_input["Search input<br/>[Input.tsx]"]
  node_complete["Completion view<br/>[ActionComplete.tsx]"]
  node_button["Action button<br/>[BigButton.tsx]"]
  node_spinner["Loading indicator<br/>[Spinner.tsx]"]
  node_ws["WebSocket hook<br/>[use-websockets.ts]"]
  node_state["Connection state<br/>[index.ts]"]
  node_models["Transfer data types<br/>[data-models.ts]"]
end

node_user(("Device user"))
node_server{{"Proxy WebSocket server"}}
node_devicecontacts[("Device contacts")]

node_user -->|"selects screen"| node_navigation
node_app -->|"provides state"| node_state
node_app -->|"renders"| node_navigation
node_navigation -->|"routes to"| node_share
node_navigation -->|"routes to"| node_receive
node_navigation -->|"routes to"| node_about
node_share -->|"uses connection"| node_ws
node_receive -->|"uses connection"| node_ws
node_ws -.->|"connects through"| node_server
node_ws -->|"uses actions"| node_state
node_share -->|"loads contacts"| node_devicecontacts
node_share -->|"renders selection"| node_contactlist
node_share -->|"shows connection"| node_qrcode
node_share -->|"shows when empty"| node_empty
node_share -->|"shows result"| node_complete
node_share -->|"shows while loading"| node_spinner
node_share -->|"sends selected contacts"| node_server
node_receive -->|"renders scanner"| node_scanner
node_receive -->|"starts scanning"| node_button
node_receive -->|"reviews received contacts"| node_contactlist
node_receive -->|"shows saved result"| node_complete
node_receive -->|"shows while loading"| node_spinner
node_receive -->|"requests contacts"| node_server
node_receive -->|"saves contacts"| node_devicecontacts
node_contactlist -->|"renders rows"| node_contactrow
node_contactlist -->|"renders search"| node_input

click node_app "https://github.com/ventee-app/ventee-mobile/blob/release/App.tsx"
click node_navigation "https://github.com/ventee-app/ventee-mobile/blob/release/navigation/index.tsx"
click node_about "https://github.com/ventee-app/ventee-mobile/blob/release/screens/About/About.tsx"
click node_share "https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/ShareContacts.tsx"
click node_contactlist "https://github.com/ventee-app/ventee-mobile/blob/release/components/ContactsList/ContactsList.tsx"
click node_contactrow "https://github.com/ventee-app/ventee-mobile/blob/release/components/ContactsList/components/Contact.tsx"
click node_input "https://github.com/ventee-app/ventee-mobile/blob/release/components/Input/Input.tsx"
click node_qrcode "https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/components/QRCode.tsx"
click node_empty "https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/components/EmptyList.tsx"
click node_receive "https://github.com/ventee-app/ventee-mobile/blob/release/screens/ReceiveContacts/ReceiveContacts.tsx"
click node_scanner "https://github.com/ventee-app/ventee-mobile/blob/release/screens/ReceiveContacts/components/Scanner.tsx"
click node_complete "https://github.com/ventee-app/ventee-mobile/blob/release/components/ActionComplete/ActionComplete.tsx"
click node_button "https://github.com/ventee-app/ventee-mobile/blob/release/components/BigButton/BigButton.tsx"
click node_spinner "https://github.com/ventee-app/ventee-mobile/blob/release/components/Spinner/Spinner.tsx"
click node_ws "https://github.com/ventee-app/ventee-mobile/blob/release/hooks/use-websockets.ts"
click node_state "https://github.com/ventee-app/ventee-mobile/blob/release/store/index.ts"
click node_models "https://github.com/ventee-app/ventee-mobile/blob/release/types/data-models.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_app,node_navigation,node_about,node_user toneBlue
class node_share,node_qrcode,node_empty,node_devicecontacts toneAmber
class node_receive,node_scanner,node_server toneMint
class node_contactlist,node_contactrow,node_input,node_complete,node_button,node_spinner,node_ws,node_state,node_models toneRose
```

## Components

### App shell

- [App entry](https://github.com/ventee-app/ventee-mobile/blob/release/App.tsx): `App.tsx`
- [Screen navigation](https://github.com/ventee-app/ventee-mobile/blob/release/navigation/index.tsx): `navigation/index.tsx`
- [About screen](https://github.com/ventee-app/ventee-mobile/blob/release/screens/About/About.tsx): `screens/About/About.tsx`

### Contact sharing

- [Share workflow](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/ShareContacts.tsx): `screens/ShareContacts/ShareContacts.tsx`
- [Connection QR](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/components/QRCode.tsx): `screens/ShareContacts/components/QRCode.tsx`
- [Empty state](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ShareContacts/components/EmptyList.tsx): `screens/ShareContacts/components/EmptyList.tsx`

### Contact receiving

- [Receive workflow](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ReceiveContacts/ReceiveContacts.tsx): `screens/ReceiveContacts/ReceiveContacts.tsx`
- [QR scanner](https://github.com/ventee-app/ventee-mobile/blob/release/screens/ReceiveContacts/components/Scanner.tsx): `screens/ReceiveContacts/components/Scanner.tsx`

### Shared runtime

- [Contact selector](https://github.com/ventee-app/ventee-mobile/blob/release/components/ContactsList/ContactsList.tsx): `components/ContactsList/ContactsList.tsx`
- [Contact row](https://github.com/ventee-app/ventee-mobile/blob/release/components/ContactsList/components/Contact.tsx): `components/ContactsList/components/Contact.tsx`
- [Search input](https://github.com/ventee-app/ventee-mobile/blob/release/components/Input/Input.tsx): `components/Input/Input.tsx`
- [Completion view](https://github.com/ventee-app/ventee-mobile/blob/release/components/ActionComplete/ActionComplete.tsx): `components/ActionComplete/ActionComplete.tsx`
- [Action button](https://github.com/ventee-app/ventee-mobile/blob/release/components/BigButton/BigButton.tsx): `components/BigButton/BigButton.tsx`
- [Loading indicator](https://github.com/ventee-app/ventee-mobile/blob/release/components/Spinner/Spinner.tsx): `components/Spinner/Spinner.tsx`
- [WebSocket hook](https://github.com/ventee-app/ventee-mobile/blob/release/hooks/use-websockets.ts): `hooks/use-websockets.ts`
- [Connection state](https://github.com/ventee-app/ventee-mobile/blob/release/store/index.ts): `store/index.ts`
- [Transfer data types](https://github.com/ventee-app/ventee-mobile/blob/release/types/data-models.ts): `types/data-models.ts`

### Other components

- **Device user**
- **Proxy WebSocket server**
- **Device contacts**

## Connections

- Device user → Screen navigation: selects screen (evidence: `navigation/index.tsx`)
- App entry → Connection state: provides state (evidence: `App.tsx`)
- App entry → Screen navigation: renders (evidence: `App.tsx`)
- Screen navigation → Share workflow: routes to (evidence: `navigation/index.tsx`)
- Screen navigation → Receive workflow: routes to (evidence: `navigation/index.tsx`)
- Screen navigation → About screen: routes to (evidence: `navigation/index.tsx`)
- Share workflow → WebSocket hook: uses connection (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Receive workflow → WebSocket hook: uses connection (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- WebSocket hook → Proxy WebSocket server: connects through
- WebSocket hook → Connection state: uses actions (evidence: `hooks/use-websockets.ts`)
- Share workflow → Device contacts: loads contacts (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Contact selector: renders selection (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Connection QR: shows connection (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Empty state: shows when empty (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Completion view: shows result (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Loading indicator: shows while loading (evidence: `screens/ShareContacts/ShareContacts.tsx`)
- Share workflow → Proxy WebSocket server: sends selected contacts
- Receive workflow → QR scanner: renders scanner (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Action button: starts scanning (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Contact selector: reviews received contacts (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Completion view: shows saved result (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Loading indicator: shows while loading (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Proxy WebSocket server: requests contacts (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Receive workflow → Device contacts: saves contacts (evidence: `screens/ReceiveContacts/ReceiveContacts.tsx`)
- Contact selector → Contact row: renders rows (evidence: `components/ContactsList/ContactsList.tsx`)
- Contact selector → Search input: renders search (evidence: `components/ContactsList/ContactsList.tsx`)