# nganpasa443-oss/notes-app-project architecture

> Architecture diagram of the GitHub repository nganpasa443-oss/notes-app-project, 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/nganpasa443-oss/notes-app-project
- Repository: https://github.com/nganpasa443-oss/notes-app-project

## Overview

This repository is a notes app with an Expo client and an Express/MySQL backend. Users can register or sign in, manage notes and account details, and administrators can manage users; password recovery is also implemented server-side. The client’s main routing and note-fetch/update/delete behavior are visible in `app/App.js`. Backend routes show the corresponding database operations and email/image integrations. Other screen-to-API wiring is not established by the sampled client source, so those connections are omitted.

Main entry points: [`app/App.js`](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/App.js) (App router), [`backend/server.js`](https://github.com/nganpasa443-oss/notes-app-project/blob/main/backend/server.js) (Express API), [`app/screens/AccountScreen.js`](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AccountScreen.js) (Account profile), [`app/screens/LoginScreen.js`](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/LoginScreen.js) (Sign in)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Mobile app"]
  node_app["App router<br/>[App.js]"]
end

subgraph group_account["Accounts"]
  node_login["Sign in<br/>[LoginScreen.js]"]
  node_register["Registration<br/>[RegisterScreen.js]"]
  node_recovery["Password recovery"]
  node_accountscreen["Account profile<br/>[AccountScreen.js]"]
  node_adminscreen["User administration<br/>[AdminScreen.js]"]
  node_pdf["PDF and sharing<br/>[AccountScreen.js]"]
end

subgraph group_notes["Notes"]
  node_home["Notes home<br/>[HomeScreen.js]"]
  node_create["Create note"]
  node_edit["Edit note<br/>[EditNoteScreen.js]"]
end

subgraph group_backend["Backend services"]
  node_api["API endpoint config<br/>[api.js]"]
  node_server["Express API<br/>[server.js]"]
  node_db[("MySQL database<br/>[schema.sql]")]
end

node_user(("App user"))
node_smtp["Gmail SMTP"]
node_cloudinary["Cloudinary"]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_login
node_app -->|"renders"| node_register
node_app -->|"renders"| node_recovery
node_app -->|"renders"| node_accountscreen
node_app -->|"renders"| node_adminscreen
node_app -->|"renders"| node_home
node_app -->|"renders"| node_create
node_app -->|"renders"| node_edit
node_app -->|"reads URL"| node_api
node_app -->|"fetches notes"| node_server
node_app -->|"updates notes"| node_server
node_app -->|"deletes notes"| node_server
node_server -->|"queries"| node_db
node_server -.->|"sends mail"| node_smtp
node_server -.->|"uploads profile image"| node_cloudinary
node_accountscreen -->|"generates PDF"| node_pdf
node_pdf -->|"shares or prints"| node_user

click node_app "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/App.js"
click node_login "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/LoginScreen.js"
click node_register "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/RegisterScreen.js"
click node_recovery "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/ForgotPasswordScreen.js"
click node_accountscreen "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AccountScreen.js"
click node_adminscreen "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AdminScreen.js"
click node_home "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/HomeScreen.js"
click node_create "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/CreateNoteScreen.js"
click node_edit "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/EditNoteScreen.js"
click node_api "https://github.com/nganpasa443-oss/notes-app-project/blob/main/config/api.js"
click node_server "https://github.com/nganpasa443-oss/notes-app-project/blob/main/backend/server.js"
click node_db "https://github.com/nganpasa443-oss/notes-app-project/blob/main/backend/schema.sql"
click node_pdf "https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AccountScreen.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_user toneBlue
class node_login,node_register,node_recovery,node_accountscreen,node_adminscreen,node_pdf toneAmber
class node_home,node_create,node_edit toneMint
class node_api,node_server,node_db toneRose
class node_smtp,node_cloudinary toneIndigo
```

## Components

### Mobile app

- [App router](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/App.js): `app/App.js`

### Accounts

- [Sign in](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/LoginScreen.js): `app/screens/LoginScreen.js`
- [Registration](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/RegisterScreen.js): `app/screens/RegisterScreen.js`
- [Password recovery](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/ForgotPasswordScreen.js): `app/screens/ForgotPasswordScreen.js`
- [Account profile](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AccountScreen.js): `app/screens/AccountScreen.js`
- [User administration](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AdminScreen.js): `app/screens/AdminScreen.js`
- [PDF and sharing](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/AccountScreen.js): `app/screens/AccountScreen.js`

### Notes

- [Notes home](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/HomeScreen.js): `app/screens/HomeScreen.js`
- [Create note](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/CreateNoteScreen.js): `app/screens/CreateNoteScreen.js`
- [Edit note](https://github.com/nganpasa443-oss/notes-app-project/blob/main/app/screens/EditNoteScreen.js): `app/screens/EditNoteScreen.js`

### Backend services

- [API endpoint config](https://github.com/nganpasa443-oss/notes-app-project/blob/main/config/api.js): `config/api.js`
- [Express API](https://github.com/nganpasa443-oss/notes-app-project/blob/main/backend/server.js): `backend/server.js`
- [MySQL database](https://github.com/nganpasa443-oss/notes-app-project/blob/main/backend/schema.sql): `backend/schema.sql`

### Other components

- **App user**
- **Gmail SMTP**
- **Cloudinary**

## Connections

- App user → App router: uses
- App router → Sign in: renders
- App router → Registration: renders
- App router → Password recovery: renders
- App router → Account profile: renders
- App router → User administration: renders
- App router → Notes home: renders
- App router → Create note: renders
- App router → Edit note: renders
- App router → API endpoint config: reads URL
- App router → Express API: fetches notes
- App router → Express API: updates notes
- App router → Express API: deletes notes
- Express API → MySQL database: queries
- Express API → Gmail SMTP: sends mail
- Express API → Cloudinary: uploads profile image
- Account profile → PDF and sharing: generates PDF
- PDF and sharing → App user: shares or prints