# adrianbeichler/shop-display architecture

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

- Interactive diagram: https://gitdiagram.com/adrianbeichler/shop-display
- Repository: https://github.com/adrianbeichler/shop-display

## Overview

This is a local digital-signage application: an editor manages media and playlist order/durations, while a kiosk displays the resulting image/video loop. The server handles uploads, playlist reads/writes, media listing and deletion, and serves the web assets. Electron optionally launches the server and kiosk window. The README documents editor and playback capabilities, but their HTML implementations were not sampled, so client-side request details are represented only at the documented feature level.

Main entry points: [`server.js`](https://github.com/adrianbeichler/shop-display/blob/main/server.js) (Express server), [`upload.html`](https://github.com/adrianbeichler/shop-display/blob/main/upload.html) (Web editor), [`index.html`](https://github.com/adrianbeichler/shop-display/blob/main/index.html) (Kiosk display), [`main.js`](https://github.com/adrianbeichler/shop-display/blob/main/main.js) (Electron launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_management["Media management"]
  node_upload_ui["Web editor<br/>[upload.html]"]
end

subgraph group_backend["Local server"]
  node_server["Express server<br/>[server.js]"]
  node_media_files[("Media files")]
  node_playlist["Playlist config<br/>[media.txt]"]
end

subgraph group_playback["Kiosk playback"]
  node_kiosk["Kiosk display<br/>[index.html]"]
  node_electron["Electron launcher<br/>[main.js]"]
end

node_editor_user(("Editor user"))

node_editor_user -->|"manages media"| node_upload_ui
node_upload_ui -->|"uploads, edits"| node_server
node_server -->|"writes, deletes"| node_media_files
node_server -->|"writes"| node_playlist
node_server -->|"lists, reads"| node_upload_ui
node_server -->|"serves assets"| node_kiosk
node_kiosk -->|"loads playlist, media"| node_server
node_electron -->|"starts"| node_server
node_electron -->|"opens kiosk"| node_kiosk

click node_upload_ui "https://github.com/adrianbeichler/shop-display/blob/main/upload.html"
click node_server "https://github.com/adrianbeichler/shop-display/blob/main/server.js"
click node_media_files "https://github.com/adrianbeichler/shop-display/tree/main/media"
click node_playlist "https://github.com/adrianbeichler/shop-display/blob/main/media.txt"
click node_kiosk "https://github.com/adrianbeichler/shop-display/blob/main/index.html"
click node_electron "https://github.com/adrianbeichler/shop-display/blob/main/main.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_upload_ui,node_editor_user toneBlue
class node_server,node_media_files,node_playlist toneAmber
class node_kiosk,node_electron toneMint
```

## Components

### Media management

- [Web editor](https://github.com/adrianbeichler/shop-display/blob/main/upload.html): `upload.html`

### Local server

- [Express server](https://github.com/adrianbeichler/shop-display/blob/main/server.js): `server.js`
- [Media files](https://github.com/adrianbeichler/shop-display/tree/main/media): `media`
- [Playlist config](https://github.com/adrianbeichler/shop-display/blob/main/media.txt): `media.txt`

### Kiosk playback

- [Kiosk display](https://github.com/adrianbeichler/shop-display/blob/main/index.html): `index.html`
- [Electron launcher](https://github.com/adrianbeichler/shop-display/blob/main/main.js): `main.js`

### Other components

- **Editor user**

## Connections

- Editor user → Web editor: manages media
- Web editor → Express server: uploads, edits
- Express server → Media files: writes, deletes
- Express server → Playlist config: writes
- Express server → Web editor: lists, reads
- Express server → Kiosk display: serves assets
- Kiosk display → Express server: loads playlist, media
- Electron launcher → Express server: starts
- Electron launcher → Kiosk display: opens kiosk