Collection Digital

Ursprüngliches Konzept – UI-Design – Frontend-Entwicklung

Eine Webanwendung für kleine Museen und Einzelsammler zum Speichern und Teilen ihrer Sammlungen – entstanden aus einem realen Problem, das während der Museumsarbeit in London beobachtet wurde, im Rahmen eines UI-Kurses designed und als Gruppenprojekt in einem Full-Stack-Entwicklungskurs umgesetzt.

Dieses Projekt begann als meine eigene Idee. Bei meiner Arbeit als Collection Assistant für kleine Museen und Einzelsammler in London habe ich aus erster Hand erlebt, dass die meisten ihre Sammlungen in Excel, Word oder einem Notizbuch dokumentierten. Ich habe das Briefing geschrieben, das Problem definiert, die ersten Wireframes designed und das Konzept dann in einen Entwicklungskurs eingebracht, um es zu bauen.

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 ich gelernt habe

Links