Chris Garrett Chris Garrett


35/M/UK

I'm Chris Garrett, a founder and entrepreneurial technologist working at the intersection of design and engineering.

Work with me

I help startups and established brands develop new digital products through my studio, Hyperlaunch, which specialises in early-stage product development and rapid prototyping.


Project: NFC Thing

I’ve been involved in a bunch of “Industry 4.0” projects over the years, essentially creating trackability through on-the-floor systems (typically in settings like warehouses, construction sites etc).

The choice of implementation has generally come down to: “Are we going to ship a native app?” If so, we’ll use NFC tags; if not, we’ll use QR codes.

I much prefer to ship web apps for this sort of project, mainly because of the freedom of deployment/lack of gate keepers. So I was super excited when I stumbled across the Web NFC API at the weekend.

So much so, I decided to build NFCThing - a React based SPA for reading and writing NFC tags entirely from the browser.

3D visualisation of the NFC Thing PoC

As you’d expect, Apple are dragging their heels so it’s only usable with Chrome on Android right now. This is fine for my embedded use cases, but wider support would open up a whole world of more creative possibilities.

In terms of build, the source is available here (I wrote a hook around the Reader API that mimics the ergonomics of SWR somewhat). You can try the app out here (in Chrome on an Android device).

As with most of my toy projects, I decided to bundle in some R&D - specifically trying out Bun’s new bundler. This is a development I’ve been eagerly anticipating, and was very happy to put to use. The entire app dev/build life cycle is managed by Bun. It’s generally a beautiful thing, but I did hit a few rough edges:

  • The bun tailwind plugin seems to struggle with builds to nested output directories (ie. building to ./dist works fine, but building to ./.output/static results in none of the used tailwind classes being bundled into the CSS file)
  • When I was deploying to Vercel with their standard CI/CD, the index.html file generated from bun run build was broken/didn’t match up with what I’d get from running the same process locally; there were no errors thrown, so I ultimately put this down to Vercel’s version of Bun being out of date
  • Until that gets resolved, I wrote a quick Github action to build the output and deploy it to Vercel as a prebuilt bundle

So the end result is a nice little demo of the Web NFC capabilities, using bun end-to-end, with automated deployments to Vercel.