Building a browser-only tool to turn QR codes into Lego bricks

--- title: Building a browser-only tool to turn QR codes into Lego bricks published: true description: How I built a 100% client-side React app that converts data into optimized Lego QR code blueprints and exports BrickLink XMLs. tags: webdev, react, typescript, showdev cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl3z7vt4jh3y1n0yczrm.png --- Some time ago I built our home WiFi password QR code with Lego bricks. I ordered a white 32x32 baseplate and manually mapped the tiles from the QR code on my phone, then ordered the flat tiles from Lego Pick a Brick. It was a bit of a tedious process, especially making sure I optimized the parts list so I wasn't just buying hundreds of 1x1 tiles. Since I'm a developer, I really wanted to build a website that would help others do this faster and easier. I bought the domain about a year ago, and last weekend, with a little help from Claude to speed up the boilerplate, I finally built it: [brickcodes.com](https://www.brickcodes.com)  The technical approach: - Everything happens in the browser. Nothing is sent to a backend or saved in a database anywhere. - The app takes the encoded URL/text, generates the matrix, and maps it specifically for a 32x32 grid. - The coolest part is that it calculates an optimized parts list and exports a valid BrickLink XML file. You can just upload it to BrickLink and immediately order exactly what you need. It also generates a visual instruction guide for the build. The tool is entirely free. I'm not gonna tell you what you can do, play around with it - it's fun. It's just a little side project built with React and TypeScript that I hope will be useful to some fellow makers. PS: I'm looking for frame recommendations that would fit these 32x32 baseplates nicely. If you know a website that has some good frames (or a solid IKEA hack), let me know in the comments. Thoughts, critique, and general feedback are more than welcome!