# aryansaraogi/docs. architecture

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

- Interactive diagram: https://gitdiagram.com/aryansaraogi/docs.
- Repository: https://github.com/aryansaraogi/docs.

## Overview

Docs is a browser-only document manager: users create or drop files onto cards, edit and organize cards, preview or download attachments, and export/import backups. The main orchestration and storage calls are supported by sampled source; several UI and utility details are documented in the README but not fully sampled, so only documented capabilities and clear callback relationships are shown.

Main entry points: [`src/components/Foreground.jsx`](https://github.com/aryansaraogi/docs./blob/main/src/components/Foreground.jsx) (Workspace), [`src/backup.js`](https://github.com/aryansaraogi/docs./blob/main/src/backup.js) (Backup operations), [`src/components/FileViewer.jsx`](https://github.com/aryansaraogi/docs./blob/main/src/components/FileViewer.jsx) (File viewer), [`src/fileStore.js`](https://github.com/aryansaraogi/docs./blob/main/src/fileStore.js) (File store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Document interface"]
  node_app["App shell<br/>[App.jsx]"]
  node_background["Background<br/>[Background.jsx]"]
  node_foreground["Workspace<br/>[Foreground.jsx]"]
  node_form["Add form<br/>[AddCardForm.jsx]"]
  node_card["Document card<br/>[Card.jsx]"]
  node_viewer["File viewer<br/>[FileViewer.jsx]"]
  node_toast["Notifications<br/>[Toast.jsx]"]
end

subgraph group_management["Card management"]
  node_cards["Card data<br/>[cards.js]"]
  node_localstorage[("Browser localStorage")]
end

subgraph group_files["File handling"]
  node_filestore["File store<br/>[fileStore.js]"]
  node_indexeddb[("Browser IndexedDB")]
  node_fileutils["File utilities<br/>[fileUtils.js]"]
end

subgraph group_backup["Backup and restore"]
  node_backup["Backup operations<br/>[backup.js]"]
  node_zip["ZIP processing<br/>[backup.js]"]
end

node_user(("User"))

node_user -->|"uses workspace"| node_foreground
node_app -->|"renders"| node_foreground
node_app -->|"renders"| node_background
node_foreground -->|"opens form"| node_form
node_form -->|"submits card"| node_foreground
node_foreground -->|"renders cards"| node_card
node_card -->|"dispatches actions"| node_foreground
node_foreground -->|"opens preview"| node_viewer
node_foreground -->|"shows messages"| node_toast
node_foreground -->|"loads and merges"| node_cards
node_cards -->|"reads cards"| node_localstorage
node_foreground -->|"persists cards"| node_localstorage
node_foreground -->|"saves and deletes files"| node_filestore
node_filestore -->|"reads and writes"| node_indexeddb
node_foreground -->|"imports and exports"| node_backup
node_backup -->|"loads and saves files"| node_filestore
node_backup -->|"normalizes imported cards"| node_cards
node_backup -->|"encodes and decodes"| node_zip
node_backup -->|"downloads archive"| node_fileutils
node_viewer -->|"loads attachment"| node_filestore
node_viewer -->|"classifies preview"| node_fileutils
node_viewer -->|"requests download"| node_foreground
node_card -->|"formats file details"| node_fileutils
node_form -->|"formats file details"| node_fileutils

click node_app "https://github.com/aryansaraogi/docs./blob/main/src/App.jsx"
click node_background "https://github.com/aryansaraogi/docs./blob/main/src/components/Background.jsx"
click node_foreground "https://github.com/aryansaraogi/docs./blob/main/src/components/Foreground.jsx"
click node_form "https://github.com/aryansaraogi/docs./blob/main/src/components/AddCardForm.jsx"
click node_card "https://github.com/aryansaraogi/docs./blob/main/src/components/Card.jsx"
click node_viewer "https://github.com/aryansaraogi/docs./blob/main/src/components/FileViewer.jsx"
click node_toast "https://github.com/aryansaraogi/docs./blob/main/src/components/Toast.jsx"
click node_cards "https://github.com/aryansaraogi/docs./blob/main/src/cards.js"
click node_filestore "https://github.com/aryansaraogi/docs./blob/main/src/fileStore.js"
click node_fileutils "https://github.com/aryansaraogi/docs./blob/main/src/fileUtils.js"
click node_backup "https://github.com/aryansaraogi/docs./blob/main/src/backup.js"
click node_zip "https://github.com/aryansaraogi/docs./blob/main/src/backup.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_background,node_foreground,node_form,node_card,node_viewer,node_toast,node_user toneBlue
class node_cards,node_localstorage toneAmber
class node_filestore,node_indexeddb,node_fileutils toneMint
class node_backup,node_zip toneRose
```

## Components

### Document interface

- [App shell](https://github.com/aryansaraogi/docs./blob/main/src/App.jsx): `src/App.jsx`
- [Background](https://github.com/aryansaraogi/docs./blob/main/src/components/Background.jsx): `src/components/Background.jsx`
- [Workspace](https://github.com/aryansaraogi/docs./blob/main/src/components/Foreground.jsx): `src/components/Foreground.jsx`
- [Add form](https://github.com/aryansaraogi/docs./blob/main/src/components/AddCardForm.jsx): `src/components/AddCardForm.jsx`
- [Document card](https://github.com/aryansaraogi/docs./blob/main/src/components/Card.jsx): `src/components/Card.jsx`
- [File viewer](https://github.com/aryansaraogi/docs./blob/main/src/components/FileViewer.jsx): `src/components/FileViewer.jsx`
- [Notifications](https://github.com/aryansaraogi/docs./blob/main/src/components/Toast.jsx): `src/components/Toast.jsx`

### Card management

- [Card data](https://github.com/aryansaraogi/docs./blob/main/src/cards.js): `src/cards.js`
- **Browser localStorage**

### File handling

- [File store](https://github.com/aryansaraogi/docs./blob/main/src/fileStore.js): `src/fileStore.js`
- **Browser IndexedDB**
- [File utilities](https://github.com/aryansaraogi/docs./blob/main/src/fileUtils.js): `src/fileUtils.js`

### Backup and restore

- [Backup operations](https://github.com/aryansaraogi/docs./blob/main/src/backup.js): `src/backup.js`
- [ZIP processing](https://github.com/aryansaraogi/docs./blob/main/src/backup.js): `src/backup.js`

### Other components

- **User**

## Connections

- User → Workspace: uses workspace
- App shell → Workspace: renders
- App shell → Background: renders
- Workspace → Add form: opens form
- Add form → Workspace: submits card
- Workspace → Document card: renders cards
- Document card → Workspace: dispatches actions
- Workspace → File viewer: opens preview
- Workspace → Notifications: shows messages
- Workspace → Card data: loads and merges
- Card data → Browser localStorage: reads cards
- Workspace → Browser localStorage: persists cards
- Workspace → File store: saves and deletes files
- File store → Browser IndexedDB: reads and writes
- Workspace → Backup operations: imports and exports
- Backup operations → File store: loads and saves files
- Backup operations → Card data: normalizes imported cards
- Backup operations → ZIP processing: encodes and decodes
- Backup operations → File utilities: downloads archive
- File viewer → File store: loads attachment
- File viewer → File utilities: classifies preview
- File viewer → Workspace: requests download
- Document card → File utilities: formats file details
- Add form → File utilities: formats file details