# kcosta5/spark-note-sync architecture

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

- Interactive diagram: https://gitdiagram.com/kcosta5/spark-note-sync
- Repository: https://github.com/kcosta5/spark-note-sync

## Overview

This is a browser-based notes application: users organize notes into folders, edit and preview Markdown (including math, diagrams, and images), manage deleted notes, and can sync notes when online. The sampled page owns note and folder operations and calls the local database; the editor persists image blobs and renders note content. Sync and backup capabilities are represented by their source modules, but their implementations and the settings UI were not sampled, so those links are shown only where the excerpts support them.

Main entry points: [`src/pages/Index.tsx`](https://github.com/kcosta5/spark-note-sync/blob/main/src/pages/Index.tsx) (Notes workspace), [`src/lib/db.ts`](https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/db.ts) (IndexedDB data), [`src/components/NoteEditor.tsx`](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/NoteEditor.tsx) (Note editor), [`src/lib/sync.ts`](https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/sync.ts) (Note synchronization)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["App routing<br/>[App.tsx]"]
  node_workspace["Notes workspace<br/>[Index.tsx]"]
  node_settings["Settings<br/>[SettingsDialog.tsx]"]
  node_install["Install prompt<br/>[InstallPrompt.tsx]"]
end

subgraph group_notes["Notes and Editing"]
  node_folders["Folder manager<br/>[FolderManager.tsx]"]
  node_listing["Notes list<br/>[NotesList.tsx]"]
  node_editor["Note editor<br/>[NoteEditor.tsx]"]
  node_diagrams["Mermaid rendering<br/>[MermaidBlock.tsx]"]
end

subgraph group_persistence["Local Persistence"]
  node_localdb[("IndexedDB data<br/>[db.ts]")]
end

subgraph group_integrations["Sync and Backup"]
  node_syncstatus["Sync status<br/>[SyncIndicator.tsx]"]
  node_sync["Note synchronization<br/>[sync.ts]"]
  node_backup["Backup operations<br/>[backup.ts]"]
  node_supabase["Supabase client<br/>[client.ts]"]
end

node_user(("User"))
node_browser[("Browser storage")]
node_remote[("Supabase service")]

node_user -->|"opens app"| node_entry
node_entry -->|"routes to"| node_workspace
node_user -->|"uses"| node_workspace
node_workspace -->|"loads and saves"| node_localdb
node_workspace -->|"renders"| node_folders
node_workspace -->|"renders"| node_listing
node_workspace -->|"renders"| node_editor
node_workspace -->|"requests sync"| node_sync
node_editor -->|"stores images"| node_localdb
node_editor -->|"renders diagrams"| node_diagrams
node_settings -.->|"stores theme"| node_browser
node_install -.->|"uses install events"| node_browser
node_sync -->|"reads and marks notes"| node_localdb
node_sync -.->|"uses client"| node_supabase
node_supabase -.->|"connects"| node_remote
node_backup -.->|"uses local data"| node_localdb

click node_entry "https://github.com/kcosta5/spark-note-sync/blob/main/src/App.tsx"
click node_workspace "https://github.com/kcosta5/spark-note-sync/blob/main/src/pages/Index.tsx"
click node_folders "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/FolderManager.tsx"
click node_listing "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/NotesList.tsx"
click node_editor "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/NoteEditor.tsx"
click node_diagrams "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/MermaidBlock.tsx"
click node_settings "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/SettingsDialog.tsx"
click node_syncstatus "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/SyncIndicator.tsx"
click node_install "https://github.com/kcosta5/spark-note-sync/blob/main/src/components/InstallPrompt.tsx"
click node_localdb "https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/db.ts"
click node_sync "https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/sync.ts"
click node_backup "https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/backup.ts"
click node_supabase "https://github.com/kcosta5/spark-note-sync/blob/main/src/integrations/supabase/client.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_entry,node_workspace,node_settings,node_install,node_user toneBlue
class node_folders,node_listing,node_editor,node_diagrams,node_browser,node_remote toneAmber
class node_localdb toneMint
class node_syncstatus,node_sync,node_backup,node_supabase toneRose
```

## Components

### Application

- [App routing](https://github.com/kcosta5/spark-note-sync/blob/main/src/App.tsx): `src/App.tsx`
- [Notes workspace](https://github.com/kcosta5/spark-note-sync/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Settings](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/SettingsDialog.tsx): `src/components/SettingsDialog.tsx`
- [Install prompt](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/InstallPrompt.tsx): `src/components/InstallPrompt.tsx`

### Notes and Editing

- [Folder manager](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/FolderManager.tsx): `src/components/FolderManager.tsx`
- [Notes list](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/NotesList.tsx): `src/components/NotesList.tsx`
- [Note editor](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/NoteEditor.tsx): `src/components/NoteEditor.tsx`
- [Mermaid rendering](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/MermaidBlock.tsx): `src/components/MermaidBlock.tsx`

### Local Persistence

- [IndexedDB data](https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/db.ts): `src/lib/db.ts`

### Sync and Backup

- [Sync status](https://github.com/kcosta5/spark-note-sync/blob/main/src/components/SyncIndicator.tsx): `src/components/SyncIndicator.tsx`
- [Note synchronization](https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/sync.ts): `src/lib/sync.ts`
- [Backup operations](https://github.com/kcosta5/spark-note-sync/blob/main/src/lib/backup.ts): `src/lib/backup.ts`
- [Supabase client](https://github.com/kcosta5/spark-note-sync/blob/main/src/integrations/supabase/client.ts): `src/integrations/supabase/client.ts`

### Other components

- **User**
- **Browser storage**
- **Supabase service**

## Connections

- User → App routing: opens app
- App routing → Notes workspace: routes to
- User → Notes workspace: uses
- Notes workspace → IndexedDB data: loads and saves
- Notes workspace → Folder manager: renders
- Notes workspace → Notes list: renders
- Notes workspace → Note editor: renders
- Notes workspace → Note synchronization: requests sync
- Note editor → IndexedDB data: stores images
- Note editor → Mermaid rendering: renders diagrams
- Settings → Browser storage: stores theme
- Install prompt → Browser storage: uses install events
- Note synchronization → IndexedDB data: reads and marks notes
- Note synchronization → Supabase client: uses client
- Supabase client → Supabase service: connects
- Backup operations → IndexedDB data: uses local data