# mohd-azim/store-pos architecture

> Architecture diagram of the GitHub repository mohd-azim/store-pos, 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/mohd-azim/store-pos
- Repository: https://github.com/mohd-azim/store-pos

## Overview

Store POS is a desktop point-of-sale application for a single register or networked tills. A cashier signs in, scans or searches products, builds a cart, selects a customer and payment, then records or holds a sale; staff can later review transaction history. Catalog, customer, team, settings, demo-data, and photo-library capabilities form distinct supporting workflows. The Electron shell supplies operating-mode and filesystem configuration, while the renderer uses an HTTP client to reach the Express API and its SQLite-backed services. Relationships below follow excerpts or README statements; unsampled route behavior is represented by subsystem nodes without speculative internal links.

Main entry points: [`server/index.js`](https://github.com/mohd-azim/store-pos/blob/master/server/index.js) (Express API), [`src/api/client.ts`](https://github.com/mohd-azim/store-pos/blob/master/src/api/client.ts) (HTTP API client), [`src/pages/PosPage.tsx`](https://github.com/mohd-azim/store-pos/blob/master/src/pages/PosPage.tsx) (POS workspace), [`src/context/AuthContext.tsx`](https://github.com/mohd-azim/store-pos/blob/master/src/context/AuthContext.tsx) (Session context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop and session"]
  node_electron["Electron main<br/>[main.js]"]
  node_preload["Secure preload<br/>[preload.cjs]"]
  node_bridge["POS bridge<br/>[bridge.ts]"]
  node_authui["Session context<br/>[AuthContext.tsx]"]
  node_login["Login screen<br/>[LoginPage.tsx]"]
end

subgraph group_checkout["Register and sales"]
  node_app["POS workspace<br/>[PosPage.tsx]"]
  node_till["Till checkout<br/>[TillView.tsx]"]
  node_payment["Payment pad<br/>[PaymentPad.tsx]"]
  node_customerselect["Customer picker<br/>[CustomerSelect.tsx]"]
  node_history["Transaction history"]
end

subgraph group_management["Store management"]
  node_catalog["Product catalog<br/>[CatalogView.tsx]"]
  node_settings["Store settings<br/>[SettingsView.tsx]"]
end

subgraph group_backend["API and persistence"]
  node_api["HTTP API client<br/>[client.ts]"]
  node_server["Express API<br/>[index.js]"]
  node_authsvc["Authentication<br/>[auth.js]"]
  node_inventory["Inventory routes<br/>[inventory.js]"]
  node_transactions["Transaction routes<br/>[transactions.js]"]
  node_customers["Customer routes<br/>[customers.js]"]
  node_users["Users routes<br/>[users.js]"]
  node_categories["Category routes<br/>[categories.js]"]
  node_settingsroutes["Settings routes<br/>[settings.js]"]
  node_demoroutes["Demo data routes<br/>[demo.js]"]
  node_db[("SQLite database<br/>[db.js]")]
end

subgraph group_media["Catalog media"]
  node_photopicker["Photo picker<br/>[PhotoPicker.tsx]"]
  node_mediaroutes["Media routes<br/>[media.js]"]
end

node_cashier(("Cashier / staff"))
node_pexels["Pexels service"]

node_cashier -->|"signs in"| node_login
node_login -->|"submits credentials"| node_authui
node_authui -->|"gets API config"| node_bridge
node_electron -->|"starts local API"| node_server
node_electron -->|"installs bridge"| node_preload
node_preload -->|"exposes window.pos"| node_bridge
node_authui -->|"authenticates"| node_api
node_authui -->|"renders signed-in UI"| node_app
node_app -->|"loads store data"| node_api
node_app -->|"renders till view"| node_till
node_app -->|"renders catalog"| node_catalog
node_app -->|"renders settings"| node_settings
node_till -->|"looks up and records sales"| node_api
node_till -->|"renders payment pad"| node_payment
node_till -->|"renders customer picker"| node_customerselect
node_history -->|"loads transactions"| node_api
node_catalog -->|"manages catalog"| node_api
node_settings -->|"saves settings"| node_api
node_settings -->|"renders photo picker"| node_photopicker
node_catalog -->|"selects product photos"| node_photopicker
node_photopicker -->|"manages media"| node_api
node_api -->|"sends HTTP requests"| node_server
node_server -->|"mounts user routes"| node_authsvc
node_server -->|"mounts inventory routes"| node_inventory
node_server -->|"mounts sales routes"| node_transactions
node_server -->|"mounts customer routes"| node_customers
node_server -->|"mounts users routes"| node_users
node_server -->|"mounts category routes"| node_categories
node_server -->|"mounts settings routes"| node_settingsroutes
node_server -->|"mounts demo routes"| node_demoroutes
node_server -->|"mounts media routes"| node_mediaroutes
node_server -->|"initializes database"| node_db
node_authsvc -->|"reads user records"| node_db
node_mediaroutes -->|"reads and writes media"| node_db
node_mediaroutes -->|"searches and downloads"| node_pexels

click node_electron "https://github.com/mohd-azim/store-pos/blob/master/electron/main.js"
click node_preload "https://github.com/mohd-azim/store-pos/blob/master/electron/preload.cjs"
click node_bridge "https://github.com/mohd-azim/store-pos/blob/master/src/bridge.ts"
click node_authui "https://github.com/mohd-azim/store-pos/blob/master/src/context/AuthContext.tsx"
click node_login "https://github.com/mohd-azim/store-pos/blob/master/src/pages/LoginPage.tsx"
click node_app "https://github.com/mohd-azim/store-pos/blob/master/src/pages/PosPage.tsx"
click node_till "https://github.com/mohd-azim/store-pos/blob/master/src/pages/TillView.tsx"
click node_payment "https://github.com/mohd-azim/store-pos/blob/master/src/components/PaymentPad.tsx"
click node_customerselect "https://github.com/mohd-azim/store-pos/blob/master/src/components/CustomerSelect.tsx"
click node_history "https://github.com/mohd-azim/store-pos/blob/master/src/components/TransactionsModal.tsx"
click node_catalog "https://github.com/mohd-azim/store-pos/blob/master/src/pages/CatalogView.tsx"
click node_settings "https://github.com/mohd-azim/store-pos/blob/master/src/pages/SettingsView.tsx"
click node_api "https://github.com/mohd-azim/store-pos/blob/master/src/api/client.ts"
click node_server "https://github.com/mohd-azim/store-pos/blob/master/server/index.js"
click node_authsvc "https://github.com/mohd-azim/store-pos/blob/master/server/auth.js"
click node_inventory "https://github.com/mohd-azim/store-pos/blob/master/server/routes/inventory.js"
click node_transactions "https://github.com/mohd-azim/store-pos/blob/master/server/routes/transactions.js"
click node_customers "https://github.com/mohd-azim/store-pos/blob/master/server/routes/customers.js"
click node_users "https://github.com/mohd-azim/store-pos/blob/master/server/routes/users.js"
click node_categories "https://github.com/mohd-azim/store-pos/blob/master/server/routes/categories.js"
click node_settingsroutes "https://github.com/mohd-azim/store-pos/blob/master/server/routes/settings.js"
click node_demoroutes "https://github.com/mohd-azim/store-pos/blob/master/server/routes/demo.js"
click node_db "https://github.com/mohd-azim/store-pos/blob/master/server/db.js"
click node_photopicker "https://github.com/mohd-azim/store-pos/blob/master/src/components/PhotoPicker.tsx"
click node_mediaroutes "https://github.com/mohd-azim/store-pos/blob/master/server/routes/media.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_electron,node_preload,node_bridge,node_authui,node_login toneBlue
class node_app,node_till,node_payment,node_customerselect,node_history toneAmber
class node_catalog,node_settings toneMint
class node_api,node_server,node_authsvc,node_inventory,node_transactions,node_customers,node_users,node_categories,node_settingsroutes,node_demoroutes,node_db toneRose
class node_photopicker,node_mediaroutes,node_cashier,node_pexels toneIndigo
```

## Components

### Desktop and session

- [Electron main](https://github.com/mohd-azim/store-pos/blob/master/electron/main.js): `electron/main.js`
- [Secure preload](https://github.com/mohd-azim/store-pos/blob/master/electron/preload.cjs): `electron/preload.cjs`
- [POS bridge](https://github.com/mohd-azim/store-pos/blob/master/src/bridge.ts): `src/bridge.ts`
- [Session context](https://github.com/mohd-azim/store-pos/blob/master/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Login screen](https://github.com/mohd-azim/store-pos/blob/master/src/pages/LoginPage.tsx): `src/pages/LoginPage.tsx`

### Register and sales

- [POS workspace](https://github.com/mohd-azim/store-pos/blob/master/src/pages/PosPage.tsx): `src/pages/PosPage.tsx`
- [Till checkout](https://github.com/mohd-azim/store-pos/blob/master/src/pages/TillView.tsx): `src/pages/TillView.tsx`
- [Payment pad](https://github.com/mohd-azim/store-pos/blob/master/src/components/PaymentPad.tsx): `src/components/PaymentPad.tsx`
- [Customer picker](https://github.com/mohd-azim/store-pos/blob/master/src/components/CustomerSelect.tsx): `src/components/CustomerSelect.tsx`
- [Transaction history](https://github.com/mohd-azim/store-pos/blob/master/src/components/TransactionsModal.tsx): `src/components/TransactionsModal.tsx`

### Store management

- [Product catalog](https://github.com/mohd-azim/store-pos/blob/master/src/pages/CatalogView.tsx): `src/pages/CatalogView.tsx`
- [Store settings](https://github.com/mohd-azim/store-pos/blob/master/src/pages/SettingsView.tsx): `src/pages/SettingsView.tsx`

### API and persistence

- [HTTP API client](https://github.com/mohd-azim/store-pos/blob/master/src/api/client.ts): `src/api/client.ts`
- [Express API](https://github.com/mohd-azim/store-pos/blob/master/server/index.js): `server/index.js`
- [Authentication](https://github.com/mohd-azim/store-pos/blob/master/server/auth.js): `server/auth.js`
- [Inventory routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/inventory.js): `server/routes/inventory.js`
- [Transaction routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/transactions.js): `server/routes/transactions.js`
- [Customer routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/customers.js): `server/routes/customers.js`
- [Users routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/users.js): `server/routes/users.js`
- [Category routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/categories.js): `server/routes/categories.js`
- [Settings routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/settings.js): `server/routes/settings.js`
- [Demo data routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/demo.js): `server/routes/demo.js`
- [SQLite database](https://github.com/mohd-azim/store-pos/blob/master/server/db.js): `server/db.js`

### Catalog media

- [Photo picker](https://github.com/mohd-azim/store-pos/blob/master/src/components/PhotoPicker.tsx): `src/components/PhotoPicker.tsx`
- [Media routes](https://github.com/mohd-azim/store-pos/blob/master/server/routes/media.js): `server/routes/media.js`

### Other components

- **Cashier / staff**
- **Pexels service**

## Connections

- Cashier / staff → Login screen: signs in
- Login screen → Session context: submits credentials (evidence: `src/pages/LoginPage.tsx`)
- Session context → POS bridge: gets API config (evidence: `src/context/AuthContext.tsx`)
- Electron main → Express API: starts local API (evidence: `electron/main.js`)
- Electron main → Secure preload: installs bridge (evidence: `electron/main.js`)
- Secure preload → POS bridge: exposes window.pos (evidence: `electron/preload.cjs`)
- Session context → HTTP API client: authenticates (evidence: `src/context/AuthContext.tsx`)
- Session context → POS workspace: renders signed-in UI (evidence: `src/App.tsx`)
- POS workspace → HTTP API client: loads store data (evidence: `src/pages/PosPage.tsx`)
- POS workspace → Till checkout: renders till view (evidence: `src/pages/PosPage.tsx`)
- POS workspace → Product catalog: renders catalog (evidence: `src/pages/PosPage.tsx`)
- POS workspace → Store settings: renders settings (evidence: `src/pages/PosPage.tsx`)
- Till checkout → HTTP API client: looks up and records sales (evidence: `src/pages/TillView.tsx`)
- Till checkout → Payment pad: renders payment pad (evidence: `src/pages/TillView.tsx`)
- Till checkout → Customer picker: renders customer picker (evidence: `src/pages/TillView.tsx`)
- Transaction history → HTTP API client: loads transactions (evidence: `src/components/TransactionsModal.tsx`)
- Product catalog → HTTP API client: manages catalog (evidence: `src/pages/CatalogView.tsx`)
- Store settings → HTTP API client: saves settings (evidence: `src/pages/SettingsView.tsx`)
- Store settings → Photo picker: renders photo picker (evidence: `src/pages/SettingsView.tsx`)
- Product catalog → Photo picker: selects product photos (evidence: `src/pages/CatalogView.tsx`)
- Photo picker → HTTP API client: manages media (evidence: `src/components/PhotoPicker.tsx`)
- HTTP API client → Express API: sends HTTP requests (evidence: `src/api/client.ts`)
- Express API → Authentication: mounts user routes (evidence: `server/index.js`)
- Express API → Inventory routes: mounts inventory routes (evidence: `server/index.js`)
- Express API → Transaction routes: mounts sales routes (evidence: `server/index.js`)
- Express API → Customer routes: mounts customer routes (evidence: `server/index.js`)
- Express API → Users routes: mounts users routes (evidence: `server/index.js`)
- Express API → Category routes: mounts category routes (evidence: `server/index.js`)
- Express API → Settings routes: mounts settings routes (evidence: `server/index.js`)
- Express API → Demo data routes: mounts demo routes (evidence: `server/index.js`)
- Express API → Media routes: mounts media routes (evidence: `server/index.js`)
- Express API → SQLite database: initializes database (evidence: `server/index.js`)
- Authentication → SQLite database: reads user records (evidence: `server/auth.js`)
- Media routes → SQLite database: reads and writes media (evidence: `server/routes/media.js`)
- Media routes → Pexels service: searches and downloads (evidence: `server/routes/media.js`)