How kcosta5/spark-note-sync works
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: Index.tsx Notes workspace · db.ts IndexedDB data · NoteEditor.tsx Note editor · sync.ts Note synchronization
Components 16
Application
- App routing
src/App.tsx - Notes workspace
src/pages/Index.tsx - Settings
src/components/SettingsDialog.tsx - Install prompt
src/components/InstallPrompt.tsx
Notes and Editing
- Folder manager
src/components/FolderManager.tsx - Notes list
src/components/NotesList.tsx - Note editor
src/components/NoteEditor.tsx - Mermaid rendering
src/components/MermaidBlock.tsx
Local Persistence
- IndexedDB data
src/lib/db.ts
Sync and Backup
- Sync status
src/components/SyncIndicator.tsx - Note synchronization
src/lib/sync.ts - Backup operations
src/lib/backup.ts - Supabase client
src/integrations/supabase/client.ts
Other components
- User
- Browser storage
- Supabase service
Connections 16
- 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