# keytlingeyl/presynce architecture

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

- Interactive diagram: https://gitdiagram.com/keytlingeyl/presynce
- Repository: https://github.com/keytlingeyl/presynce

## Overview

Presynce combines a Chrome extension that captures and formats Google Meet attendance with a local-first web dashboard for managing sessions, groups, and reports. The main workflow runs from meeting capture to saved session, then record review, group assignment, matrix reporting, and export. Optional Google sign-in enables cloud backup and restore. The README documents the product-level flow; source excerpts show selected capture, dashboard, group, matrix, authentication, and backup behavior, so other connections are omitted where implementation evidence was unavailable.

Main entry points: [`web/src/features/groupManager.js`](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/groupManager.js) (Group management), [`web/src/features/attendanceDashboard.js`](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/attendanceDashboard.js) (Records dashboard), [`web/src/features/recordViewer.js`](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/recordViewer.js) (Session viewer), [`web/src/features/matrixViewer.js`](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/matrixViewer.js) (Matrix report)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Meeting capture"]
  node_extension_capture["Capture and format<br/>[content.js]"]
end

subgraph group_records["Session records"]
  node_records_dashboard["Records dashboard"]
  node_session_viewer["Session viewer<br/>[recordViewer.js]"]
  node_local_data[("Browser storage")]
  node_tutorial_library["Tutorial library<br/>[tutorialLibrary.js]"]
  node_reusable_modal["Reusable modal<br/>[reusableModal.js]"]
end

subgraph group_groups_reports["Groups and reports"]
  node_group_manager["Group management<br/>[groupManager.js]"]
  node_group_creation["Create group"]
  node_group_assignment["Assign group"]
  node_matrix_report["Matrix report<br/>[matrixViewer.js]"]
end

subgraph group_identity_backup["Identity and backup"]
  node_sign_in["Sign-in page<br/>[signinPage.js]"]
  node_auth_manager["Authentication<br/>[authManager.js]"]
  node_backup_manager["Backup and restore<br/>[backupManager.js]"]
end

node_meeting_participants(("Meet participants"))
node_meeting_host(("Meeting host"))
node_meet_ui["Google Meet UI"]
node_firebase_auth["Firebase Authentication"]
node_firestore[("Cloud records")]

node_meeting_participants -->|"join meeting"| node_meet_ui
node_meeting_host -->|"starts tracking"| node_extension_capture
node_meet_ui -->|"reads attendance"| node_extension_capture
node_extension_capture -->|"opens compiled session"| node_records_dashboard
node_records_dashboard -->|"reads and saves"| node_local_data
node_session_viewer -->|"reads session"| node_local_data
node_records_dashboard -->|"opens record"| node_session_viewer
node_records_dashboard -->|"assigns sessions"| node_group_assignment
node_group_creation -->|"creates groups"| node_group_manager
node_group_assignment -->|"tags sessions"| node_group_manager
node_group_manager -->|"stores groups"| node_local_data
node_matrix_report -->|"gets group rules"| node_group_manager
node_matrix_report -->|"reads sessions"| node_local_data
node_session_viewer -->|"checks group hosts"| node_group_manager
node_session_viewer -->|"exports report"| node_meeting_host
node_matrix_report -->|"exports matrix"| node_meeting_host
node_meeting_host -->|"browses guidance"| node_tutorial_library
node_sign_in -->|"signs in"| node_auth_manager
node_auth_manager -->|"authenticates with"| node_firebase_auth
node_backup_manager -->|"backs up and restores"| node_local_data
node_backup_manager -->|"reads and writes"| node_firestore
node_sign_in -->|"offers cloud backup"| node_backup_manager

