# the-tylerlab/chemicallaboratory architecture

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

- Interactive diagram: https://gitdiagram.com/the-tylerlab/chemicallaboratory
- Repository: https://github.com/the-tylerlab/chemicallaboratory

## Overview

SciPortal is a laboratory-management application. Users enter through the browser UI, where the app initializes the session and loads operational data; domain modules then provide inventory, equipment, bookings, borrowing, procurement, budget, and reporting workflows. Shared API, state, and access-control layers support those features. The tree and excerpts establish the client-side calls, but the README is empty and the server implementation was not excerpted, so backend routing and persistence details are not mapped beyond a cautious client-to-server link.

Main entry points: [`src/main.js`](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/main.js) (App startup), [`src/core/api.js`](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/api.js) (API client), [`src/auth/auth.js`](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/auth/auth.js) (Authentication), [`src/rbac/rbac.js`](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/rbac/rbac.js) (Role permissions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and shared services"]
  node_entry["App startup<br/>[main.js]"]
  node_api["API client<br/>[api.js]"]
  node_state["App state<br/>[state.js]"]
  node_utils["Shared utilities<br/>[utils.js]"]
  node_server["Application server<br/>[server.js]"]
end

subgraph group_identity["Identity and access"]
  node_auth["Authentication<br/>[auth.js]"]
  node_login["Login UI<br/>[login-modal.js]"]
  node_rbac["Role permissions<br/>[rbac.js]"]
end

subgraph group_operations["Laboratory operations"]
  node_inventory["Inventory<br/>[inventory.js]"]
  node_equipment["Equipment<br/>[equipment.js]"]
  node_booking["Room bookings<br/>[booking.js]"]
  node_borrowing["Borrowing<br/>[borrowing.js]"]
  node_procurement["Procurement<br/>[procurement.js]"]
end

subgraph group_oversight["Administration and insights"]
  node_budget["Budget<br/>[budget.js]"]
  node_users["User management<br/>[users.js]"]
  node_dashboard["Dashboard<br/>[dashboard.js]"]
  node_notifications["Announcements<br/>[notifications.js]"]
  node_chatbot["Chatbot<br/>[chatbot.js]"]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"sets up"| node_login
node_entry -->|"verifies session"| node_auth
node_entry -->|"loads items"| node_inventory
node_entry -->|"loads assets"| node_equipment
node_entry -->|"loads bookings"| node_booking
node_entry -->|"loads transactions"| node_borrowing
node_entry -->|"loads orders"| node_procurement
node_entry -->|"loads budget"| node_budget
node_entry -->|"loads announcements"| node_notifications
node_entry -->|"updates metrics"| node_dashboard
node_entry -->|"exposes client"| node_api
node_entry -->|"uses state"| node_state
node_entry -->|"exposes helpers"| node_utils
node_entry -->|"exposes permissions"| node_rbac
node_auth -->|"uses auth client"| node_api
node_auth -->|"sets user"| node_state
node_auth -->|"normalizes input"| node_utils
node_inventory -->|"requests data"| node_api
node_inventory -->|"checks role"| node_rbac
node_booking -->|"requests bookings"| node_api
node_booking -->|"checks role"| node_rbac
node_borrowing -->|"requests transactions"| node_api
node_procurement -->|"requests orders"| node_api
node_procurement -->|"refreshes overview"| node_budget
node_budget -->|"requests budget"| node_api
node_dashboard -->|"requests role view"| node_api
node_dashboard -->|"checks role"| node_rbac
node_entry -.->|"calls backend"| node_server

click node_entry "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/main.js"
click node_api "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/api.js"
click node_state "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/state.js"
click node_utils "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/utils.js"
click node_server "https://github.com/the-tylerlab/chemicallaboratory/blob/main/server.js"
click node_auth "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/auth/auth.js"
click node_login "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/auth/login-modal.js"
click node_rbac "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/rbac/rbac.js"
click node_inventory "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/inventory/inventory.js"
click node_equipment "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/equipment/equipment.js"
click node_booking "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/booking/booking.js"
click node_borrowing "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/borrowing/borrowing.js"
click node_procurement "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/procurement/procurement.js"
click node_budget "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/budget/budget.js"
click node_users "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/users/users.js"
click node_dashboard "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/dashboard/dashboard.js"
click node_notifications "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/notifications/notifications.js"
click node_chatbot "https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/chatbot/chatbot.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_entry,node_api,node_state,node_utils,node_server,node_user toneBlue
class node_auth,node_login,node_rbac toneAmber
class node_inventory,node_equipment,node_booking,node_borrowing,node_procurement toneMint
class node_budget,node_users,node_dashboard,node_notifications,node_chatbot toneRose
```

## Components

### App and shared services

- [App startup](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/main.js): `src/main.js`
- [API client](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/api.js): `src/core/api.js`
- [App state](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/state.js): `src/core/state.js`
- [Shared utilities](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/core/utils.js): `src/core/utils.js`
- [Application server](https://github.com/the-tylerlab/chemicallaboratory/blob/main/server.js): `server.js`

### Identity and access

- [Authentication](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/auth/auth.js): `src/auth/auth.js`
- [Login UI](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/auth/login-modal.js): `src/auth/login-modal.js`
- [Role permissions](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/rbac/rbac.js): `src/rbac/rbac.js`

### Laboratory operations

- [Inventory](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/inventory/inventory.js): `src/inventory/inventory.js`
- [Equipment](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/equipment/equipment.js): `src/equipment/equipment.js`
- [Room bookings](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/booking/booking.js): `src/booking/booking.js`
- [Borrowing](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/borrowing/borrowing.js): `src/borrowing/borrowing.js`
- [Procurement](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/procurement/procurement.js): `src/procurement/procurement.js`

### Administration and insights

- [Budget](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/budget/budget.js): `src/budget/budget.js`
- [User management](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/users/users.js): `src/users/users.js`
- [Dashboard](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/dashboard/dashboard.js): `src/dashboard/dashboard.js`
- [Announcements](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/notifications/notifications.js): `src/notifications/notifications.js`
- [Chatbot](https://github.com/the-tylerlab/chemicallaboratory/blob/main/src/chatbot/chatbot.js): `src/chatbot/chatbot.js`

### Other components

- **User**

## Connections

- User → App startup: opens app (evidence: `src/main.js`)
- App startup → Login UI: sets up (evidence: `src/main.js`)
- App startup → Authentication: verifies session (evidence: `src/main.js`)
- App startup → Inventory: loads items (evidence: `src/main.js`)
- App startup → Equipment: loads assets (evidence: `src/main.js`)
- App startup → Room bookings: loads bookings (evidence: `src/main.js`)
- App startup → Borrowing: loads transactions (evidence: `src/main.js`)
- App startup → Procurement: loads orders (evidence: `src/main.js`)
- App startup → Budget: loads budget (evidence: `src/main.js`)
- App startup → Announcements: loads announcements (evidence: `src/main.js`)
- App startup → Dashboard: updates metrics (evidence: `src/main.js`)
- App startup → API client: exposes client (evidence: `src/main.js`)
- App startup → App state: uses state (evidence: `src/main.js`)
- App startup → Shared utilities: exposes helpers (evidence: `src/main.js`)
- App startup → Role permissions: exposes permissions (evidence: `src/main.js`)
- Authentication → API client: uses auth client (evidence: `src/auth/auth.js`)
- Authentication → App state: sets user (evidence: `src/auth/auth.js`)
- Authentication → Shared utilities: normalizes input (evidence: `src/auth/auth.js`)
- Inventory → API client: requests data (evidence: `src/inventory/inventory.js`)
- Inventory → Role permissions: checks role (evidence: `src/inventory/inventory.js`)
- Room bookings → API client: requests bookings (evidence: `src/booking/booking.js`)
- Room bookings → Role permissions: checks role (evidence: `src/booking/booking.js`)
- Borrowing → API client: requests transactions (evidence: `src/borrowing/borrowing.js`)
- Procurement → API client: requests orders (evidence: `src/procurement/procurement.js`)
- Procurement → Budget: refreshes overview (evidence: `src/procurement/procurement.js`)
- Budget → API client: requests budget (evidence: `src/budget/budget.js`)
- Dashboard → API client: requests role view (evidence: `src/dashboard/dashboard.js`)
- Dashboard → Role permissions: checks role (evidence: `src/dashboard/dashboard.js`)
- App startup → Application server: calls backend