Spent the whole day building this Arduino Uno pinout explorer free web app. I tried to use a ready-made Arduino board SVG image file, but the pins never lined up properly - ended up creating everything from scratch to get it right.The alignment and creating an accurate board look was really tricky, but I'm happy with how the UI looks and functions now.
Below is a brief video which shows how it works:
There are always things to improve. I'm thinking of adding a few more features - maybe put something in the empty space beneath the board area, make it more interactive, or even attempt a 3D version someday. Would also love to add code examples for each pin, a search bar, and maybe versions for Mega and Nano.
I have plans to build more for similar boards, but first I want to finish and learn from this Arduino board web app. These days I'm spending more time on web app development - recently I built a couple of WebRTC web apps: a phone to desktop file transfer tool and a phone screen mirroring web app. Really excited about exploring this space further.
I've been thinking maybe I could combine WebRTC with this Arduino pinout explorer somehow, but I don't have any idea what it would achieve, what it would look like, or most importantly whether it would even be useful. Probably overthinking it!
But for now, I think this pinout explorer will be useful for Arduino users and beginners who need to look up board capabilities, features, and pin functions without digging through datasheets.
