Manga Inventory – Sammlung digital verwalten

Web, App und API für eine Manga-Sammlung von 156 Bänden – gebaut, weil Jessica den Überblick verloren hatte und eine Excel-Liste nicht mehr reichte.

Notiz
Jessica hatte über die Jahre so viele Manga gesammelt, dass sie den Überblick verlor. Ich so: hold my beer.

Angefangen hat es mit einer Excel-Tabelle. Titel, Band, Autor, Genre, Verlag – und dazu die Felder, auf die es wirklich ankommt: gelesen oder nicht, doppelt gekauft, im Bestand.

Denn das ist das eigentliche Problem einer gewachsenen Sammlung. Nicht, dass man nicht wüsste, was man mag. Sondern dass man im Laden steht und nicht mehr weiß, ob man Band 14 schon hat.

Genau dafür benutzt Jessica die Datenbank heute: beim Einkaufen. Ein Blick aufs Handy, und sie sieht, was fehlt und was schon zweimal im Regal steht.

Aus der Tabelle wurde eine richtige Anwendung. Inzwischen sind es 156 Titel.

Was es kann

  • 📚 Manga-Einträge verwalten mit Cover-Anzeige, Band-Tracking und Status
  • 📱 Barcode-Scanner in der Flutter-App – ISBN scannen, direkt hinzufügen
  • 🔍 Suche, Filter und Statistiken über die Sammlung
  • 🖥️ Web-Frontend für Desktop/Tablet, Mobile App für unterwegs

Architektur

Drei Komponenten, eine Datenbank:

  • Web-Frontend – Next.js 15, moderne Oberfläche für Desktop und Tablet
  • REST-API – Node.js/Express mit PostgreSQL, JWT-Auth
  • Mobile App – Flutter (iOS + Android) mit Barcode-Scanner

Wie es betrieben wird

Die drei Teile laufen an drei verschiedenen Orten – jeder da, wo er hingehört:

  • API als Container auf einem eigenen Server, Image aus der GitHub Container Registry
  • Frontend auf Vercel unter manga.phudevelopement.xyz
  • App im internen Test des Play Stores – bewusst nicht veröffentlicht, das Ding ist für uns gebaut

Vom Commit in den Betrieb

Ein Push auf main baut über GitHub Actions ein neues Image und legt es in der Registry ab. Den Server fasst GitHub dabei nicht an – der holt sich die neue Fassung selbst.

Das ist Absicht: Das Repo ist öffentlich. Ein Build-Runner auf der eigenen Maschine würde fremden Code aus Pull Requests genau dort ausführen, wo er nichts zu suchen hat.

Stack: Next.js 15 · Flutter · Node.js 20 · Express · PostgreSQL · Docker · GitHub Actions
Repo: commanderphu/manga-inventory
Live: manga.phudevelopement.xyz

Manga Inventory – Sammlung digital verwalten