# the91455/zerowawe architecture

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

- Interactive diagram: https://gitdiagram.com/the91455/zerowawe
- Repository: https://github.com/the91455/zerowawe

## Overview

#### Purpose and delivery model
Zerowawe is an anonymous peer-to-peer messaging client: users receive/share a nickname, establish direct WebRTC connections, and exchange messages and media without a central message server. It is a React single-page application, packaged for mobile through Capacitor.

#### Application bootstrap
The browser app starts at `src/main.jsx`, which mounts the React root and global styling. `src/App.jsx` is the primary application-level composition point; given the compact source tree, it likely owns the main screen/state transitions for landing, identity, connection, sharing, and chat. `index.html` is the Vite HTML host.

Paths: `src/main.jsx`, `src/App.jsx`, `index.html`

#### P2P communication boundary
The intended transport is WebRTC via PeerJS. PeerJS/WebRTC is the critical external boundary: connection negotiation may require PeerJS infrastructure, but chat payloads are designed to travel directly between peers rather than through an application backend. The client must treat peer availability, connection lifecycle, message delivery, and media transfer as asynchronous network state.

Paths: `src/App.jsx`, `package.json`

#### Identity and privacy primitives
Anonymous identity is nickname-based rather than account-based. Nickname generation is isolated in `src/utils/nicknames.js`, making it the boundary for the “infinite identity” algorithm and shareable peer identifier format. Cryptographic behavior, if used for client-side identifiers or payload protection, is isolated in `src/utils/crypto.js`; it should remain separate from UI state and transport wiring.

Paths: `src/utils/nicknames.js`, `src/utils/crypto.js`, `src/App.jsx`

#### User interaction and sharing flow
The primary control flow is: initialize/generate a nickname, expose it for QR or native sharing, accept or target another peer nickname, establish a P2P session, then render and exchange chat/media events. UI implementation is concentrated in the app component and custom CSS, rather than a component-heavy design system.

Paths: `src/App.jsx`, `src/App.css`, `src/index.css`

#### Mobile runtime integration
Capacitor provides the native mobile shell and platform bridge for the web application. Native Share and device-oriented distribution are architecture-relevant capabilities, while the React/Vite build remains the core UI runtime.

Paths: `capacitor.config.json`, `package.json`, `vite.config.js`

#### Assets and deployment surface
Static branding and runtime-served assets are under `public/`; design reference screenshots live separately under `assets/screenshots/`. The Vite build produces the web bundle consumed directly in browsers or embedded by Capacitor.

Paths: `public`, `public/logo.png`, `assets/screenshots`

