# thinh263/project_website architecture

> Architecture diagram of the GitHub repository thinh263/project_website, 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/thinh263/project_website
- Repository: https://github.com/thinh263/project_website

## Overview

This is a React/Express note-management app with public notes organized by topic, password-gated private notes, and profile settings for display name, theme, and password. Users navigate the browser UI, which calls the API; the backend reads and writes JSON files. The principal CRUD and settings calls are visible in sampled source. Private-note editing behavior is only partially sampled, so the graph limits that branch to evidenced operations.

Main entry points: [`FE/src/App.jsx`](https://github.com/thinh263/project_website/blob/main/FE/src/App.jsx) (Routes and layout), [`FE/src/AppContext.jsx`](https://github.com/thinh263/project_website/blob/main/FE/src/AppContext.jsx) (Profile state), [`FE/src/Notes.jsx`](https://github.com/thinh263/project_website/blob/main/FE/src/Notes.jsx) (Topic notes), [`FE/src/PrivateNotes.jsx`](https://github.com/thinh263/project_website/blob/main/FE/src/PrivateNotes.jsx) (Private notes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React interface"]
  node_app["Routes and layout<br/>[App.jsx]"]
  node_context["Profile state<br/>[AppContext.jsx]"]
  node_public_ui["Topic notes<br/>[Notes.jsx]"]
  node_private_ui["Private notes<br/>[PrivateNotes.jsx]"]
  node_settings_ui["Profile settings<br/>[Settings.jsx]"]
end

subgraph group_backend["API services"]
  node_profile_api["Profile API<br/>[server.js]"]
  node_notes_api["Public notes API<br/>[server.js]"]
  node_private_api["Private notes API<br/>[server.js]"]
end

subgraph group_storage["JSON storage"]
  node_profile_store[("Profile JSON<br/>[profile.json]")]
  node_topic_store[("Topic note JSON")]
  node_private_store[("Private notes JSON<br/>[private.json]")]
end

node_user(("User"))

node_user -->|"navigates"| node_app
node_app -->|"routes to"| node_public_ui
node_app -->|"routes to"| node_private_ui
node_app -->|"routes to"| node_settings_ui
node_public_ui -->|"CRUD requests"| node_notes_api
node_notes_api -->|"reads/writes"| node_topic_store
node_private_ui -->|"auth and note requests"| node_private_api
node_private_api -->|"checks password"| node_profile_store
node_private_api -->|"reads/writes"| node_private_store
node_settings_ui -->|"loads/saves"| node_profile_api
node_profile_api -->|"reads/writes"| node_profile_store
node_settings_ui -->|"updates profile"| node_context
node_app -->|"reads theme"| node_context
node_public_ui -->|"reads theme"| node_context
node_private_ui -->|"reads theme"| node_context

click node_app "https://github.com/thinh263/project_website/blob/main/FE/src/App.jsx"
click node_context "https://github.com/thinh263/project_website/blob/main/FE/src/AppContext.jsx"
click node_public_ui "https://github.com/thinh263/project_website/blob/main/FE/src/Notes.jsx"
click node_private_ui "https://github.com/thinh263/project_website/blob/main/FE/src/PrivateNotes.jsx"
click node_settings_ui "https://github.com/thinh263/project_website/blob/main/FE/src/Settings.jsx"
click node_profile_api "https://github.com/thinh263/project_website/blob/main/BE/server.js"
click node_notes_api "https://github.com/thinh263/project_website/blob/main/BE/server.js"
click node_private_api "https://github.com/thinh263/project_website/blob/main/BE/server.js"
click node_profile_store "https://github.com/thinh263/project_website/blob/main/BE/data/profile.json"
click node_topic_store "https://github.com/thinh263/project_website/tree/main/BE/data/notes"
click node_private_store "https://github.com/thinh263/project_website/blob/main/BE/data/private.json"

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_context,node_public_ui,node_private_ui,node_settings_ui,node_user toneBlue
class node_profile_api,node_notes_api,node_private_api toneAmber
class node_profile_store,node_topic_store,node_private_store toneMint
```

## Components

### React interface

- [Routes and layout](https://github.com/thinh263/project_website/blob/main/FE/src/App.jsx): `FE/src/App.jsx`
- [Profile state](https://github.com/thinh263/project_website/blob/main/FE/src/AppContext.jsx): `FE/src/AppContext.jsx`
- [Topic notes](https://github.com/thinh263/project_website/blob/main/FE/src/Notes.jsx): `FE/src/Notes.jsx`
- [Private notes](https://github.com/thinh263/project_website/blob/main/FE/src/PrivateNotes.jsx): `FE/src/PrivateNotes.jsx`
- [Profile settings](https://github.com/thinh263/project_website/blob/main/FE/src/Settings.jsx): `FE/src/Settings.jsx`

### API services

- [Profile API](https://github.com/thinh263/project_website/blob/main/BE/server.js): `BE/server.js`
- [Public notes API](https://github.com/thinh263/project_website/blob/main/BE/server.js): `BE/server.js`
- [Private notes API](https://github.com/thinh263/project_website/blob/main/BE/server.js): `BE/server.js`

### JSON storage

- [Profile JSON](https://github.com/thinh263/project_website/blob/main/BE/data/profile.json): `BE/data/profile.json`
- [Topic note JSON](https://github.com/thinh263/project_website/tree/main/BE/data/notes): `BE/data/notes`
- [Private notes JSON](https://github.com/thinh263/project_website/blob/main/BE/data/private.json): `BE/data/private.json`

### Other components

- **User**

## Connections

- User → Routes and layout: navigates
- Routes and layout → Topic notes: routes to
- Routes and layout → Private notes: routes to
- Routes and layout → Profile settings: routes to
- Topic notes → Public notes API: CRUD requests
- Public notes API → Topic note JSON: reads/writes
- Private notes → Private notes API: auth and note requests
- Private notes API → Profile JSON: checks password
- Private notes API → Private notes JSON: reads/writes
- Profile settings → Profile API: loads/saves
- Profile API → Profile JSON: reads/writes
- Profile settings → Profile state: updates profile
- Routes and layout → Profile state: reads theme
- Topic notes → Profile state: reads theme
- Private notes → Profile state: reads theme