# juinaik-1/rave2.0 architecture

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

- Interactive diagram: https://gitdiagram.com/juinaik-1/rave2.0
- Repository: https://github.com/juinaik-1/rave2.0

## Overview

Nook is a browser-based watch-party product with a separate API: people sign in or join rooms, coordinate playback and conversation, and can use voice together. Signed-in users can also select private Drive media or submit eligible URLs for conversion, then share playable streams. The graph separates room collaboration, identity, and media processing from the API’s Drive and stream services. Edges cite excerpted files or documented capabilities; some page-to-hook and backend relationships are supported by the SOURCE INDEX rather than inspected implementation excerpts.

Main entry points: [`src/pages/Room.jsx`](https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Room.jsx) (Watch room), [`src/App.jsx`](https://github.com/juinaik-1/rave2.0/blob/master/src/App.jsx) (Routes and access), [`server/server.js`](https://github.com/juinaik-1/rave2.0/blob/master/server/server.js) (HTTP API routes), [`server/jobs.js`](https://github.com/juinaik-1/rave2.0/blob/master/server/jobs.js) (Conversion queue)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Web experience"]
  node_app["Routes and access<br/>[App.jsx]"]
  node_home["Room discovery<br/>[Home.jsx]"]
end

subgraph group_collaboration["Room collaboration"]
  node_room["Watch room<br/>[Room.jsx]"]
  node_roomchannel["Room channel<br/>[useRoomChannel.js]"]
  node_chathook["Chat state<br/>[useChat.js]"]
  node_chatui["Chat panel<br/>[Chat.jsx]"]
  node_videosync["Playback sync<br/>[useVideoSync.js]"]
  node_player["Video player<br/>[VideoPlayer.jsx]"]
  node_voice["Voice<br/>[useVoice.js]"]
  node_voiceui["Voice panel<br/>[VoicePanel.jsx]"]
  node_presence["Participant list<br/>[UserList.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_authcontext["Session context<br/>[AuthContext.jsx]"]
  node_signin["Sign-in page<br/>[SignIn.jsx]"]
  node_apiutil["API client<br/>[api.js]"]
end

subgraph group_media["Media workflows"]
  node_driveui["Drive source<br/>[DriveSource.jsx]"]
  node_picker["Drive picker<br/>[useDrivePicker.js]"]
  node_convertpage["Convert page<br/>[Convert.jsx]"]
  node_conversion["Conversion client<br/>[useConversion.js]"]
end

subgraph group_backend["API services"]
  node_server["HTTP API routes<br/>[server.js]"]
  node_authservice["Google and session auth<br/>[auth.js]"]
  node_driveoauth["Drive authorization<br/>[driveOAuth.js]"]
  node_tokenstore[("Encrypted token store<br/>[tokenStore.js]")]
  node_streams["Signed media streams<br/>[streams.js]"]
  node_probe["Media inspection<br/>[probe.js]"]
  node_jobs["Conversion queue<br/>[jobs.js]"]
  node_convert["Media conversion<br/>[convert.js]"]
end

node_person(("Viewer"))
node_supabase[("Supabase<br/>[supabase.js]")]
node_google["Google services"]

node_person -->|"uses"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_room
node_app -->|"routes to"| node_signin
node_app -->|"protects route"| node_convertpage
node_home -.->|"starts or joins"| node_room
node_room -->|"uses"| node_roomchannel
node_room -->|"uses"| node_chathook
node_room -->|"uses"| node_videosync
node_room -->|"uses"| node_voice
node_room -->|"renders"| node_chatui
node_room -->|"renders"| node_player
node_room -->|"renders"| node_voiceui
node_room -->|"renders"| node_presence
node_roomchannel -->|"uses"| node_supabase
node_chathook -->|"uses"| node_supabase
node_room -->|"uses"| node_authcontext
node_signin -->|"uses"| node_authcontext
node_authcontext -->|"calls"| node_apiutil
node_videosync -->|"requests stream access"| node_apiutil
node_driveui -->|"uses"| node_picker
node_convertpage -->|"renders"| node_driveui
node_convertpage -->|"uses"| node_conversion
node_conversion -->|"calls"| node_apiutil
node_apiutil -->|"sends API requests"| node_server
node_server -->|"authenticates"| node_authservice
node_server -->|"routes Drive operations"| node_driveoauth
node_server -->|"registers and serves"| node_streams
node_server -->|"creates and cancels"| node_jobs
node_driveoauth -->|"stores encrypted tokens"| node_tokenstore
node_driveoauth -->|"authorizes and fetches"| node_google
node_authservice -->|"verifies identity"| node_google
node_streams -->|"reads Drive media"| node_driveoauth
node_streams -->|"inspects media"| node_probe
node_jobs -->|"inspects input"| node_probe
node_jobs -->|"runs conversion"| node_convert
node_jobs -->|"registers output stream"| node_streams

click node_app "https://github.com/juinaik-1/rave2.0/blob/master/src/App.jsx"
click node_home "https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Home.jsx"
click node_room "https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Room.jsx"
click node_roomchannel "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useRoomChannel.js"
click node_chathook "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useChat.js"
click node_chatui "https://github.com/juinaik-1/rave2.0/blob/master/src/components/Chat.jsx"
click node_videosync "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useVideoSync.js"
click node_player "https://github.com/juinaik-1/rave2.0/blob/master/src/components/VideoPlayer.jsx"
click node_voice "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useVoice.js"
click node_voiceui "https://github.com/juinaik-1/rave2.0/blob/master/src/components/VoicePanel.jsx"
click node_presence "https://github.com/juinaik-1/rave2.0/blob/master/src/components/UserList.jsx"
click node_supabase "https://github.com/juinaik-1/rave2.0/blob/master/src/supabase.js"
click node_authcontext "https://github.com/juinaik-1/rave2.0/blob/master/src/context/AuthContext.jsx"
click node_signin "https://github.com/juinaik-1/rave2.0/blob/master/src/pages/SignIn.jsx"
click node_apiutil "https://github.com/juinaik-1/rave2.0/blob/master/src/utils/api.js"
click node_driveui "https://github.com/juinaik-1/rave2.0/blob/master/src/components/DriveSource.jsx"
click node_picker "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useDrivePicker.js"
click node_convertpage "https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Convert.jsx"
click node_conversion "https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useConversion.js"
click node_server "https://github.com/juinaik-1/rave2.0/blob/master/server/server.js"
click node_authservice "https://github.com/juinaik-1/rave2.0/blob/master/server/auth.js"
click node_driveoauth "https://github.com/juinaik-1/rave2.0/blob/master/server/driveOAuth.js"
click node_tokenstore "https://github.com/juinaik-1/rave2.0/blob/master/server/tokenStore.js"
click node_streams "https://github.com/juinaik-1/rave2.0/blob/master/server/streams.js"
click node_probe "https://github.com/juinaik-1/rave2.0/blob/master/server/probe.js"
click node_jobs "https://github.com/juinaik-1/rave2.0/blob/master/server/jobs.js"
click node_convert "https://github.com/juinaik-1/rave2.0/blob/master/server/convert.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_home,node_person toneBlue
class node_room,node_roomchannel,node_chathook,node_chatui,node_videosync,node_player,node_voice,node_voiceui,node_presence,node_supabase toneAmber
class node_authcontext,node_signin,node_apiutil toneMint
class node_driveui,node_picker,node_convertpage,node_conversion toneRose
class node_server,node_authservice,node_driveoauth,node_tokenstore,node_streams,node_probe,node_jobs,node_convert,node_google toneIndigo
```

## Components

### Web experience

- [Routes and access](https://github.com/juinaik-1/rave2.0/blob/master/src/App.jsx): `src/App.jsx`
- [Room discovery](https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Home.jsx): `src/pages/Home.jsx`

### Room collaboration

- [Watch room](https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Room.jsx): `src/pages/Room.jsx`
- [Room channel](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useRoomChannel.js): `src/hooks/useRoomChannel.js`
- [Chat state](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useChat.js): `src/hooks/useChat.js`
- [Chat panel](https://github.com/juinaik-1/rave2.0/blob/master/src/components/Chat.jsx): `src/components/Chat.jsx`
- [Playback sync](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useVideoSync.js): `src/hooks/useVideoSync.js`
- [Video player](https://github.com/juinaik-1/rave2.0/blob/master/src/components/VideoPlayer.jsx): `src/components/VideoPlayer.jsx`
- [Voice](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useVoice.js): `src/hooks/useVoice.js`
- [Voice panel](https://github.com/juinaik-1/rave2.0/blob/master/src/components/VoicePanel.jsx): `src/components/VoicePanel.jsx`
- [Participant list](https://github.com/juinaik-1/rave2.0/blob/master/src/components/UserList.jsx): `src/components/UserList.jsx`

### Identity and access

- [Session context](https://github.com/juinaik-1/rave2.0/blob/master/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Sign-in page](https://github.com/juinaik-1/rave2.0/blob/master/src/pages/SignIn.jsx): `src/pages/SignIn.jsx`
- [API client](https://github.com/juinaik-1/rave2.0/blob/master/src/utils/api.js): `src/utils/api.js`

### Media workflows

- [Drive source](https://github.com/juinaik-1/rave2.0/blob/master/src/components/DriveSource.jsx): `src/components/DriveSource.jsx`
- [Drive picker](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useDrivePicker.js): `src/hooks/useDrivePicker.js`
- [Convert page](https://github.com/juinaik-1/rave2.0/blob/master/src/pages/Convert.jsx): `src/pages/Convert.jsx`
- [Conversion client](https://github.com/juinaik-1/rave2.0/blob/master/src/hooks/useConversion.js): `src/hooks/useConversion.js`

### API services

- [HTTP API routes](https://github.com/juinaik-1/rave2.0/blob/master/server/server.js): `server/server.js`
- [Google and session auth](https://github.com/juinaik-1/rave2.0/blob/master/server/auth.js): `server/auth.js`
- [Drive authorization](https://github.com/juinaik-1/rave2.0/blob/master/server/driveOAuth.js): `server/driveOAuth.js`
- [Encrypted token store](https://github.com/juinaik-1/rave2.0/blob/master/server/tokenStore.js): `server/tokenStore.js`
- [Signed media streams](https://github.com/juinaik-1/rave2.0/blob/master/server/streams.js): `server/streams.js`
- [Media inspection](https://github.com/juinaik-1/rave2.0/blob/master/server/probe.js): `server/probe.js`
- [Conversion queue](https://github.com/juinaik-1/rave2.0/blob/master/server/jobs.js): `server/jobs.js`
- [Media conversion](https://github.com/juinaik-1/rave2.0/blob/master/server/convert.js): `server/convert.js`

### Other components

- **Viewer**
- [Supabase](https://github.com/juinaik-1/rave2.0/blob/master/src/supabase.js): `src/supabase.js`
- **Google services**

## Connections

- Viewer → Routes and access: uses (evidence: `src/App.jsx`)
- Routes and access → Room discovery: routes to (evidence: `src/App.jsx`)
- Routes and access → Watch room: routes to (evidence: `src/App.jsx`)
- Routes and access → Sign-in page: routes to (evidence: `src/App.jsx`)
- Routes and access → Convert page: protects route (evidence: `src/App.jsx`)
- Room discovery → Watch room: starts or joins
- Watch room → Room channel: uses (evidence: `src/pages/Room.jsx`)
- Watch room → Chat state: uses (evidence: `src/pages/Room.jsx`)
- Watch room → Playback sync: uses (evidence: `src/pages/Room.jsx`)
- Watch room → Voice: uses (evidence: `src/pages/Room.jsx`)
- Watch room → Chat panel: renders (evidence: `src/pages/Room.jsx`)
- Watch room → Video player: renders (evidence: `src/pages/Room.jsx`)
- Watch room → Voice panel: renders (evidence: `src/pages/Room.jsx`)
- Watch room → Participant list: renders (evidence: `src/pages/Room.jsx`)
- Room channel → Supabase: uses (evidence: `src/hooks/useRoomChannel.js`)
- Chat state → Supabase: uses (evidence: `src/hooks/useChat.js`)
- Watch room → Session context: uses (evidence: `src/pages/Room.jsx`)
- Sign-in page → Session context: uses (evidence: `src/pages/SignIn.jsx`)
- Session context → API client: calls (evidence: `src/context/AuthContext.jsx`)
- Playback sync → API client: requests stream access (evidence: `src/hooks/useVideoSync.js`)
- Drive source → Drive picker: uses (evidence: `src/components/DriveSource.jsx`)
- Convert page → Drive source: renders (evidence: `src/pages/Convert.jsx`)
- Convert page → Conversion client: uses (evidence: `src/pages/Convert.jsx`)
- Conversion client → API client: calls (evidence: `src/hooks/useConversion.js`)
- API client → HTTP API routes: sends API requests (evidence: `README.md`)
- HTTP API routes → Google and session auth: authenticates (evidence: `server/server.js`)
- HTTP API routes → Drive authorization: routes Drive operations (evidence: `server/server.js`)
- HTTP API routes → Signed media streams: registers and serves (evidence: `server/server.js`)
- HTTP API routes → Conversion queue: creates and cancels (evidence: `server/server.js`)
- Drive authorization → Encrypted token store: stores encrypted tokens (evidence: `server/driveOAuth.js`)
- Drive authorization → Google services: authorizes and fetches (evidence: `server/driveOAuth.js`)
- Google and session auth → Google services: verifies identity (evidence: `README.md`)
- Signed media streams → Drive authorization: reads Drive media (evidence: `server/streams.js`)
- Signed media streams → Media inspection: inspects media (evidence: `server/streams.js`)
- Conversion queue → Media inspection: inspects input (evidence: `server/jobs.js`)
- Conversion queue → Media conversion: runs conversion (evidence: `server/jobs.js`)
- Conversion queue → Signed media streams: registers output stream (evidence: `server/jobs.js`)