Real-time artifact web app and NFC prototype for LACMA

As the world has transitioned to social distancing and contactless interactions these past few years, many museums have been thinking about ways for visitors to safely interact with artifacts at their museums. LACMA is no exception, so they approached Bluecadet (where I worked as a Senior Developer) with an idea for one way this could work and asked us to build a prototype so they could test it out on site.

The overall vision was for visitors to be able to find out more about artifacts through a web app on their mobile device and a personalized NFC tag that they can swipe at special, custom NFC reader stations throughout the museum. Each time a visitor swipes their tag at an NFC reader station, their web app session updates in real-time to show them more information about the artifact associated with that station.

Web app

Visitors access the web app through a QR code containing a unique URL associated with the specific NFC tag they are holding. If they can’t (or don’t want to) scan the QR code, they can also type the URL into their browser manually. When the app loads, it starts a WebSocket connection with Sanity so it can receive new content in real-time when the visitors NFC tag is swiped somewhere. Within seconds of swiping a tag a station, the visitor will see new content on their device.

The web app was built with Next.js and deployed to Netlify. Using Next’s API routes feature, we were able to seamlessly spin up an external-facing API that the NFC reader station hardware could send data to each time an NFC tag is swiped.

One of these API routes receives swipe “notifications” from the NFC stations and adds the event to session data stored in Sanity. Since the web app is also connected to Sanity, it observes these events in real-time and automatically displays relevant content to the visitor.

NFC reader station hardware

Each reader station consists of an Adafruit Metro ESP32-S2 with a PN532 NFC reader shield. When the PN532 shield detects an NFC tag, the Metro board sends data about the tag and itself to the API using the museum’s wifi network, triggering a content update to whichever user session is currently open for that tag.

NFC tags come in many shapes and sizes, so we ordered a variety for LACMA to experiment with. Some are cheap (under $1), some are disposable (like stickers), and some can even be worn as fashion accessories, like wristbands and rings.