# sarthakmoriya/clipwave architecture

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

- Interactive diagram: https://gitdiagram.com/sarthakmoriya/clipwave
- Repository: https://github.com/sarthakmoriya/clipwave

## Overview

#### Purpose and Runtime Topology
Clipboard Sync App transfers desktop clipboard content to a React Native mobile client in real time. It consists of three independently run JavaScript applications: an Expo mobile app, an Electron desktop clipboard monitor, and an Express/Socket.IO backend. Authentication APIs exist but are described as incomplete.

#### Backend Service and Realtime Hub
The server is the shared HTTP and Socket.IO endpoint. It initializes Express, database configuration, routes, and socket handling in `server/server.js`. Socket event routing is centralized in `server/sockets/sockethandler.js`, forming the primary relay boundary between desktop emitters and connected mobile listeners. Auth and upload HTTP routes are mounted from `server/routes/authRoutes.js` and `server/routes/uploadRoutes.js`.

#### Authentication and Persistence Boundary
Authentication follows route → controller → model layering: `server/routes/authRoutes.js` delegates to `server/controller/authController.js`, which uses `server/model/authModel.js`. JWT issuance/validation configuration and request protection are separated into `server/config/jwt.js` and `server/middleware/authMiddleware.js`. Database connectivity is owned by `server/config/db.js`; environment-dependent values are documented in `server/.env.example`. Email-related external integration is isolated in `server/utils/emailService.js`.

#### Desktop Clipboard Producer
The Electron process begins at `desktop/index.js`, with clipboard monitoring/processing split across `desktop/apkWorker.js` and `desktop/readApk.js`. It reads local clipboard data using desktop-oriented libraries such as clipboardy/robotjs, converts content—especially images—to transportable payloads, and emits updates to the Socket.IO server. Electron’s renderer boundary is represented by `desktop/renderer/index.html` and `desktop/renderer/renderer.js`; this separates native/main-process clipboard access from desktop UI rendering.

#### Mobile Application and Socket Consumer
Expo bootstraps the mobile application through `client-mobile/index.js` and `client-mobile/App.js`. `client-mobile/SocketHandler.js` owns the Socket.IO client connection and receives clipboard events from the server. The mobile client also accesses device clipboard facilities through Expo-compatible dependencies and stores auth tokens via AsyncStorage, though token-driven navigation is not complete.

#### Mobile State and Content Presentation
Redux state is organized in `client-mobile/store/store.js`, `client-mobile/store/clipboard.js`, and `client-mobile/store/states.js`. The intended flow is socket payload → Redux clipboard state → category-specific UI. `client-mobile/screens/HomeScreen.js`/`client-mobile/screens/HomeScreen2.js` provide primary navigation surfaces, while `client-mobile/screens/TextClipboard.js`, `client-mobile/screens/ImagesClipboard.js`, `client-mobile/screens/LinksClipboard.js`, `client-mobile/screens/PdfsClipboard.js`, and `client-mobile/screens/VideosClipboard.js` render content types. Android image display remains a known incomplete boundary.

#### End-to-End Control Flow
1. Electron polls or reads the laptop clipboard and packages text or Base64 image content.
2. Desktop sends the payload over Socket.IO to the backend.
3. `server/sockets/sockethandler.js` relays the event to mobile socket clients.
4. `client-mobile/SocketHandler.js` receives the event and updates Redux-managed clipboard data.
5. Mobile screens select and display clipboard content by type.

Network IP configuration is required in the desktop and mobile socket clients; the Node service provides the common reachable endpoint.

