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!!