# tinashe2023/sonnet-mobile architecture

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

## Overview

SonnetMobile is a React Native/Expo chat client for joining private rooms and exchanging group or direct messages. The main user journey runs from profile setup and room creation or registration through the chat screen, where users can load and search history, share files, and manage pinned chats and stickers. Chat and login use the HTTP API, and login explicitly registers users over the socket service. The README is empty; chat-screen excerpts are partial, so uncertain realtime and component wiring is omitted.

Main entry points: [`src/screens/ChatScreen.js`](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/ChatScreen.js) (Chat screen), [`src/screens/LoginScreen.js`](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/LoginScreen.js) (Login and rooms), [`src/services/api.js`](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/api.js) (HTTP chat API), [`App.js`](https://github.com/tinashe2023/sonnet-mobile/blob/main/App.js) (App root)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_app["App root<br/>[App.js]"]
  node_theme["Theme state<br/>[ThemeContext.js]"]
  node_navigator["Screen navigation<br/>[AppNavigator.js]"]
end

subgraph group_identity["Joining and identity"]
  node_login["Login and rooms<br/>[LoginScreen.js]"]
  node_profileupload["Profile image upload<br/>[api.js]"]
end

subgraph group_chat["Chat experience"]
  node_chat["Chat screen<br/>[ChatScreen.js]"]
  node_messagebubble["Text messages<br/>[MessageBubble.js]"]
  node_filebubble["File and voice display<br/>[FileBubble.js]"]
  node_voice["Voice recording<br/>[VoiceRecorder.js]"]
  node_profilemodal["User profile"]
end

subgraph group_services["Client services"]
  node_api["HTTP chat API<br/>[api.js]"]
  node_socket["Realtime socket<br/>[socket.js]"]
  node_config["Server configuration<br/>[config.js]"]
end

node_user(("Chat user"))
node_server{{"Chat backend"}}
node_push{{"Push notifications"}}

node_user -->|"opens"| node_app
node_app -->|"provides theme"| node_theme
node_app -->|"renders"| node_navigator
node_navigator -->|"starts at"| node_login
node_navigator -->|"navigates to"| node_chat
node_user -->|"enters profile"| node_login
node_login -->|"uploads image; creates room"| node_api
node_login -->|"registers user"| node_socket
node_login -->|"opens after registration"| node_chat
node_chat -->|"loads history, search, pins, stickers, uploads"| node_api
node_chat -->|"renders messages"| node_messagebubble
node_chat -->|"renders files"| node_filebubble
node_chat -->|"records voice"| node_voice
node_chat -->|"shows profile"| node_profilemodal
node_api -->|"gets server address"| node_config
node_filebubble -->|"gets server address"| node_config
node_api -->|"HTTP requests"| node_server
node_socket -->|"realtime connection"| node_server
node_login -.->|"requests device token"| node_push

click node_app "https://github.com/tinashe2023/sonnet-mobile/blob/main/App.js"
click node_theme "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/context/ThemeContext.js"
click node_navigator "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/navigation/AppNavigator.js"
click node_login "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/LoginScreen.js"
click node_profileupload "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/api.js"
click node_chat "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/ChatScreen.js"
click node_messagebubble "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/MessageBubble.js"
click node_filebubble "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/FileBubble.js"
click node_voice "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/VoiceRecorder.js"
click node_profilemodal "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/UserProfileModal.js"
click node_api "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/api.js"
click node_socket "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/socket.js"
click node_config "https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/config.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_theme,node_navigator,node_user toneBlue
class node_login,node_profileupload toneAmber
class node_chat,node_messagebubble,node_filebubble,node_voice,node_profilemodal toneMint
class node_api,node_socket,node_config toneRose
class node_server,node_push toneIndigo
```

## Components

### App and navigation

- [App root](https://github.com/tinashe2023/sonnet-mobile/blob/main/App.js): `App.js`
- [Theme state](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/context/ThemeContext.js): `src/context/ThemeContext.js`
- [Screen navigation](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/navigation/AppNavigator.js): `src/navigation/AppNavigator.js`

### Joining and identity

- [Login and rooms](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/LoginScreen.js): `src/screens/LoginScreen.js`
- [Profile image upload](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/api.js): `src/services/api.js`

### Chat experience

- [Chat screen](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/screens/ChatScreen.js): `src/screens/ChatScreen.js`
- [Text messages](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/MessageBubble.js): `src/components/MessageBubble.js`
- [File and voice display](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/FileBubble.js): `src/components/FileBubble.js`
- [Voice recording](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/VoiceRecorder.js): `src/components/VoiceRecorder.js`
- [User profile](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/components/UserProfileModal.js): `src/components/UserProfileModal.js`

### Client services

- [HTTP chat API](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/api.js): `src/services/api.js`
- [Realtime socket](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/socket.js): `src/services/socket.js`
- [Server configuration](https://github.com/tinashe2023/sonnet-mobile/blob/main/src/services/config.js): `src/services/config.js`

### Other components

- **Chat user**
- **Chat backend**
- **Push notifications**

## Connections

- Chat user → App root: opens
- App root → Theme state: provides theme
- App root → Screen navigation: renders
- Screen navigation → Login and rooms: starts at
- Screen navigation → Chat screen: navigates to
- Chat user → Login and rooms: enters profile
- Login and rooms → HTTP chat API: uploads image; creates room
- Login and rooms → Realtime socket: registers user
- Login and rooms → Chat screen: opens after registration
- Chat screen → HTTP chat API: loads history, search, pins, stickers, uploads
- Chat screen → Text messages: renders messages
- Chat screen → File and voice display: renders files
- Chat screen → Voice recording: records voice
- Chat screen → User profile: shows profile
- HTTP chat API → Server configuration: gets server address
- File and voice display → Server configuration: gets server address
- HTTP chat API → Chat backend: HTTP requests
- Realtime socket → Chat backend: realtime connection
- Login and rooms → Push notifications: requests device token