Main entry points: [`src/App.jsx`](https://github.com/the91455/zerowawe/blob/main/src/App.jsx) (Identity, share and chat UI), [`vite.config.js`](https://github.com/the91455/zerowawe/blob/main/vite.config.js) (Vite build), [`src/main.jsx`](https://github.com/the91455/zerowawe/blob/main/src/main.jsx) (React bootstrap), [`package.json`](https://github.com/the91455/zerowawe/blob/main/package.json) (Dependencies and scripts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_html["Vite HTML host<br/>entry document<br/>[index.html]"]
  node_main["React bootstrap<br/>browser entry<br/>[main.jsx]"]
  node_app["App composition<br/>React application<br/>[App.jsx]"]
  node_ui_flow["Identity, share and chat UI<br/>UI flow<br/>[App.jsx]"]
  node_app_css["App styles<br/>CSS<br/>[App.css]"]
  node_global_css["Global styles<br/>CSS<br/>[index.css]"]
  node_vite["Vite build<br/>web bundler<br/>[vite.config.js]"]
  node_public["Public assets<br/>runtime assets"]
end

subgraph group_p2p["Peer-to-peer boundary"]
  node_nicknames["Nickname generator<br/>identity utility<br/>[nicknames.js]"]
  node_crypto["Crypto primitives<br/>privacy utility<br/>[crypto.js]"]
  node_peerjs{{"PeerJS / WebRTC<br/>external transport"}}
  node_peer(("Remote peer<br/>P2P client"))
end

subgraph group_mobile["Mobile delivery"]
  node_capacitor["Capacitor configuration<br/>mobile bridge config"]
  node_native["Native mobile shell<br/>mobile runtime"]
end

node_package["Dependencies and scripts<br/>package manifest<br/>[package.json]"]
node_screenshots["Design screenshots<br/>reference assets"]

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_main -->|"applies"| node_global_css
node_app -->|"coordinates"| node_ui_flow
node_app -->|"uses"| node_app_css
node_ui_flow -->|"generates identity"| node_nicknames
node_ui_flow -.->|"may protect identifiers or payloads"| node_crypto
node_ui_flow -->|"opens and manages sessions"| node_peerjs
node_peerjs -->|"direct WebRTC data and media"| node_peer
node_package -.->|"declares dependency"| node_peerjs
node_package -->|"runs build"| node_vite
node_vite -->|"builds host"| node_html
node_vite -->|"serves or copies"| node_public
node_vite -->|"bundles web client for"| node_native
node_capacitor -->|"configures"| node_native
node_native -->|"exposes native sharing"| node_ui_flow

click node_html "https://github.com/the91455/zerowawe/blob/main/index.html"
click node_main "https://github.com/the91455/zerowawe/blob/main/src/main.jsx"
click node_app "https://github.com/the91455/zerowawe/blob/main/src/App.jsx"
click node_ui_flow "https://github.com/the91455/zerowawe/blob/main/src/App.jsx"
click node_app_css "https://github.com/the91455/zerowawe/blob/main/src/App.css"
click node_global_css "https://github.com/the91455/zerowawe/blob/main/src/index.css"
click node_nicknames "https://github.com/the91455/zerowawe/blob/main/src/utils/nicknames.js"
click node_crypto "https://github.com/the91455/zerowawe/blob/main/src/utils/crypto.js"
click node_package "https://github.com/the91455/zerowawe/blob/main/package.json"
click node_vite "https://github.com/the91455/zerowawe/blob/main/vite.config.js"
click node_capacitor "https://github.com/the91455/zerowawe/blob/main/capacitor.config.json"
click node_public "https://github.com/the91455/zerowawe/tree/main/public"
click node_screenshots "https://github.com/the91455/zerowawe/tree/main/assets/screenshots"

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_html,node_main,node_app,node_ui_flow,node_app_css,node_global_css,node_vite,node_public toneBlue
class node_nicknames,node_crypto,node_peerjs,node_peer toneAmber
class node_capacitor,node_native toneMint
class node_package,node_screenshots toneNeutral
```

## Components

### Web application

React/Vite client runtime.

- [Vite HTML host](https://github.com/the91455/zerowawe/blob/main/index.html): entry document · `index.html`
- [React bootstrap](https://github.com/the91455/zerowawe/blob/main/src/main.jsx): browser entry · Mounts the React root and global styles. · `src/main.jsx`
- [App composition](https://github.com/the91455/zerowawe/blob/main/src/App.jsx): React application · Owns primary screen and session transitions. · `src/App.jsx`
- [Identity, share and chat UI](https://github.com/the91455/zerowawe/blob/main/src/App.jsx): UI flow · Drives nickname sharing, peer targeting, and chat/media rendering. · `src/App.jsx`
- [App styles](https://github.com/the91455/zerowawe/blob/main/src/App.css): CSS · `src/App.css`
- [Global styles](https://github.com/the91455/zerowawe/blob/main/src/index.css): CSS · `src/index.css`
- [Vite build](https://github.com/the91455/zerowawe/blob/main/vite.config.js): web bundler · Produces the browser bundle used by web and mobile runtimes. · `vite.config.js`
- [Public assets](https://github.com/the91455/zerowawe/tree/main/public): runtime assets · Branding and browser-served static files. · `public`

### Peer-to-peer boundary

Direct asynchronous peer sessions.

- [Nickname generator](https://github.com/the91455/zerowawe/blob/main/src/utils/nicknames.js): identity utility · Creates anonymous, shareable peer identifiers. · `src/utils/nicknames.js`
- [Crypto primitives](https://github.com/the91455/zerowawe/blob/main/src/utils/crypto.js): privacy utility · Keeps optional client-side cryptography outside UI and transport wiring. · `src/utils/crypto.js`
- **PeerJS / WebRTC**: external transport · Negotiates connections; payloads travel directly between peers.
- **Remote peer**: P2P client · Another Zerowawe client reached by nickname.

### Mobile delivery

Capacitor packages the web client.

- [Capacitor configuration](https://github.com/the91455/zerowawe/blob/main/capacitor.config.json): mobile bridge config · `capacitor.config.json`
- **Native mobile shell**: mobile runtime · Provides platform bridge and native sharing capability.

### Other components

- [Dependencies and scripts](https://github.com/the91455/zerowawe/blob/main/package.json): package manifest · `package.json`
- [Design screenshots](https://github.com/the91455/zerowawe/tree/main/assets/screenshots): reference assets · `assets/screenshots`

## Connections

- Vite HTML host → React bootstrap: loads
- React bootstrap → App composition: mounts
- React bootstrap → Global styles: applies
- App composition → Identity, share and chat UI: coordinates
- App composition → App styles: uses
- Identity, share and chat UI → Nickname generator: generates identity
- Identity, share and chat UI → Crypto primitives: may protect identifiers or payloads
- Identity, share and chat UI → PeerJS / WebRTC: opens and manages sessions
- PeerJS / WebRTC → Remote peer: direct WebRTC data and media
- Dependencies and scripts → PeerJS / WebRTC: declares dependency
- Dependencies and scripts → Vite build: runs build
- Vite build → Vite HTML host: builds host
- Vite build → Public assets: serves or copies
- Vite build → Native mobile shell: bundles web client for
- Capacitor configuration → Native mobile shell: configures
- Native mobile shell → Identity, share and chat UI: exposes native sharing