DEV Community

Cover image for Building a browser-only tool to turn QR codes into Lego bricks
Drazen Bebic
Drazen Bebic Subscriber

Posted on

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

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

Screenshot of

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!

Top comments (3)

Collapse
 
jess profile image
Jess Lee •

This is really fun ☺️

Collapse
 
drazenbebic profile image
Drazen Bebic •

Glad you like it! I'm building a 3D model generator for 3D Printers as we speak. Will probably go live in an hour or two :D

Collapse
 
jess profile image
Jess Lee •

Cool!!