How sarthakmoriya/clipwave works
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.js Express and Socket.IO server · App.js Expo application · apkWorker.js Clipboard processing · authRoutes.js Authentication routes
Components 19
Electron Desktop
- Electron main process · Owns native clipboard access and desktop lifecycle.
desktop/index.js - Clipboard processing · Reads and packages text or Base64 image payloads.
desktop/apkWorker.js - Clipboard reader
desktop/readApk.js - Desktop renderer · Desktop UI is isolated from native clipboard access.
desktop/renderer/renderer.js
Backend Service
- Express and Socket.IO server · Shared reachable HTTP and realtime endpoint.
server/server.js - Socket event relay · Routes clipboard events from desktop emitters to mobile listeners.
server/sockets/sockethandler.js - Authentication routes
server/routes/authRoutes.js - Upload routes
server/routes/uploadRoutes.js
Expo Mobile
- Expo application · Bootstraps the React Native application.
client-mobile/App.js - Mobile socket client · Receives clipboard events from the relay.
client-mobile/SocketHandler.js - Clipboard Redux state · Stores incoming clipboard data for category views.
client-mobile/store/clipboard.js - Redux store
client-mobile/store/store.js - Home navigation · Primary mobile navigation surfaces.
client-mobile/screens/HomeScreen.js - Clipboard content views · Renders text, images, links, PDFs, and videos by type.
client-mobile/screens/TextClipboard.js
Auth & Persistence
- Auth controller
server/controller/authController.js - Auth model
server/model/authModel.js - Database connection · Owns persistence connectivity.
server/config/db.js - JWT protection · JWT configuration and protected-request handling.
server/middleware/authMiddleware.js - Email integration
server/utils/emailService.js
Connections 20
- 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