Collection Digital

Original Concept – UI Design – Frontend Development

A web application for small museums and individual collectors to save and share their collections, conceived from a real problem observed during museum work in London, designed during a UI course, and built as a group project during a full stack development course.

This project began as my own idea. Working as a collection assistant for small museums and individual collectors in London, I saw firsthand that most were documenting collections in Excel, Word, or a notebook. I wrote the brief, defined the problem, designed the initial wireframes, then brought the concept into a development course to build it.

The Problem

A real gap, observed firsthand

During my time working as a collection assistant for small museums and individual collectors in London, I noticed that most were documenting their collections using everyday tools that weren’t built for the job. The professional alternatives were designed for large institutions with complex requirements and large budgets — leaving individual collectors and small museums without a practical option.

• Most collectors used Excel, Word, or a handwritten notebook to document objects
• Images were stored in separate files with no connection to the object record
• Professional collection management software is built for large museums — complex features and large price tags
• No simple way to share collections publicly or on social media

The goal: collection software that is easy to use and affordable, designed for individuals and small museums, with social sharing built in from the start.

Project history

From idea to build

Design

Initial wireframes — from the UI Design course

Original wireframes produced during the UI Design course — dashboard, search results, and individual item page

The wireframes defined the core structure before any code was written — a dashboard showing recent items with filter sidebar, a search results grid, and an individual item page showing the main image alongside structured object metadata. These layouts informed the React component structure built in the development course.

The V&A API

Why the Victoria and Albert Museum

The Victoria and Albert Museum in London provides free public access to its collection data via API. I chose it specifically — not as a random free API, but because I know the institution from living and working in London. The V&A’s collection spans fashion, textiles, ceramics, furniture and design across cultures and centuries — a rich and varied dataset that reflects the kind of collection a real collector or small museum might hold.

The API returns structured object records including system numbers, object types, dates, artist/maker names, primary place of origin, accession numbers, and IIIF image URLs — all the fields a collection management tool needs.

V&A collection data rendered in the application

My Contribution

What I brought and what I built

Across the full project — from concept to code

• Originated the concept — identified the real-world problem from museum work in London, wrote the project brief, and defined the MVP scope
• Produced the initial wireframes during the UI Design course — dashboard, search results, and item detail page layouts that informed the final build
• Set up the Vite and React 18 project foundation, configured ESLint for the team, and established the folder and component structure
• Built the V&A item detail page — useParams routing, IIIF image rendering, structured metadata with graceful fallbacks for missing fields
• Wrote component-scoped CSS with mobile and tablet breakpoints throughout
• Integrated the frontend with the backend REST API — Axios, loading states, error handling, JWT authentication flow
• Managed the frontend GitHub branch — 341 commits, pull request review, merge conflict resolution

Code Sample

SearchResultsItem — component and CSS

The individual item detail page — the core view of the application. useParams extracts the V&A system number from the URL, the matching object is found in the data, and the IIIF image URL is constructed inline to request a 500px-wide version of the museum photograph.

SearchResultsItem.jsx

SearchResultsItem.CSS

What I Learned

Links