Ein vollständiges Verwaltungssystem für deine persönliche Manga-Sammlung mit Web-Frontend, REST-API und Mobile App.
Manga Inventory ist ein Multi-Plattform System zur Verwaltung deiner Manga-Sammlung. Das Projekt besteht aus drei Hauptkomponenten:
- Web-Frontend: Moderne Next.js-Anwendung für Desktop und Tablet
- REST-API: Sichere Node.js/Express-API mit PostgreSQL-Datenbank
- Mobile App: Native Flutter-App für iOS und Android mit Barcode-Scanner
Die Idee entstand aus dem Wunsch, eine analoge Excel-Manga-Liste digital, durchsuchbar und mobil zugänglich zu machen – inklusive Cover-Anzeige, ISBN-Scanner und Statistiken.
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Web Frontend │ │ Mobile App │ │ REST API │
│ (Next.js) │────▶│ (Flutter) │────▶│ (Node.js) │
│ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └────────┬────────┘
│
▼
┌─────────────────┐
│ PostgreSQL │
│ Database │
└─────────────────┘
Next.js 15 Web-Anwendung mit modernem UI
Tech Stack:
- Next.js 15.2 mit React 19
- TypeScript
- TailwindCSS + shadcn/ui
- REST-API Client (fetch)
- Excel-Import (xlsx)
- Barcode-Scanner (@zxing)
Features:
- Manga-Verwaltung (CRUD)
- Erweiterte Such- und Filterfunktionen
- Excel-Import/-Export
- ISBN-Scanner (Webcam)
- Statistiken und Dashboards
- Dark Mode Support
Setup:
cd frontend
pnpm install
cp .env.local.example .env.local
# .env.local mit API-URL und API-Key befüllen
pnpm devNode.js/Express REST-API mit JWT-Authentifizierung
Tech Stack:
- Express.js
- PostgreSQL (pg)
- JWT Authentication
- Helmet (Security)
- Rate Limiting
- Morgan (Logging)
Features:
- RESTful Endpoints für Manga-Verwaltung
- API-Key Authentifizierung
- Rate Limiting (100 req/15min)
- CORS-Support
- Health-Checks
Setup:
cd api
npm install
cp .env.example .env
# .env mit Datenbank-Credentials befüllen
npm startAPI-Dokumentation: Siehe api/README.md
Flutter-App für iOS und Android
Tech Stack:
- Flutter 3.0+
- Riverpod (State Management)
- Firebase (Push-Notifications)
- Mobile Scanner (Barcode)
- Cached Network Images
- HTTP Client
Features:
- Native Performance
- ISBN Barcode-Scanner
- Offline-Support (geplant)
- Push-Benachrichtigungen
- Bildupload für Cover
Setup:
cd app
flutter pub get
flutter runPostgreSQL-Datenbank mit 138+ Manga-Einträgen
Schema:
- UUID Primary Keys
- Volltext-Suche
- Automatische Timestamps
- Indizes für Performance
Felder:
- Titel, Band, Autor, Genre
- ISBN, Verlag, Sprache
- Status (gelesen, doppelt, neu kaufen)
- Cover-Image URL
- Timestamps (created_at, updated_at)
Setup-Anleitung: Siehe docs/DATABASE-SETUP.md
- Manga hinzufügen, bearbeiten, löschen
- Bulk-Operationen
- ISBN-basierte Suche
- Cover-Import
- Volltextsuche
- Filter nach Genre, Autor, Verlag
- Status-Filter (gelesen, doppelt, etc.)
- Sortierung nach verschiedenen Feldern
- Excel-Import (.xlsx)
- Datenexport
- Cover-Finder Script
- Gesamtanzahl Manga
- Gelesene/Ungelesene
- Duplikate
- Genre-Verteilung
- Top-Autoren
Frontend:
- Next.js 15.2 (App Router)
- React 19
- TypeScript
- TailwindCSS
- Radix UI (via shadcn/ui)
- REST-API Client (fetch)
- Zod (Validation)
- React Hook Form
- date-fns
Backend:
- Node.js
- Express
- PostgreSQL
- JWT (jsonwebtoken)
- bcrypt
- Helmet
- CORS
Mobile:
- Flutter 3.0+
- Dart
- Riverpod
- Firebase Core & Messaging
- JSON Serialization
- Mobile Scanner
Infrastruktur:
- Docker
- Caddy (Reverse Proxy)
- Cloudflare Tunnel
- PostgreSQL in Docker
- Node.js 18+
- Flutter 3.0+ (für Mobile App)
- PostgreSQL 14+
- pnpm (empfohlen für Frontend)
-
Repository klonen:
git clone https://github.com/commanderphu/manga-inventory.git cd manga-inventory -
Datenbank einrichten:
# PostgreSQL-Datenbank erstellen cd scripts/database psql -U postgres -f setup-postgres-manga.sql
-
API starten:
cd api npm install cp .env.example .env # .env konfigurieren npm start
-
Frontend starten:
cd frontend pnpm install cp .env.local.example .env.local # .env.local konfigurieren pnpm dev
-
Mobile App (optional):
cd app flutter pub get flutter run
Das System kann über Docker deployed werden:
- API: Docker-Container mit Express-Server
- Frontend: Vercel/Static Hosting
- Datenbank: PostgreSQL in Docker
- Reverse Proxy: Caddy mit HTTPS
Detaillierte Anleitung: docs/DEPLOYMENT-GUIDE.md
Für externen Zugriff kann ein Cloudflare Tunnel eingerichtet werden:
manga-api.phudevelopement.xyz → API
manga-inventory/
├── frontend/ # Next.js Web-App
│ ├── app/ # App Router Pages
│ ├── components/ # React Components
│ ├── lib/ # Utils & API Client
│ └── public/ # Static Assets
├── api/ # Node.js REST-API
│ ├── src/ # Source Code
│ ├── config/ # Configuration
│ └── migrations/ # DB-Migrations
├── app/ # Flutter Mobile App
│ ├── lib/ # Dart Source
│ ├── android/ # Android Config
│ └── ios/ # iOS Config
├── scripts/ # Helper Scripts
│ ├── database/ # DB-Tools
│ └── cover-finder/ # Cover-Import
└── docs/ # Dokumentation
Im Ordner frontend/public gibt es eine Beispieldatei:
manga-list.xlsx.examplekopieren- In
manga-list.xlsxumbenennen - Manga-Sammlung eintragen
- Über Web-UI hochladen
Datenbank-Tools (scripts/database/):
create-sqlite-db.js- SQLite-Datenbank erstellenexport-db.js- Datenbank exportierenexport-supabase-to-postgres.js- Supabase zu PostgreSQL migrierensetup-postgres-manga.sql- PostgreSQL-Setup
Cover-Finder (scripts/cover-finder/):
- Automatische Cover-Suche via ISBN
- Integration mit Cover-APIs
- API-Key Authentifizierung
- Rate Limiting (100 Requests/15min)
- Helmet.js für HTTP-Security-Headers
- CORS-Konfiguration
- HTTPS-Only (via Caddy)
- JWT für Mobile App (geplant)
Contributions sind willkommen! Bitte erstelle einen Pull Request oder Issue.
MIT License
Joshua (commanderphu) LinkedIn · GitHub
- shadcn/ui für die UI-Komponenten
- Supabase für die Backend-Services
- Vercel für das Hosting
- Flutter Community