click node_extension_capture "https://github.com/keytlingeyl/presynce/blob/main/extension/content.js"
click node_records_dashboard "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/attendanceDashboard.js"
click node_session_viewer "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/recordViewer.js"
click node_group_manager "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/groupManager.js"
click node_group_creation "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/createGroupFolder.js"
click node_group_assignment "https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/assignGroupModal.js"
click node_matrix_report "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/matrixViewer.js"
click node_tutorial_library "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/tutorialLibrary.js"
click node_sign_in "https://github.com/keytlingeyl/presynce/blob/main/web/src/features/signinPage.js"
click node_auth_manager "https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/authManager.js"
click node_backup_manager "https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/backupManager.js"
click node_reusable_modal "https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/reusableModal.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_extension_capture,node_meet_ui toneBlue
class node_records_dashboard,node_session_viewer,node_local_data,node_tutorial_library,node_reusable_modal,node_firestore toneAmber
class node_group_manager,node_group_creation,node_group_assignment,node_matrix_report toneMint
class node_sign_in,node_auth_manager,node_backup_manager toneRose
class node_meeting_participants,node_meeting_host,node_firebase_auth toneIndigo
```

## Components

### Meeting capture

- [Capture and format](https://github.com/keytlingeyl/presynce/blob/main/extension/content.js): `extension/content.js`

### Session records

- [Records dashboard](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/attendanceDashboard.js): `web/src/features/attendanceDashboard.js`
- [Session viewer](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/recordViewer.js): `web/src/features/recordViewer.js`
- **Browser storage**
- [Tutorial library](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/tutorialLibrary.js): `web/src/features/tutorialLibrary.js`
- [Reusable modal](https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/reusableModal.js): `web/src/shared/reusableModal.js`

### Groups and reports

- [Group management](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/groupManager.js): `web/src/features/groupManager.js`
- [Create group](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/createGroupFolder.js): `web/src/features/createGroupFolder.js`
- [Assign group](https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/assignGroupModal.js): `web/src/shared/assignGroupModal.js`
- [Matrix report](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/matrixViewer.js): `web/src/features/matrixViewer.js`

### Identity and backup

- [Sign-in page](https://github.com/keytlingeyl/presynce/blob/main/web/src/features/signinPage.js): `web/src/features/signinPage.js`
- [Authentication](https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/authManager.js): `web/src/shared/authManager.js`
- [Backup and restore](https://github.com/keytlingeyl/presynce/blob/main/web/src/shared/backupManager.js): `web/src/shared/backupManager.js`

### Other components

- **Meet participants**
- **Meeting host**
- **Google Meet UI**
- **Firebase Authentication**
- **Cloud records**

## Connections

- Meet participants → Google Meet UI: join meeting (evidence: `README.md`)
- Meeting host → Capture and format: starts tracking (evidence: `README.md`)
- Google Meet UI → Capture and format: reads attendance (evidence: `README.md`)
- Capture and format → Records dashboard: opens compiled session (evidence: `README.md`)
- Records dashboard → Browser storage: reads and saves (evidence: `web/src/features/attendanceDashboard.js`)
- Session viewer → Browser storage: reads session (evidence: `web/src/features/recordViewer.js`)
- Records dashboard → Session viewer: opens record (evidence: `web/src/features/attendanceDashboard.js`)
- Records dashboard → Assign group: assigns sessions (evidence: `README.md`)
- Create group → Group management: creates groups (evidence: `README.md`)
- Assign group → Group management: tags sessions (evidence: `README.md`)
- Group management → Browser storage: stores groups (evidence: `README.md`)
- Matrix report → Group management: gets group rules (evidence: `web/src/features/matrixViewer.js`)
- Matrix report → Browser storage: reads sessions (evidence: `web/src/features/matrixViewer.js`)
- Session viewer → Group management: checks group hosts (evidence: `web/src/features/recordViewer.js`)
- Session viewer → Meeting host: exports report (evidence: `README.md`)
- Matrix report → Meeting host: exports matrix (evidence: `README.md`)
- Meeting host → Tutorial library: browses guidance (evidence: `README.md`)
- Sign-in page → Authentication: signs in (evidence: `web/src/shared/authManager.js`)
- Authentication → Firebase Authentication: authenticates with (evidence: `web/src/shared/authManager.js`)
- Backup and restore → Browser storage: backs up and restores (evidence: `web/src/shared/backupManager.js`)
- Backup and restore → Cloud records: reads and writes (evidence: `web/src/shared/backupManager.js`)
- Sign-in page → Backup and restore: offers cloud backup (evidence: `README.md`)