Collection Digital

Das Problem

Eine reale Lücke, aus erster Hand beobachtet

Während meiner Zeit als Collection Assistant für kleine Museen und Einzelsammler in London habe ich festgestellt, dass die meisten ihre Sammlungen mit Alltagswerkzeugen dokumentierten, die nicht für diesen Zweck entwickelt wurden. Die professionellen Alternativen waren für große Institutionen mit komplexen Anforderungen und großen Budgets konzipiert – und ließen Einzelsammler und kleine Museen ohne praktische Option zurück.

• Die meisten Sammler nutzten Excel, Word oder ein handgeschriebenes Notizbuch zur Objektdokumentation
• Bilder wurden in separaten Dateien gespeichert, ohne Verbindung zum Objektdatensatz
• Professionelle Sammlungsverwaltungssoftware ist für große Museen ausgelegt – komplexe Funktionen und hohe Preise
• Keine einfache Möglichkeit, Sammlungen öffentlich oder in sozialen Medien zu teilen

Das Ziel: Sammlungssoftware, die einfach zu bedienen und erschwinglich ist, für Einzelpersonen und kleine Museen designed wurde – mit integrierter Social-Sharing-Funktion von Anfang an.

Projektgeschichte

Von der Idee zum Aufbau

Design

Erste Wireframes – aus dem UI-Design-Kurs

Ursprüngliche Wireframes aus dem UI-Design-Kurs – Dashboard, Suchergebnisse und Einzelansicht

Die Wireframes haben die Kernstruktur vor dem ersten Code festgelegt – ein Dashboard mit aktuellen Objekten und Filter-Sidebar, ein Suchergebnisraster und eine Einzelansicht mit dem Hauptbild neben strukturierten Objektmetadaten. Diese Layouts haben die React-Komponentenstruktur des Entwicklungskurses geprägt.

Die V&A API

Warum das Victoria and Albert Museum

Das Victoria and Albert Museum in London bietet über eine API kostenlosen öffentlichen Zugang zu seinen Sammlungsdaten. Ich habe es bewusst gewählt, nicht als beliebige kostenlose API sondern weil ich die Institution aus meiner Zeit in London kenne. Die Sammlung des V&A umfasst Mode, Textilien, Keramik, Möbel und Design aus Kulturen und Jahrhunderten – ein reiches und vielfältiges Datenset, das dem entspricht, was ein echter Sammler oder ein kleines Museum besitzen könnte.

Die API liefert strukturierte Objektdatensätze mit Systemkennzahlen, Objekttypen, Datierungen, Künstler- und Herstellernamen, Herkunftsorten, Inventarnummern und IIIF-Bild-URLs – alle Felder, die ein Sammlungsverwaltungstool benötigt.

V&A-Sammlungsdaten in der Anwendung dargestellt

Mein Beitrag

Was ich eingebracht und was ich entwickelt habe

Über das gesamte Projekt – von Konzept bis Code

• Das Konzept entwickelt – das reale Problem aus der Museumsarbeit in London identifiziert, das Projektbriefing geschrieben und den MVP-Umfang definiert
• Die ersten Wireframes im UI-Design-Kurs erstellt – Dashboard, Suchergebnisse und Einzelansicht, die den finalen Aufbau geprägt haben
• Die Vite- und React-18-Projektgrundlage eingerichtet, ESLint für das Team konfiguriert und die Ordner- und Komponentenstruktur festgelegt
• Die V&A-Einzelansicht entwickelt – useParams-Routing, IIIF-Bilddarstellung, strukturierte Metadaten mit sinnvollen Fallbacks für fehlende Felder
• Komponentenbezogenes CSS mit Mobile- und Tablet-Breakpoints durchgehend geschrieben
• Das Frontend mit der Backend-REST-API integriert – Axios, Ladezustände, Fehlerbehandlung, JWT-Authentifizierungsablauf
• Den Frontend-GitHub-Branch verwaltet – 341 Commits, Pull-Request-Review, Merge-Konfliktlösung

Code-Beispiel

SearchResultsItem – Komponente und CSS

Die individuelle Objektdetailseite – die zentrale Ansicht der Anwendung. useParams extrahiert die V&A-Systemkennzahl aus der URL, das passende Objekt wird in den Daten gefunden und die IIIF-Bild-URL wird inline konstruiert, um eine 500px breite Version des Museumsfotos anzufordern.

SearchResultsItem.jsx

SearchResultsItem.CSS

Was das zeigt

useParams extrahiert die V&A-Systemkennzahl aus der URL – jedes Museumsobjekt ist direkt verlinkbar, ohne zusätzliches State-Management. Die IIIF-Bild-URL wird inline über ein Template Literal konstruiert und fordert eine standardisierte 500px breite Version des Museumsfotos an – ein Format, das ich aus der Arbeit mit digitalen Museumssammlungen in London kannte. Jedes Metadatenfeld verwendet einen ternären Fallback, da V&A-API-Daten für viele historische Objekte unvollständig sind. Das CSS ist in einer separaten Datei komponentenbezogen, mit Mobile- (600px) und Tablet-Breakpoints (1023px), die das Layout auf allen Bildschirmgrößen nutzbar halten.

Prozess & Praxis

Was ich gelernt habe