Post

Sam Rose
@samwho.dev

Had a fun design challenge while making the barcode scanner. 🧵

Sam Rose@samwho.dev

I’ve taken to vibe coding little apps for my kids and hosting them at kids.samwho.dev. They love it. They’re all PWAs so they can look like apps on your home screen if you want. My eldest has loved self-scan at Tesco recently so I made a lil’ barcode scanner app for him 😁

Sam Rose
@samwho.dev

I found an openly licensed set of products (“nudger” if you wanna look it up) and it has like 100M+ products in it. Perfect. Problem is: I don’t want to make a backend for this project. It’s a moving part I don’t care for. I just want to serve this statically out of nginx.

0 reposts4 likes

Sam Rose
@samwho.dev

The full dataset, even when stripped to the bare minimum fields, was a few hundred megabytes. A bit much to load over the wire.

Sam Rose
@samwho.dev

GTINs (barcode numbers) are 14 digits long and fit comfortably into JavaScript’s int53. So I broke the data out into roughly evenly sized chunks ordered by their GTIN and numbered them 0 to n.

Sam Rose
@samwho.dev

Then I made an index that is literally just a list of ints, each int representing the maximum GTIN in the chunk associated with its position in the index array.

Sam Rose
@samwho.dev

So you load this index when the page first loads (it’s about 100kb compressed), scan a barcode, and then binary search the index to find the chunk you’ll find it in. Then you load /chunks/<index>.json from the server.