Main entry points: [`server/server.js`](https://github.com/sarthakmoriya/clipwave/blob/main/server/server.js) (Express and Socket.IO server), [`client-mobile/App.js`](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/App.js) (Expo application), [`desktop/apkWorker.js`](https://github.com/sarthakmoriya/clipwave/blob/main/desktop/apkWorker.js) (Clipboard processing), [`server/routes/authRoutes.js`](https://github.com/sarthakmoriya/clipwave/blob/main/server/routes/authRoutes.js) (Authentication routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Electron Desktop"]
  node_desktop_main["Electron main process<br/>Electron entry<br/>[index.js]"]
  node_clipboard_worker["Clipboard processing<br/>clipboard worker<br/>[apkWorker.js]"]
  node_clipboard_reader["Clipboard reader<br/>clipboard adapter<br/>[readApk.js]"]
  node_desktop_renderer["Desktop renderer<br/>Electron renderer<br/>[renderer.js]"]
end

subgraph group_backend["Backend Service"]
  node_realtime_server["Express and Socket.IO server<br/>service entry<br/>[server.js]"]
  node_socket_relay{{"Socket event relay<br/>Socket.IO handler<br/>[sockethandler.js]"}}
  node_auth_routes["Authentication routes<br/>HTTP routes<br/>[authRoutes.js]"]
  node_upload_routes["Upload routes<br/>HTTP routes<br/>[uploadRoutes.js]"]
end

subgraph group_mobile["Expo Mobile"]
  node_mobile_bootstrap["Expo application<br/>mobile entry<br/>[App.js]"]
  node_mobile_socket{{"Mobile socket client<br/>Socket.IO consumer<br/>[SocketHandler.js]"}}
  node_clipboard_state["Clipboard Redux state<br/>Redux slice<br/>[clipboard.js]"]
  node_mobile_store["Redux store<br/>state container<br/>[store.js]"]
  node_home_navigation["Home navigation<br/>mobile screens<br/>[HomeScreen.js]"]
  node_content_views["Clipboard content views<br/>mobile screens<br/>[TextClipboard.js]"]
end

subgraph group_persistence["Auth &amp; Persistence"]
  node_auth_controller["Auth controller<br/>[authController.js]"]
  node_auth_model["Auth model<br/>data model<br/>[authModel.js]"]
  node_database[("Database connection<br/>database config<br/>[db.js]")]
  node_jwt_auth["JWT protection<br/>auth middleware<br/>[authMiddleware.js]"]
  node_email_service["Email integration<br/>external adapter<br/>[emailService.js]"]
end

node_desktop_main -->|"starts"| node_clipboard_worker
node_clipboard_worker -->|"reads clipboard"| node_clipboard_reader
node_desktop_main -->|"renders UI"| node_desktop_renderer
node_clipboard_worker -->|"emits clipboard payload"| node_socket_relay
node_realtime_server -->|"initializes"| node_socket_relay
node_realtime_server -->|"mounts"| node_auth_routes
node_realtime_server -->|"mounts"| node_upload_routes
node_auth_routes -->|"delegates"| node_auth_controller
node_auth_controller -->|"uses"| node_auth_model
node_auth_model -->|"persists through"| node_database
node_auth_routes -.->|"protects requests"| node_jwt_auth
node_auth_controller -->|"sends email"| node_email_service
node_mobile_bootstrap -->|"connects"| node_mobile_socket
node_socket_relay -->|"relays clipboard event"| node_mobile_socket
node_mobile_socket -->|"updates"| node_clipboard_state
node_mobile_store -->|"registers"| node_clipboard_state
node_mobile_bootstrap -->|"provides state"| node_mobile_store
node_mobile_bootstrap -->|"shows"| node_home_navigation
node_clipboard_state -->|"supplies categorized content"| node_content_views
node_home_navigation -->|"navigates to"| node_content_views

click node_desktop_main "https://github.com/sarthakmoriya/clipwave/blob/main/desktop/index.js"
click node_clipboard_worker "https://github.com/sarthakmoriya/clipwave/blob/main/desktop/apkWorker.js"
click node_clipboard_reader "https://github.com/sarthakmoriya/clipwave/blob/main/desktop/readApk.js"
click node_desktop_renderer "https://github.com/sarthakmoriya/clipwave/blob/main/desktop/renderer/renderer.js"
click node_realtime_server "https://github.com/sarthakmoriya/clipwave/blob/main/server/server.js"
click node_socket_relay "https://github.com/sarthakmoriya/clipwave/blob/main/server/sockets/sockethandler.js"
click node_auth_routes "https://github.com/sarthakmoriya/clipwave/blob/main/server/routes/authRoutes.js"
click node_upload_routes "https://github.com/sarthakmoriya/clipwave/blob/main/server/routes/uploadRoutes.js"
click node_auth_controller "https://github.com/sarthakmoriya/clipwave/blob/main/server/controller/authController.js"
click node_auth_model "https://github.com/sarthakmoriya/clipwave/blob/main/server/model/authModel.js"
click node_database "https://github.com/sarthakmoriya/clipwave/blob/main/server/config/db.js"
click node_jwt_auth "https://github.com/sarthakmoriya/clipwave/blob/main/server/middleware/authMiddleware.js"
click node_email_service "https://github.com/sarthakmoriya/clipwave/blob/main/server/utils/emailService.js"
click node_mobile_bootstrap "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/App.js"
click node_mobile_socket "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/SocketHandler.js"
click node_clipboard_state "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/store/clipboard.js"
click node_mobile_store "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/store/store.js"
click node_home_navigation "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/screens/HomeScreen.js"
click node_content_views "https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/screens/TextClipboard.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_desktop_main,node_clipboard_worker,node_clipboard_reader,node_desktop_renderer toneBlue
class node_realtime_server,node_socket_relay,node_auth_routes,node_upload_routes toneAmber
class node_mobile_bootstrap,node_mobile_socket,node_clipboard_state,node_mobile_store,node_home_navigation,node_content_views toneMint
class node_auth_controller,node_auth_model,node_database,node_jwt_auth,node_email_service toneRose
```

## Components

### Electron Desktop

- [Electron main process](https://github.com/sarthakmoriya/clipwave/blob/main/desktop/index.js): Electron entry · Owns native clipboard access and desktop lifecycle. · `desktop/index.js`
- [Clipboard processing](https://github.com/sarthakmoriya/clipwave/blob/main/desktop/apkWorker.js): clipboard worker · Reads and packages text or Base64 image payloads. · `desktop/apkWorker.js`
- [Clipboard reader](https://github.com/sarthakmoriya/clipwave/blob/main/desktop/readApk.js): clipboard adapter · `desktop/readApk.js`
- [Desktop renderer](https://github.com/sarthakmoriya/clipwave/blob/main/desktop/renderer/renderer.js): Electron renderer · Desktop UI is isolated from native clipboard access. · `desktop/renderer/renderer.js`

### Backend Service

- [Express and Socket.IO server](https://github.com/sarthakmoriya/clipwave/blob/main/server/server.js): service entry · Shared reachable HTTP and realtime endpoint. · `server/server.js`
- [Socket event relay](https://github.com/sarthakmoriya/clipwave/blob/main/server/sockets/sockethandler.js): Socket.IO handler · Routes clipboard events from desktop emitters to mobile listeners. · `server/sockets/sockethandler.js`
- [Authentication routes](https://github.com/sarthakmoriya/clipwave/blob/main/server/routes/authRoutes.js): HTTP routes · `server/routes/authRoutes.js`
- [Upload routes](https://github.com/sarthakmoriya/clipwave/blob/main/server/routes/uploadRoutes.js): HTTP routes · `server/routes/uploadRoutes.js`

### Expo Mobile

- [Expo application](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/App.js): mobile entry · Bootstraps the React Native application. · `client-mobile/App.js`
- [Mobile socket client](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/SocketHandler.js): Socket.IO consumer · Receives clipboard events from the relay. · `client-mobile/SocketHandler.js`
- [Clipboard Redux state](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/store/clipboard.js): Redux slice · Stores incoming clipboard data for category views. · `client-mobile/store/clipboard.js`
- [Redux store](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/store/store.js): state container · `client-mobile/store/store.js`
- [Home navigation](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/screens/HomeScreen.js): mobile screens · Primary mobile navigation surfaces. · `client-mobile/screens/HomeScreen.js`
- [Clipboard content views](https://github.com/sarthakmoriya/clipwave/blob/main/client-mobile/screens/TextClipboard.js): mobile screens · Renders text, images, links, PDFs, and videos by type. · `client-mobile/screens/TextClipboard.js`

### Auth & Persistence

- [Auth controller](https://github.com/sarthakmoriya/clipwave/blob/main/server/controller/authController.js): controller · `server/controller/authController.js`
- [Auth model](https://github.com/sarthakmoriya/clipwave/blob/main/server/model/authModel.js): data model · `server/model/authModel.js`
- [Database connection](https://github.com/sarthakmoriya/clipwave/blob/main/server/config/db.js): database config · Owns persistence connectivity. · `server/config/db.js`
- [JWT protection](https://github.com/sarthakmoriya/clipwave/blob/main/server/middleware/authMiddleware.js): auth middleware · JWT configuration and protected-request handling. · `server/middleware/authMiddleware.js`
- [Email integration](https://github.com/sarthakmoriya/clipwave/blob/main/server/utils/emailService.js): external adapter · `server/utils/emailService.js`

## Connections

- Electron main process → Clipboard processing: starts
- Clipboard processing → Clipboard reader: reads clipboard
- Electron main process → Desktop renderer: renders UI
- Clipboard processing → Socket event relay: emits clipboard payload · Socket.IO; endpoint IP is configured on the client.
- Express and Socket.IO server → Socket event relay: initializes
- Express and Socket.IO server → Authentication routes: mounts
- Express and Socket.IO server → Upload routes: mounts
- Authentication routes → Auth controller: delegates
- Auth controller → Auth model: uses
- Auth model → Database connection: persists through
- Authentication routes → JWT protection: protects requests
- Auth controller → Email integration: sends email
- Expo application → Mobile socket client: connects
- Socket event relay → Mobile socket client: relays clipboard event
- Mobile socket client → Clipboard Redux state: updates
- Redux store → Clipboard Redux state: registers
- Expo application → Redux store: provides state
- Expo application → Home navigation: shows
- Clipboard Redux state → Clipboard content views: supplies categorized content
- Home navigation → Clipboard content views: navigates to