2025 · 2026

Card Market App

Fullstack-Anwendung mit Bilderkennung

Bild hochladen, Karte per OCR erkennen, Sammlung verwalten, als CSV exportieren. React 18 und Vite im Frontend, Node/Express und Sharp dahinter, Cardmarket-API angebunden.

OCR im Browser
Cardmarket-API
CSV-Export
React 18
Vite
Node/Express
Tesseract.js
Sharp

Problem

Eine Kartensammlung zu erfassen heißt normalerweise: jede Karte abtippen, im Marktplatz suchen, den Preis übertragen. Bei ein paar hundert Karten hört man damit auf.

Lösung

Foto hochladen, fertig. Tesseract.js liest den Kartennamen per OCR, Sharp bereitet die Bilder vorher auf, die Cardmarket-API liefert den aktuellen Preis. Frontend in React 18 mit Vite, Backend in Node und Express, deployt auf Vercel und Railway.

Ergebnis

Aus einem Foto wird ein Datensatz in der Sammlung, exportierbar als CSV. Fullstack-Arbeit von der Bildverarbeitung bis zum Deployment – und ein Muster, das sich auf jede Art von Beleg- oder Etikettenerfassung übertragen lässt.