# akt9802/snipio architecture

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

## Overview

Snipio pairs a laptop capture/host with a tablet receiver through temporary realtime rooms. Users create or join a room, capture lecture frames with the browser extension or supply image files (including watched folders), then receive slides on a tablet for drag-and-drop, clipboard copying, or auto-save. The sampled server code confirms Socket.IO room membership, expiry, and slide relay; the README documents additional P2P capability, but its implementation is not established by the excerpts.

Main entry points: [`server/socketServer.ts`](https://github.com/akt9802/snipio/blob/main/server/socketServer.ts) (Socket Server), [`src/components/room/HostDashboard.tsx`](https://github.com/akt9802/snipio/blob/main/src/components/room/HostDashboard.tsx) (Host Dashboard), [`src/components/room/TabletFeed.tsx`](https://github.com/akt9802/snipio/blob/main/src/components/room/TabletFeed.tsx) (Tablet Feed), [`src/components/room/FolderWatch.tsx`](https://github.com/akt9802/snipio/blob/main/src/components/room/FolderWatch.tsx) (Folder Watch)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Room Entry"]
  node_landing["Room Creation"]
  node_room_page["Room Page<br/>[page.tsx]"]
end

subgraph group_capture["Slide Capture"]
  node_host["Host Dashboard<br/>[HostDashboard.tsx]"]
  node_extension_capture["Extension Capture<br/>[content.ts]"]
  node_extension_worker["Extension Worker<br/>[background.ts]"]
  node_folder_watch["Folder Watch<br/>[FolderWatch.tsx]"]
  node_slide_tools["Slide Conversion<br/>[slides.ts]"]
  node_folder_api["Folder Access<br/>[folderWatch.ts]"]
end

subgraph group_relay["Realtime Relay"]
  node_session["Room Session<br/>[useRoomSession.ts]"]
  node_realtime["Realtime Client<br/>[realtime.ts]"]
  node_socket_server["Socket Server<br/>[socketServer.ts]"]
  node_room_state[("Ephemeral Rooms<br/>[socketServer.ts]")]
  node_room_events["Room Protocol<br/>[roomEvents.ts]"]
  node_web_rtc["WebRTC P2P"]
end

subgraph group_receive["Tablet Receive"]
  node_tablet_feed["Tablet Feed<br/>[TabletFeed.tsx]"]
  node_receiving_tile["Receiving Tile<br/>[ReceivingTile.tsx]"]
  node_autosave["Auto-Save<br/>[autoSave.ts]"]
  node_clipboard["Clipboard Copy<br/>[clipboard.ts]"]
end

node_student(("Student"))
node_lecture(("Lecture Video"))
node_tablet_user(("Tablet User"))
node_notes_app(("Notes App"))

node_student -->|"creates room"| node_landing
node_landing -->|"opens room"| node_room_page
node_student -->|"supplies images"| node_host
node_lecture -->|"provides frame"| node_extension_capture
node_student -->|"triggers capture"| node_extension_capture
node_extension_capture -->|"sends capture"| node_extension_worker
node_extension_worker -->|"emits slide"| node_realtime
node_host -->|"starts watch"| node_folder_watch
node_folder_watch -->|"reads files"| node_folder_api
node_folder_watch -->|"delivers files"| node_host
node_host -->|"converts images"| node_slide_tools
node_host -->|"sends slide"| node_session
node_session -->|"emits events"| node_realtime
node_room_page -->|"joins room"| node_session
node_realtime -->|"exchanges events"| node_socket_server
node_socket_server -->|"maintains rooms"| node_room_state
node_socket_server -->|"validates payloads"| node_room_events
node_socket_server -->|"broadcasts slides"| node_tablet_feed
node_tablet_user -->|"joins by code"| node_room_page
node_tablet_feed -->|"renders slides"| node_receiving_tile
node_tablet_feed -->|"auto-saves"| node_autosave
node_tablet_feed -->|"copies image"| node_clipboard
node_tablet_user -->|"drags slide"| node_receiving_tile
node_receiving_tile -->|"drops image"| node_notes_app
node_tablet_user -->|"pastes image"| node_notes_app
node_socket_server -.->|"direct transfer"| node_web_rtc
node_web_rtc -.->|"sends slide"| node_tablet_feed

click node_landing "https://github.com/akt9802/snipio/blob/main/src/components/landing/CreateRoomButton.tsx"
click node_room_page "https://github.com/akt9802/snipio/blob/main/src/app/room/%5BroomId%5D/page.tsx"
click node_host "https://github.com/akt9802/snipio/blob/main/src/components/room/HostDashboard.tsx"
click node_extension_capture "https://github.com/akt9802/snipio/blob/main/extension/content.ts"
click node_extension_worker "https://github.com/akt9802/snipio/blob/main/extension/background.ts"
click node_folder_watch "https://github.com/akt9802/snipio/blob/main/src/components/room/FolderWatch.tsx"
click node_slide_tools "https://github.com/akt9802/snipio/blob/main/src/lib/slides.ts"
click node_session "https://github.com/akt9802/snipio/blob/main/src/lib/useRoomSession.ts"
click node_realtime "https://github.com/akt9802/snipio/blob/main/src/lib/realtime.ts"
click node_socket_server "https://github.com/akt9802/snipio/blob/main/server/socketServer.ts"
click node_room_state "https://github.com/akt9802/snipio/blob/main/server/socketServer.ts"
click node_room_events "https://github.com/akt9802/snipio/blob/main/src/lib/roomEvents.ts"
click node_tablet_feed "https://github.com/akt9802/snipio/blob/main/src/components/room/TabletFeed.tsx"
click node_receiving_tile "https://github.com/akt9802/snipio/blob/main/src/components/room/ReceivingTile.tsx"
click node_autosave "https://github.com/akt9802/snipio/blob/main/src/lib/autoSave.ts"
click node_clipboard "https://github.com/akt9802/snipio/blob/main/src/lib/clipboard.ts"
click node_folder_api "https://github.com/akt9802/snipio/blob/main/src/lib/folderWatch.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_landing,node_room_page,node_tablet_user toneBlue
class node_host,node_extension_capture,node_extension_worker,node_folder_watch,node_slide_tools,node_folder_api toneAmber
class node_session,node_realtime,node_socket_server,node_room_state,node_room_events,node_web_rtc toneMint
class node_tablet_feed,node_receiving_tile,node_autosave,node_clipboard toneRose
class node_student,node_lecture,node_notes_app toneIndigo
```

## Components

### Room Entry

- [Room Creation](https://github.com/akt9802/snipio/blob/main/src/components/landing/CreateRoomButton.tsx): `src/components/landing/CreateRoomButton.tsx`
- [Room Page](https://github.com/akt9802/snipio/blob/main/src/app/room/%5BroomId%5D/page.tsx): `src/app/room/[roomId]/page.tsx`

### Slide Capture

- [Host Dashboard](https://github.com/akt9802/snipio/blob/main/src/components/room/HostDashboard.tsx): `src/components/room/HostDashboard.tsx`
- [Extension Capture](https://github.com/akt9802/snipio/blob/main/extension/content.ts): `extension/content.ts`
- [Extension Worker](https://github.com/akt9802/snipio/blob/main/extension/background.ts): `extension/background.ts`
- [Folder Watch](https://github.com/akt9802/snipio/blob/main/src/components/room/FolderWatch.tsx): `src/components/room/FolderWatch.tsx`
- [Slide Conversion](https://github.com/akt9802/snipio/blob/main/src/lib/slides.ts): `src/lib/slides.ts`
- [Folder Access](https://github.com/akt9802/snipio/blob/main/src/lib/folderWatch.ts): `src/lib/folderWatch.ts`

### Realtime Relay

- [Room Session](https://github.com/akt9802/snipio/blob/main/src/lib/useRoomSession.ts): `src/lib/useRoomSession.ts`
- [Realtime Client](https://github.com/akt9802/snipio/blob/main/src/lib/realtime.ts): `src/lib/realtime.ts`
- [Socket Server](https://github.com/akt9802/snipio/blob/main/server/socketServer.ts): `server/socketServer.ts`
- [Ephemeral Rooms](https://github.com/akt9802/snipio/blob/main/server/socketServer.ts): `server/socketServer.ts`
- [Room Protocol](https://github.com/akt9802/snipio/blob/main/src/lib/roomEvents.ts): `src/lib/roomEvents.ts`
- **WebRTC P2P**

### Tablet Receive

- [Tablet Feed](https://github.com/akt9802/snipio/blob/main/src/components/room/TabletFeed.tsx): `src/components/room/TabletFeed.tsx`
- [Receiving Tile](https://github.com/akt9802/snipio/blob/main/src/components/room/ReceivingTile.tsx): `src/components/room/ReceivingTile.tsx`
- [Auto-Save](https://github.com/akt9802/snipio/blob/main/src/lib/autoSave.ts): `src/lib/autoSave.ts`
- [Clipboard Copy](https://github.com/akt9802/snipio/blob/main/src/lib/clipboard.ts): `src/lib/clipboard.ts`

### Other components

- **Student**
- **Lecture Video**
- **Tablet User**
- **Notes App**

## Connections

- Student → Room Creation: creates room
- Room Creation → Room Page: opens room
- Student → Host Dashboard: supplies images
- Lecture Video → Extension Capture: provides frame
- Student → Extension Capture: triggers capture
- Extension Capture → Extension Worker: sends capture
- Extension Worker → Realtime Client: emits slide
- Host Dashboard → Folder Watch: starts watch
- Folder Watch → Folder Access: reads files
- Folder Watch → Host Dashboard: delivers files
- Host Dashboard → Slide Conversion: converts images
- Host Dashboard → Room Session: sends slide
- Room Session → Realtime Client: emits events
- Room Page → Room Session: joins room
- Realtime Client → Socket Server: exchanges events
- Socket Server → Ephemeral Rooms: maintains rooms
- Socket Server → Room Protocol: validates payloads
- Socket Server → Tablet Feed: broadcasts slides
- Tablet User → Room Page: joins by code
- Tablet Feed → Receiving Tile: renders slides
- Tablet Feed → Auto-Save: auto-saves
- Tablet Feed → Clipboard Copy: copies image
- Tablet User → Receiving Tile: drags slide
- Receiving Tile → Notes App: drops image
- Tablet User → Notes App: pastes image
- Socket Server → WebRTC P2P: direct transfer
- WebRTC P2P → Tablet Feed: sends slide