# antoniman31/game-library architecture

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

- Interactive diagram: https://gitdiagram.com/antoniman31/game-library
- Repository: https://github.com/antoniman31/game-library

## Overview

Game Library is a personal Xbox/Switch and PC game catalogue, with lending, enrichment, statistics, and cross-device backup. The main workflow is to browse or search a library, inspect or edit a game, and persist changes locally; users can also import, export, enrich records from public data sources, and synchronize through an optional Cloudflare Worker. The UI and data modules are represented at their known paths. Sampled excerpts do not show all event wiring, so uncertain component links are omitted; documented capabilities remain represented.

Main entry points: [`src/App.jsx`](https://github.com/antoniman31/game-library/blob/main/src/App.jsx) (Application), [`src/lib/api.js`](https://github.com/antoniman31/game-library/blob/main/src/lib/api.js) (Data-source API), [`src/components/FicheDetail.jsx`](https://github.com/antoniman31/game-library/blob/main/src/components/FicheDetail.jsx) (Game details), [`src/components/SettingsView.jsx`](https://github.com/antoniman31/game-library/blob/main/src/components/SettingsView.jsx) (Settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Library interface"]
  node_app["Application<br/>[App.jsx]"]
  node_game_list["Game list<br/>[LigneJeu.jsx]"]
  node_game_detail["Game details<br/>[FicheDetail.jsx]"]
  node_settings["Settings<br/>[SettingsView.jsx]"]
  node_filters["Filters<br/>[FiltersSheet.jsx]"]
  node_stats_view["Statistics view<br/>[StatsView.jsx]"]
end

subgraph group_domain["Game domain"]
  node_model["Game model<br/>[model.js]"]
  node_stats["Statistics<br/>[stats.js]"]
  node_preferences["Preferences<br/>[preferences.js]"]
  node_seed["Starter library<br/>[seed.js]"]
end

subgraph group_persistence["Storage and backup"]
  node_local_store[("Browser localStorage")]
  node_storage["Storage access<br/>[storage.js]"]
  node_sync["Device sync<br/>[sync.js]"]
  node_transfer["File transfer<br/>[natif.js]"]
  node_worker["Cloudflare Worker<br/>[index.js]"]
  node_sync_store[("Worker KV")]
end

subgraph group_integrations["External integrations"]
  node_api["Data-source API<br/>[api.js]"]
  node_barcode["Barcode scanning<br/>[codebarres.js]"]
  node_playnite["Playnite integration<br/>[playnite.js]"]
end

node_user(("Library owner"))
node_rawg{{"RAWG"}}
node_wiki{{"Wikipedia and Wikidata"}}
node_sgdb{{"SteamGridDB"}}
node_xbox{{"Xbox Live"}}

node_user -->|"uses"| node_app
node_app -->|"renders"| node_game_list
node_app -->|"opens"| node_game_detail
node_app -->|"opens"| node_settings
node_app -->|"opens"| node_filters
node_app -->|"shows"| node_stats_view
node_app -->|"normalizes"| node_model
node_app -->|"loads first run"| node_seed
node_app -->|"reads and writes"| node_storage
node_storage -->|"accesses"| node_local_store
node_stats_view -->|"calculates"| node_stats
node_settings -->|"reads settings"| node_preferences
node_app -->|"synchronizes"| node_sync
node_sync -->|"requests backup"| node_worker
node_worker -->|"reads and writes"| node_sync_store
node_app -->|"imports and exports"| node_transfer
node_app -->|"enriches games"| node_api
node_game_detail -->|"searches sources"| node_api
node_api -->|"requests metadata"| node_rawg
node_api -->|"requests articles"| node_wiki
node_api -.->|"requests covers"| node_sgdb
node_app -.->|"imports Xbox games"| node_api
node_api -.->|"requests library"| node_xbox
node_app -.->|"uses scanner"| node_barcode
node_app -.->|"imports PC library"| node_playnite

click node_app "https://github.com/antoniman31/game-library/blob/main/src/App.jsx"
click node_game_list "https://github.com/antoniman31/game-library/blob/main/src/components/LigneJeu.jsx"
click node_game_detail "https://github.com/antoniman31/game-library/blob/main/src/components/FicheDetail.jsx"
click node_settings "https://github.com/antoniman31/game-library/blob/main/src/components/SettingsView.jsx"
click node_filters "https://github.com/antoniman31/game-library/blob/main/src/components/FiltersSheet.jsx"
click node_stats_view "https://github.com/antoniman31/game-library/blob/main/src/components/StatsView.jsx"
click node_model "https://github.com/antoniman31/game-library/blob/main/src/lib/model.js"
click node_stats "https://github.com/antoniman31/game-library/blob/main/src/lib/stats.js"
click node_preferences "https://github.com/antoniman31/game-library/blob/main/src/lib/preferences.js"
click node_seed "https://github.com/antoniman31/game-library/blob/main/src/lib/seed.js"
click node_storage "https://github.com/antoniman31/game-library/blob/main/src/lib/storage.js"
click node_sync "https://github.com/antoniman31/game-library/blob/main/src/lib/sync.js"
click node_transfer "https://github.com/antoniman31/game-library/blob/main/src/lib/natif.js"
click node_worker "https://github.com/antoniman31/game-library/blob/main/worker/index.js"
click node_api "https://github.com/antoniman31/game-library/blob/main/src/lib/api.js"
click node_barcode "https://github.com/antoniman31/game-library/blob/main/src/lib/codebarres.js"
click node_playnite "https://github.com/antoniman31/game-library/blob/main/src/lib/playnite.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_game_list,node_game_detail,node_settings,node_filters,node_stats_view toneBlue
class node_model,node_stats,node_preferences,node_seed toneAmber
class node_local_store,node_storage,node_sync,node_transfer,node_worker,node_sync_store toneMint
class node_api,node_barcode,node_playnite toneRose
class node_user,node_rawg,node_wiki,node_sgdb,node_xbox toneIndigo
```

## Components

### Library interface

- [Application](https://github.com/antoniman31/game-library/blob/main/src/App.jsx): `src/App.jsx`
- [Game list](https://github.com/antoniman31/game-library/blob/main/src/components/LigneJeu.jsx): `src/components/LigneJeu.jsx`
- [Game details](https://github.com/antoniman31/game-library/blob/main/src/components/FicheDetail.jsx): `src/components/FicheDetail.jsx`
- [Settings](https://github.com/antoniman31/game-library/blob/main/src/components/SettingsView.jsx): `src/components/SettingsView.jsx`
- [Filters](https://github.com/antoniman31/game-library/blob/main/src/components/FiltersSheet.jsx): `src/components/FiltersSheet.jsx`
- [Statistics view](https://github.com/antoniman31/game-library/blob/main/src/components/StatsView.jsx): `src/components/StatsView.jsx`

### Game domain

- [Game model](https://github.com/antoniman31/game-library/blob/main/src/lib/model.js): `src/lib/model.js`
- [Statistics](https://github.com/antoniman31/game-library/blob/main/src/lib/stats.js): `src/lib/stats.js`
- [Preferences](https://github.com/antoniman31/game-library/blob/main/src/lib/preferences.js): `src/lib/preferences.js`
- [Starter library](https://github.com/antoniman31/game-library/blob/main/src/lib/seed.js): `src/lib/seed.js`

### Storage and backup

- **Browser localStorage**
- [Storage access](https://github.com/antoniman31/game-library/blob/main/src/lib/storage.js): `src/lib/storage.js`
- [Device sync](https://github.com/antoniman31/game-library/blob/main/src/lib/sync.js): `src/lib/sync.js`
- [File transfer](https://github.com/antoniman31/game-library/blob/main/src/lib/natif.js): `src/lib/natif.js`
- [Cloudflare Worker](https://github.com/antoniman31/game-library/blob/main/worker/index.js): `worker/index.js`
- **Worker KV**

### External integrations

- [Data-source API](https://github.com/antoniman31/game-library/blob/main/src/lib/api.js): `src/lib/api.js`
- [Barcode scanning](https://github.com/antoniman31/game-library/blob/main/src/lib/codebarres.js): `src/lib/codebarres.js`
- [Playnite integration](https://github.com/antoniman31/game-library/blob/main/src/lib/playnite.js): `src/lib/playnite.js`

### Other components

- **Library owner**
- **RAWG**
- **Wikipedia and Wikidata**
- **SteamGridDB**
- **Xbox Live**

## Connections

- Library owner → Application: uses
- Application → Game list: renders
- Application → Game details: opens
- Application → Settings: opens
- Application → Filters: opens
- Application → Statistics view: shows
- Application → Game model: normalizes
- Application → Starter library: loads first run
- Application → Storage access: reads and writes
- Storage access → Browser localStorage: accesses
- Statistics view → Statistics: calculates
- Settings → Preferences: reads settings
- Application → Device sync: synchronizes
- Device sync → Cloudflare Worker: requests backup
- Cloudflare Worker → Worker KV: reads and writes
- Application → File transfer: imports and exports
- Application → Data-source API: enriches games
- Game details → Data-source API: searches sources
- Data-source API → RAWG: requests metadata
- Data-source API → Wikipedia and Wikidata: requests articles
- Data-source API → SteamGridDB: requests covers
- Application → Data-source API: imports Xbox games
- Data-source API → Xbox Live: requests library
- Application → Barcode scanning: uses scanner
- Application → Playnite integration: imports PC library