# cyp777/my-notes-app architecture

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

- Interactive diagram: https://gitdiagram.com/cyp777/my-notes-app
- Repository: https://github.com/cyp777/my-notes-app

## Overview

My Notes is a note-taking app with a React interface and a FastAPI backend. The evidenced browser workflow is: users create or edit notes, filter them by text or tags, and save changes in browser local storage. Theme switching is a separate UI capability. The backend exposes a notes router and configures MongoDB, but the inspected frontend hook uses local storage rather than calling the API. Backend route internals were not sampled, so their database wiring is not asserted.

Main entry points: [`frontend/src/pages/Home.jsx`](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/pages/Home.jsx) (Home page), [`frontend/src/hooks/useNotes.jsx`](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/hooks/useNotes.jsx) (Notes state), [`frontend/src/main.jsx`](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/main.jsx) (React entry), [`frontend/src/App.jsx`](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/App.jsx) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["React interface"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App shell<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_search["Search bar<br/>[SearchBar.jsx]"]
  node_tagfilter["Tag filter<br/>[TagFilter.jsx]"]
  node_notelist["Note list<br/>[NoteList.jsx]"]
  node_notecard["Note card<br/>[NoteCard.jsx]"]
  node_editor["Note editor<br/>[NoteEditor.jsx]"]
  node_alert["Note alert<br/>[NoteAlert.jsx]"]
end

subgraph group_notes["Note workflow"]
  node_notes_hook["Notes state<br/>[useNotes.jsx]"]
end

subgraph group_backend["Backend API"]
  node_api["FastAPI app<br/>[main.py]"]
  node_routes["Notes routes<br/>[notes.py]"]
  node_model["Note models<br/>[note.py]"]
  node_db["Mongo connection<br/>[database.py]"]
end

subgraph group_state["Persistence and theme"]
  node_theme["Theme context<br/>[ThemeContext.jsx]"]
  node_localstore[("Browser storage")]
end

node_user(("User"))
node_browser["Browser"]
node_mongo[("MongoDB")]

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_home
node_home -->|"renders"| node_search
node_home -->|"renders"| node_tagfilter
node_home -->|"renders filtered notes"| node_notelist
node_notelist -->|"renders notes"| node_notecard
node_home -->|"opens editor"| node_editor
node_home -->|"uses state"| node_notes_hook
node_editor -->|"submits note"| node_home
node_home -->|"saves or deletes"| node_notes_hook
node_notes_hook -->|"reads and writes"| node_localstore
node_home -->|"uses theme"| node_theme
node_theme -->|"toggles document class"| node_browser
node_api -->|"mounts router"| node_routes
node_db -->|"connects"| node_mongo

click node_entry "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/main.jsx"
click node_app "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/pages/Home.jsx"
click node_search "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/SearchBar.jsx"
click node_tagfilter "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/TagFilter.jsx"
click node_notelist "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteList.jsx"
click node_notecard "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteCard.jsx"
click node_editor "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteEditor.jsx"
click node_alert "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteAlert.jsx"
click node_notes_hook "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/hooks/useNotes.jsx"
click node_theme "https://github.com/cyp777/my-notes-app/blob/main/frontend/src/context/ThemeContext.jsx"
click node_api "https://github.com/cyp777/my-notes-app/blob/main/backend/main.py"
click node_routes "https://github.com/cyp777/my-notes-app/blob/main/backend/routes/notes.py"
click node_model "https://github.com/cyp777/my-notes-app/blob/main/backend/models/note.py"
click node_db "https://github.com/cyp777/my-notes-app/blob/main/backend/database.py"

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_app,node_home,node_search,node_tagfilter,node_notelist,node_notecard,node_editor,node_alert,node_user,node_browser toneBlue
class node_notes_hook,node_mongo toneAmber
class node_api,node_routes,node_model,node_db toneMint
class node_theme,node_localstore toneRose
```

## Components

### React interface

- [React entry](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [App shell](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Home page](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`
- [Search bar](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/SearchBar.jsx): `frontend/src/components/SearchBar.jsx`
- [Tag filter](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/TagFilter.jsx): `frontend/src/components/TagFilter.jsx`
- [Note list](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteList.jsx): `frontend/src/components/NoteList.jsx`
- [Note card](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteCard.jsx): `frontend/src/components/NoteCard.jsx`
- [Note editor](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteEditor.jsx): `frontend/src/components/NoteEditor.jsx`
- [Note alert](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/components/NoteAlert.jsx): `frontend/src/components/NoteAlert.jsx`

### Note workflow

- [Notes state](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/hooks/useNotes.jsx): `frontend/src/hooks/useNotes.jsx`

### Backend API

- [FastAPI app](https://github.com/cyp777/my-notes-app/blob/main/backend/main.py): `backend/main.py`
- [Notes routes](https://github.com/cyp777/my-notes-app/blob/main/backend/routes/notes.py): `backend/routes/notes.py`
- [Note models](https://github.com/cyp777/my-notes-app/blob/main/backend/models/note.py): `backend/models/note.py`
- [Mongo connection](https://github.com/cyp777/my-notes-app/blob/main/backend/database.py): `backend/database.py`

### Persistence and theme

- [Theme context](https://github.com/cyp777/my-notes-app/blob/main/frontend/src/context/ThemeContext.jsx): `frontend/src/context/ThemeContext.jsx`
- **Browser storage**

### Other components

- **User**
- **Browser**
- **MongoDB**

## Connections

- User → React entry: opens app
- React entry → App shell: renders
- App shell → Home page: renders
- Home page → Search bar: renders
- Home page → Tag filter: renders
- Home page → Note list: renders filtered notes
- Note list → Note card: renders notes
- Home page → Note editor: opens editor
- Home page → Notes state: uses state
- Note editor → Home page: submits note
- Home page → Notes state: saves or deletes
- Notes state → Browser storage: reads and writes
- Home page → Theme context: uses theme
- Theme context → Browser: toggles document class
- FastAPI app → Notes routes: mounts router
- Mongo connection → MongoDB: connects