# imganpat/note-fusion architecture

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

- Interactive diagram: https://gitdiagram.com/imganpat/note-fusion
- Repository: https://github.com/imganpat/note-fusion

## Overview

Note Fusion is a full-stack notes application: users register or log in, browse and organize notes, open notes in a full-screen view, and create or edit notes; owners can also share notes in view-only form. The client uses routed React views and Redux state, while the server exposes authentication and notes APIs backed by MySQL. The README documents sharing and responsive UI, but their full implementations are not shown in the sampled source; those capabilities are represented without speculative implementation links.

Main entry points: [`client/src/App.jsx`](https://github.com/imganpat/note-fusion/blob/main/client/src/App.jsx) (App routes), [`client/src/store/thunks/notes_thunk.js`](https://github.com/imganpat/note-fusion/blob/main/client/src/store/thunks/notes_thunk.js) (Notes API client), [`server/routes/auth-routes.js`](https://github.com/imganpat/note-fusion/blob/main/server/routes/auth-routes.js) (Auth routes), [`server/server.js`](https://github.com/imganpat/note-fusion/blob/main/server/server.js) (HTTP server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_routes_ui["App routes<br/>[App.jsx]"]
  node_auth_pages["Login and registration"]
  node_notes_list["Notes list<br/>[NotesContainer.jsx]"]
  node_note_cards["Note cards<br/>[MiniNote.jsx]"]
  node_note_view["Full-screen note<br/>[Note.jsx]"]
  node_note_editor["Note editor popup<br/>[InputPopup.jsx]"]
  node_navigation["Navigation and profile<br/>[Nav.jsx]"]
  node_sidebar["Note navigation<br/>[Sidebar.jsx]"]
  node_confirm["Confirm dialog<br/>[ConfirmDialog.jsx]"]
end

subgraph group_state["Client state and API"]
  node_redux["Redux store<br/>[index.js]"]
  node_notes_state["Notes state<br/>[notes_slice.js]"]
  node_popup_state["Popup state<br/>[popup_slice.js]"]
  node_notes_api_client["Notes API client<br/>[notes_thunk.js]"]
  node_backend_url["Backend URL<br/>[backend_url.js]"]
end

subgraph group_server["Server API and security"]
  node_server_entry["HTTP server<br/>[server.js]"]
  node_auth_routes["Auth routes<br/>[auth-routes.js]"]
  node_auth_validation["Registration validation<br/>[auth-validator.js]"]
  node_validation_middleware["Validation middleware"]
  node_auth_controller["Authentication<br/>[auth-controller.js]"]
  node_notes_routes["Notes routes<br/>[notes-routes.js]"]
  node_auth_middleware["JWT authentication<br/>[auth-middleware.js]"]
  node_notes_controller["Notes operations"]
end

subgraph group_data["Persistence"]
  node_db_config[("MySQL connection<br/>[db-config.js]")]
end

node_user(("User"))
node_mysql[("MySQL")]

node_user -->|"uses"| node_routes_ui
node_routes_ui -->|"routes to"| node_notes_list
node_routes_ui -->|"routes to"| node_note_view
node_routes_ui -->|"routes to"| node_auth_pages
node_routes_ui -->|"renders layout"| node_navigation
node_notes_list -->|"renders"| node_note_cards
node_notes_list -->|"renders"| node_note_editor
node_note_view -->|"dispatches edits"| node_notes_api_client
node_note_view -->|"uses"| node_confirm
node_note_cards -->|"dispatches note actions"| node_notes_api_client
node_navigation -->|"uses"| node_confirm
node_sidebar -->|"updates"| node_popup_state
node_redux -->|"registers reducer"| node_notes_state
node_redux -->|"registers reducer"| node_popup_state
node_notes_state -->|"handles thunk results"| node_notes_api_client
node_notes_api_client -->|"uses base URL"| node_backend_url
node_auth_pages -->|"uses API URL"| node_backend_url
node_notes_api_client -.->|"calls notes API"| node_server_entry
node_auth_pages -.->|"calls auth API"| node_server_entry
node_server_entry -->|"mounts"| node_auth_routes
node_server_entry -->|"mounts"| node_notes_routes
node_auth_routes -->|"routes requests"| node_auth_controller
node_auth_routes -->|"validates registration"| node_validation_middleware
node_auth_routes -->|"uses schema"| node_auth_validation
node_auth_controller -->|"queries users"| node_db_config
node_notes_routes -->|"routes requests"| node_notes_controller
node_notes_routes -->|"protects routes"| node_auth_middleware
node_notes_controller -->|"queries notes"| node_db_config
node_db_config -->|"connects to"| node_mysql

click node_routes_ui "https://github.com/imganpat/note-fusion/blob/main/client/src/App.jsx"
click node_auth_pages "https://github.com/imganpat/note-fusion/tree/main/client/src/pages"
click node_notes_list "https://github.com/imganpat/note-fusion/blob/main/client/src/components/NotesContainer.jsx"
click node_note_cards "https://github.com/imganpat/note-fusion/blob/main/client/src/components/MiniNote.jsx"
click node_note_view "https://github.com/imganpat/note-fusion/blob/main/client/src/components/Note.jsx"
click node_note_editor "https://github.com/imganpat/note-fusion/blob/main/client/src/components/InputPopup.jsx"
click node_navigation "https://github.com/imganpat/note-fusion/blob/main/client/src/components/Nav.jsx"
click node_sidebar "https://github.com/imganpat/note-fusion/blob/main/client/src/components/Sidebar.jsx"
click node_confirm "https://github.com/imganpat/note-fusion/blob/main/client/src/components/ConfirmDialog.jsx"
click node_redux "https://github.com/imganpat/note-fusion/blob/main/client/src/store/index.js"
click node_notes_state "https://github.com/imganpat/note-fusion/blob/main/client/src/store/slices/notes_slice.js"
click node_popup_state "https://github.com/imganpat/note-fusion/blob/main/client/src/store/slices/popup_slice.js"
click node_notes_api_client "https://github.com/imganpat/note-fusion/blob/main/client/src/store/thunks/notes_thunk.js"
click node_backend_url "https://github.com/imganpat/note-fusion/blob/main/client/src/constants/backend_url.js"
click node_server_entry "https://github.com/imganpat/note-fusion/blob/main/server/server.js"
click node_auth_routes "https://github.com/imganpat/note-fusion/blob/main/server/routes/auth-routes.js"
click node_auth_validation "https://github.com/imganpat/note-fusion/blob/main/server/validators/auth-validator.js"
click node_validation_middleware "https://github.com/imganpat/note-fusion/blob/main/server/middlewares/validate-middelware.js"
click node_auth_controller "https://github.com/imganpat/note-fusion/blob/main/server/controllers/auth-controller.js"
click node_notes_routes "https://github.com/imganpat/note-fusion/blob/main/server/routes/notes-routes.js"
click node_auth_middleware "https://github.com/imganpat/note-fusion/blob/main/server/middlewares/auth-middleware.js"
click node_notes_controller "https://github.com/imganpat/note-fusion/blob/main/server/controllers/notes-controller.js"
click node_db_config "https://github.com/imganpat/note-fusion/blob/main/server/config/db-config.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_routes_ui,node_auth_pages,node_notes_list,node_note_cards,node_note_view,node_note_editor,node_navigation,node_sidebar,node_confirm,node_user toneBlue
class node_redux,node_notes_state,node_popup_state,node_notes_api_client,node_backend_url,node_mysql toneAmber
class node_server_entry,node_auth_routes,node_auth_validation,node_validation_middleware,node_auth_controller,node_notes_routes,node_auth_middleware,node_notes_controller toneMint
class node_db_config toneRose
```

## Components

### Client experience

- [App routes](https://github.com/imganpat/note-fusion/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Login and registration](https://github.com/imganpat/note-fusion/tree/main/client/src/pages): `client/src/pages`
- [Notes list](https://github.com/imganpat/note-fusion/blob/main/client/src/components/NotesContainer.jsx): `client/src/components/NotesContainer.jsx`
- [Note cards](https://github.com/imganpat/note-fusion/blob/main/client/src/components/MiniNote.jsx): `client/src/components/MiniNote.jsx`
- [Full-screen note](https://github.com/imganpat/note-fusion/blob/main/client/src/components/Note.jsx): `client/src/components/Note.jsx`
- [Note editor popup](https://github.com/imganpat/note-fusion/blob/main/client/src/components/InputPopup.jsx): `client/src/components/InputPopup.jsx`
- [Navigation and profile](https://github.com/imganpat/note-fusion/blob/main/client/src/components/Nav.jsx): `client/src/components/Nav.jsx`
- [Note navigation](https://github.com/imganpat/note-fusion/blob/main/client/src/components/Sidebar.jsx): `client/src/components/Sidebar.jsx`
- [Confirm dialog](https://github.com/imganpat/note-fusion/blob/main/client/src/components/ConfirmDialog.jsx): `client/src/components/ConfirmDialog.jsx`

### Client state and API

- [Redux store](https://github.com/imganpat/note-fusion/blob/main/client/src/store/index.js): `client/src/store/index.js`
- [Notes state](https://github.com/imganpat/note-fusion/blob/main/client/src/store/slices/notes_slice.js): `client/src/store/slices/notes_slice.js`
- [Popup state](https://github.com/imganpat/note-fusion/blob/main/client/src/store/slices/popup_slice.js): `client/src/store/slices/popup_slice.js`
- [Notes API client](https://github.com/imganpat/note-fusion/blob/main/client/src/store/thunks/notes_thunk.js): `client/src/store/thunks/notes_thunk.js`
- [Backend URL](https://github.com/imganpat/note-fusion/blob/main/client/src/constants/backend_url.js): `client/src/constants/backend_url.js`

### Server API and security

- [HTTP server](https://github.com/imganpat/note-fusion/blob/main/server/server.js): `server/server.js`
- [Auth routes](https://github.com/imganpat/note-fusion/blob/main/server/routes/auth-routes.js): `server/routes/auth-routes.js`
- [Registration validation](https://github.com/imganpat/note-fusion/blob/main/server/validators/auth-validator.js): `server/validators/auth-validator.js`
- [Validation middleware](https://github.com/imganpat/note-fusion/blob/main/server/middlewares/validate-middelware.js): `server/middlewares/validate-middelware.js`
- [Authentication](https://github.com/imganpat/note-fusion/blob/main/server/controllers/auth-controller.js): `server/controllers/auth-controller.js`
- [Notes routes](https://github.com/imganpat/note-fusion/blob/main/server/routes/notes-routes.js): `server/routes/notes-routes.js`
- [JWT authentication](https://github.com/imganpat/note-fusion/blob/main/server/middlewares/auth-middleware.js): `server/middlewares/auth-middleware.js`
- [Notes operations](https://github.com/imganpat/note-fusion/blob/main/server/controllers/notes-controller.js): `server/controllers/notes-controller.js`

### Persistence

- [MySQL connection](https://github.com/imganpat/note-fusion/blob/main/server/config/db-config.js): `server/config/db-config.js`

### Other components

- **User**
- **MySQL**

## Connections

- User → App routes: uses (evidence: `client/src/App.jsx`)
- App routes → Notes list: routes to (evidence: `client/src/App.jsx`)
- App routes → Full-screen note: routes to (evidence: `client/src/App.jsx`)
- App routes → Login and registration: routes to (evidence: `client/src/App.jsx`)
- App routes → Navigation and profile: renders layout (evidence: `client/src/App.jsx`)
- Notes list → Note cards: renders (evidence: `client/src/components/NotesContainer.jsx`)
- Notes list → Note editor popup: renders (evidence: `client/src/components/NotesContainer.jsx`)
- Full-screen note → Notes API client: dispatches edits (evidence: `client/src/components/Note.jsx`)
- Full-screen note → Confirm dialog: uses (evidence: `client/src/components/Note.jsx`)
- Note cards → Notes API client: dispatches note actions (evidence: `client/src/components/MiniNote.jsx`)
- Navigation and profile → Confirm dialog: uses (evidence: `client/src/components/Nav.jsx`)
- Note navigation → Popup state: updates (evidence: `client/src/components/Sidebar.jsx`)
- Redux store → Notes state: registers reducer (evidence: `client/src/store/index.js`)
- Redux store → Popup state: registers reducer (evidence: `client/src/store/index.js`)
- Notes state → Notes API client: handles thunk results (evidence: `client/src/store/slices/notes_slice.js`)
- Notes API client → Backend URL: uses base URL (evidence: `client/src/store/thunks/notes_thunk.js`)
- Login and registration → Backend URL: uses API URL (evidence: `client/src/pages/Login.jsx`)
- Notes API client → HTTP server: calls notes API
- Login and registration → HTTP server: calls auth API
- HTTP server → Auth routes: mounts (evidence: `server/server.js`)
- HTTP server → Notes routes: mounts (evidence: `server/server.js`)
- Auth routes → Authentication: routes requests (evidence: `server/routes/auth-routes.js`)
- Auth routes → Validation middleware: validates registration (evidence: `server/routes/auth-routes.js`)
- Auth routes → Registration validation: uses schema (evidence: `server/routes/auth-routes.js`)
- Authentication → MySQL connection: queries users (evidence: `server/controllers/auth-controller.js`)
- Notes routes → Notes operations: routes requests (evidence: `server/routes/notes-routes.js`)
- Notes routes → JWT authentication: protects routes (evidence: `server/routes/notes-routes.js`)
- Notes operations → MySQL connection: queries notes (evidence: `server/controllers/notes-controller.js`)
- MySQL connection → MySQL: connects to (evidence: `server/config/db-config.js`)