# mohammad-hamedi/note-flow architecture

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

- Interactive diagram: https://gitdiagram.com/mohammad-hamedi/note-flow
- Repository: https://github.com/mohammad-hamedi/note-flow

## Overview

NoteFlow is an authenticated, browser-local notes workspace. A signed-in user enters the app, browses and searches notes by text, tag, filter, or notebook, edits a note in rich-text or Markdown mode, and can organize, share, or export it. The central state hook filters and persists note data; preferences separately cover theme and locale. The README documents several capabilities whose implementation wiring was not sampled, so those branches are shown only where the tree or excerpts support them.

Main entry points: [`components/note-editor.tsx`](https://github.com/mohammad-hamedi/note-flow/blob/main/components/note-editor.tsx) (Note editor), [`hooks/use-notes.ts`](https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-notes.ts) (Note state and filtering), [`components/app-shell.tsx`](https://github.com/mohammad-hamedi/note-flow/blob/main/components/app-shell.tsx) (Workspace shell), [`contexts/app-preferences.tsx`](https://github.com/mohammad-hamedi/note-flow/blob/main/contexts/app-preferences.tsx) (Theme and locale)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and access"]
  node_app_page["App route<br/>[page.tsx]"]
  node_sign_in["Sign-in screen<br/>[sign-in-screen.tsx]"]
  node_providers["App providers<br/>[providers.tsx]"]
end

subgraph group_workspace["Notes workspace"]
  node_shell["Workspace shell<br/>[app-shell.tsx]"]
  node_sidebar["Navigation and notebooks<br/>[sidebar.tsx]"]
  node_notes_list["Search and note list<br/>[notes-list.tsx]"]
  node_note_editor["Note editor<br/>[note-editor.tsx]"]
end

subgraph group_state["State and persistence"]
  node_notes_state["Note state and filtering<br/>[use-notes.ts]"]
  node_storage["Storage helpers<br/>[storage.ts]"]
  node_note_types["Note model<br/>[types.ts]"]
  node_notebook_utils["Notebook hierarchy<br/>[notebooks.ts]"]
end

subgraph group_capabilities["Writing and preferences"]
  node_rich_editor["Rich-text editing"]
  node_markdown_editor["Markdown editing"]
  node_undo_redo["Undo and redo<br/>[use-undo-redo.ts]"]
  node_export["Note export<br/>[export.ts]"]
  node_export_modal["Export options<br/>[export-modal.tsx]"]
  node_shortcuts["Keyboard shortcuts"]
  node_preferences["Theme and locale"]
  node_translations["English and Persian<br/>[index.ts]"]
end

node_user(("User"))
node_clerk{{"Clerk authentication"}}
node_browser[("Browser storage")]
node_clipboard{{"Clipboard"}}

node_user -->|"requests access"| node_sign_in
node_sign_in -->|"authenticates with"| node_clerk
node_user -->|"uses workspace"| node_app_page
node_app_page -->|"renders"| node_shell
node_providers -->|"provides preferences"| node_preferences
node_shell -->|"manages notes through"| node_notes_state
node_shell -->|"renders"| node_sidebar
node_shell -->|"renders"| node_notes_list
node_shell -->|"renders"| node_note_editor
node_notes_list -->|"searches and selects"| node_notes_state
node_sidebar -->|"chooses notebook"| node_notes_state
node_note_editor -->|"updates and organizes"| node_notes_state
node_notes_state -->|"reads and writes"| node_storage
node_storage -->|"persists JSON"| node_browser
node_notes_state -->|"uses note model"| node_note_types
node_notes_state -.->|"notebook operations"| node_notebook_utils
node_note_editor -->|"edits rich text"| node_rich_editor
node_note_editor -->|"edits Markdown"| node_markdown_editor
node_note_editor -->|"uses history"| node_undo_redo
node_note_editor -->|"opens export"| node_export_modal
node_export_modal -->|"exports notes"| node_export
node_note_editor -->|"copies note text"| node_clipboard
node_shell -.->|"handles shortcuts"| node_shortcuts
node_preferences -->|"reads and writes"| node_storage
node_preferences -->|"translates UI"| node_translations

click node_app_page "https://github.com/mohammad-hamedi/note-flow/blob/main/app/page.tsx"
click node_sign_in "https://github.com/mohammad-hamedi/note-flow/blob/main/app/sign-in/sign-in-screen.tsx"
click node_providers "https://github.com/mohammad-hamedi/note-flow/blob/main/app/providers.tsx"
click node_shell "https://github.com/mohammad-hamedi/note-flow/blob/main/components/app-shell.tsx"
click node_sidebar "https://github.com/mohammad-hamedi/note-flow/blob/main/components/sidebar.tsx"
click node_notes_list "https://github.com/mohammad-hamedi/note-flow/blob/main/components/notes-list.tsx"
click node_note_editor "https://github.com/mohammad-hamedi/note-flow/blob/main/components/note-editor.tsx"
click node_notes_state "https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-notes.ts"
click node_storage "https://github.com/mohammad-hamedi/note-flow/blob/main/lib/storage.ts"
click node_note_types "https://github.com/mohammad-hamedi/note-flow/blob/main/lib/types.ts"
click node_notebook_utils "https://github.com/mohammad-hamedi/note-flow/blob/main/lib/notebooks.ts"
click node_rich_editor "https://github.com/mohammad-hamedi/note-flow/blob/main/components/rich-text-editor.tsx"
click node_markdown_editor "https://github.com/mohammad-hamedi/note-flow/blob/main/components/markdown-editor.tsx"
click node_undo_redo "https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-undo-redo.ts"
click node_export "https://github.com/mohammad-hamedi/note-flow/blob/main/lib/export.ts"
click node_export_modal "https://github.com/mohammad-hamedi/note-flow/blob/main/components/export-modal.tsx"
click node_shortcuts "https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-keyboard-shortcuts.ts"
click node_preferences "https://github.com/mohammad-hamedi/note-flow/blob/main/contexts/app-preferences.tsx"
click node_translations "https://github.com/mohammad-hamedi/note-flow/blob/main/lib/i18n/index.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_app_page,node_sign_in,node_providers,node_user toneBlue
class node_shell,node_sidebar,node_notes_list,node_note_editor,node_browser toneAmber
class node_notes_state,node_storage,node_note_types,node_notebook_utils toneMint
class node_rich_editor,node_markdown_editor,node_undo_redo,node_export,node_export_modal,node_shortcuts,node_preferences,node_translations toneRose
class node_clerk,node_clipboard toneIndigo
```

## Components

### App and access

- [App route](https://github.com/mohammad-hamedi/note-flow/blob/main/app/page.tsx): `app/page.tsx`
- [Sign-in screen](https://github.com/mohammad-hamedi/note-flow/blob/main/app/sign-in/sign-in-screen.tsx): `app/sign-in/sign-in-screen.tsx`
- [App providers](https://github.com/mohammad-hamedi/note-flow/blob/main/app/providers.tsx): `app/providers.tsx`

### Notes workspace

- [Workspace shell](https://github.com/mohammad-hamedi/note-flow/blob/main/components/app-shell.tsx): `components/app-shell.tsx`
- [Navigation and notebooks](https://github.com/mohammad-hamedi/note-flow/blob/main/components/sidebar.tsx): `components/sidebar.tsx`
- [Search and note list](https://github.com/mohammad-hamedi/note-flow/blob/main/components/notes-list.tsx): `components/notes-list.tsx`
- [Note editor](https://github.com/mohammad-hamedi/note-flow/blob/main/components/note-editor.tsx): `components/note-editor.tsx`

### State and persistence

- [Note state and filtering](https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-notes.ts): `hooks/use-notes.ts`
- [Storage helpers](https://github.com/mohammad-hamedi/note-flow/blob/main/lib/storage.ts): `lib/storage.ts`
- [Note model](https://github.com/mohammad-hamedi/note-flow/blob/main/lib/types.ts): `lib/types.ts`
- [Notebook hierarchy](https://github.com/mohammad-hamedi/note-flow/blob/main/lib/notebooks.ts): `lib/notebooks.ts`

### Writing and preferences

- [Rich-text editing](https://github.com/mohammad-hamedi/note-flow/blob/main/components/rich-text-editor.tsx): `components/rich-text-editor.tsx`
- [Markdown editing](https://github.com/mohammad-hamedi/note-flow/blob/main/components/markdown-editor.tsx): `components/markdown-editor.tsx`
- [Undo and redo](https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-undo-redo.ts): `hooks/use-undo-redo.ts`
- [Note export](https://github.com/mohammad-hamedi/note-flow/blob/main/lib/export.ts): `lib/export.ts`
- [Export options](https://github.com/mohammad-hamedi/note-flow/blob/main/components/export-modal.tsx): `components/export-modal.tsx`
- [Keyboard shortcuts](https://github.com/mohammad-hamedi/note-flow/blob/main/hooks/use-keyboard-shortcuts.ts): `hooks/use-keyboard-shortcuts.ts`
- [Theme and locale](https://github.com/mohammad-hamedi/note-flow/blob/main/contexts/app-preferences.tsx): `contexts/app-preferences.tsx`
- [English and Persian](https://github.com/mohammad-hamedi/note-flow/blob/main/lib/i18n/index.ts): `lib/i18n/index.ts`

### Other components

- **User**
- **Clerk authentication**
- **Browser storage**
- **Clipboard**

## Connections

- User → Sign-in screen: requests access
- Sign-in screen → Clerk authentication: authenticates with
- User → App route: uses workspace
- App route → Workspace shell: renders
- App providers → Theme and locale: provides preferences
- Workspace shell → Note state and filtering: manages notes through
- Workspace shell → Navigation and notebooks: renders
- Workspace shell → Search and note list: renders
- Workspace shell → Note editor: renders
- Search and note list → Note state and filtering: searches and selects
- Navigation and notebooks → Note state and filtering: chooses notebook
- Note editor → Note state and filtering: updates and organizes
- Note state and filtering → Storage helpers: reads and writes
- Storage helpers → Browser storage: persists JSON
- Note state and filtering → Note model: uses note model
- Note state and filtering → Notebook hierarchy: notebook operations
- Note editor → Rich-text editing: edits rich text
- Note editor → Markdown editing: edits Markdown
- Note editor → Undo and redo: uses history
- Note editor → Export options: opens export
- Export options → Note export: exports notes
- Note editor → Clipboard: copies note text
- Workspace shell → Keyboard shortcuts: handles shortcuts
- Theme and locale → Storage helpers: reads and writes
- Theme and locale → English and Persian: translates UI