# mckenz-e/project01 architecture

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

## Overview

This is a browser-based asset inventory and borrowing application. Users register or log in, browse available assets, borrow them, and return assets assigned to them; administrators can add, edit, and delete inventory, while the history screen reports asset/user/status information and exports a PDF. The frontend pages call an Express API, which queries MySQL. The README gives no further feature detail, so this map follows the sampled handlers and page scripts; some page files are present in the tree but their implementation was not sampled.

Main entry points: [`Backend/index.js`](https://github.com/mckenz-e/project01/blob/main/Backend/index.js) (Express API), [`Frontend/manage.js`](https://github.com/mckenz-e/project01/blob/main/Frontend/manage.js) (Manage inventory), [`Frontend/history.js`](https://github.com/mckenz-e/project01/blob/main/Frontend/history.js) (Asset history), [`Frontend/login.js`](https://github.com/mckenz-e/project01/blob/main/Frontend/login.js) (Login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser workflows"]
  node_login_ui["Login<br/>[login.js]"]
  node_register_ui["Registration<br/>[register.js]"]
  node_catalog_ui["Asset catalog<br/>[main.js]"]
  node_borrow_ui["Borrow assets<br/>[borrow.js]"]
  node_return_ui["Return assets<br/>[return.js]"]
  node_admin_ui["Add inventory<br/>[admin.js]"]
  node_manage_ui["Manage inventory<br/>[manage.js]"]
  node_edit_ui["Edit inventory<br/>[edit.js]"]
  node_history_ui["Asset history<br/>[history.js]"]
end

subgraph group_backend["API and persistence"]
  node_api["Express API<br/>[index.js]"]
  node_mysql[("MySQL database")]
end

node_visitor(("User"))
node_pdf["PDF exporter"]

node_visitor -->|"uses"| node_login_ui
node_visitor -->|"registers"| node_register_ui
node_visitor -->|"browses"| node_catalog_ui
node_visitor -->|"borrows"| node_borrow_ui
node_visitor -->|"returns"| node_return_ui
node_visitor -->|"adds assets"| node_admin_ui
node_visitor -->|"manages"| node_manage_ui
node_visitor -->|"views history"| node_history_ui
node_login_ui -->|"POST /login"| node_api
node_register_ui -->|"POST /register"| node_api
node_catalog_ui -->|"GET /main"| node_api
node_borrow_ui -->|"GET /borrow; PUT /assets/:id"| node_api
node_return_ui -->|"GET /return; PUT /return/:id"| node_api
node_admin_ui -->|"POST /assets"| node_api
node_manage_ui -->|"GET /main; DELETE /assets/:id"| node_api
node_manage_ui -->|"opens edit"| node_edit_ui
node_edit_ui -->|"GET /assets/:id; PUT /edit/:id"| node_api
node_history_ui -->|"GET /information"| node_api
node_history_ui -->|"exports report"| node_pdf
node_api -->|"queries and updates"| node_mysql

click node_login_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/login.js"
click node_register_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/register.js"
click node_catalog_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/main.js"
click node_borrow_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/borrow.js"
click node_return_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/return.js"
click node_admin_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/admin.js"
click node_manage_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/manage.js"
click node_edit_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/edit.js"
click node_history_ui "https://github.com/mckenz-e/project01/blob/main/Frontend/history.js"
click node_api "https://github.com/mckenz-e/project01/blob/main/Backend/index.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_login_ui,node_register_ui,node_catalog_ui,node_borrow_ui,node_return_ui,node_admin_ui,node_manage_ui,node_edit_ui,node_history_ui,node_visitor toneBlue
class node_api,node_mysql toneAmber
class node_pdf toneIndigo
```

## Components

### Browser workflows

- [Login](https://github.com/mckenz-e/project01/blob/main/Frontend/login.js): `Frontend/login.js`
- [Registration](https://github.com/mckenz-e/project01/blob/main/Frontend/register.js): `Frontend/register.js`
- [Asset catalog](https://github.com/mckenz-e/project01/blob/main/Frontend/main.js): `Frontend/main.js`
- [Borrow assets](https://github.com/mckenz-e/project01/blob/main/Frontend/borrow.js): `Frontend/borrow.js`
- [Return assets](https://github.com/mckenz-e/project01/blob/main/Frontend/return.js): `Frontend/return.js`
- [Add inventory](https://github.com/mckenz-e/project01/blob/main/Frontend/admin.js): `Frontend/admin.js`
- [Manage inventory](https://github.com/mckenz-e/project01/blob/main/Frontend/manage.js): `Frontend/manage.js`
- [Edit inventory](https://github.com/mckenz-e/project01/blob/main/Frontend/edit.js): `Frontend/edit.js`
- [Asset history](https://github.com/mckenz-e/project01/blob/main/Frontend/history.js): `Frontend/history.js`

### API and persistence

- [Express API](https://github.com/mckenz-e/project01/blob/main/Backend/index.js): `Backend/index.js`
- **MySQL database**

### Other components

- **User**
- **PDF exporter**

## Connections

- User → Login: uses
- User → Registration: registers
- User → Asset catalog: browses
- User → Borrow assets: borrows
- User → Return assets: returns
- User → Add inventory: adds assets
- User → Manage inventory: manages
- User → Asset history: views history
- Login → Express API: POST /login
- Registration → Express API: POST /register
- Asset catalog → Express API: GET /main
- Borrow assets → Express API: GET /borrow; PUT /assets/:id
- Return assets → Express API: GET /return; PUT /return/:id
- Add inventory → Express API: POST /assets
- Manage inventory → Express API: GET /main; DELETE /assets/:id
- Manage inventory → Edit inventory: opens edit
- Edit inventory → Express API: GET /assets/:id; PUT /edit/:id
- Asset history → Express API: GET /information
- Asset history → PDF exporter: exports report
- Express API → MySQL database: queries and updates