I've been interested in blockchain since 2013. It always seemed really fascinating to me. I still have emails that I sent to my family trying to convince them to buy Bitcoin at the time (they didn't listen).
Although I was always interested in the space, I never contributed to any blockchain projects. At the beginning of 2021, I discovered the Stacks Foundation. They were rewarding grants to people that wanted to build with Stacks.
Stacks makes Bitcoin programmable. It helps bridge the gap between Bitcoin and Ethereum.
I had the idea to make a JavaScript library that would enable anyone to easily accept STX donations on their website. Like a Buy Me a Coffee but integrated with the Stacks blockchain.
I was awarded a Stacks Grant and this project is what came of my idea.
Lessons Learned
This was the first time I ever built a JavaScript library that would be embedded onto people's websites. I had to dive deeper into build tooling than I had before.
Learning how to wrangle my Webpack bundle to replace specific Node packages with web-friendly ones was my biggest challenge. Some of the Stacks libraries I was using required me to use fallbacks, especially with the Buffer package.
Tech
ESBuild
I chose to use esbuild with Webpack. It's an extremely performant bundler and minifier for JavaScript. Thanks to esbuild-loader it was dead simple to setup.
Stacks Libraries
stx.me connects to a user's Stacks wallet (a Chrome Extension). In order to do this, I utilized a few Stacks libraries.
The libraries are used to authenticate a user and sign their donation transaction.
I was pretty impressed with the documentation and developer experience of the libraries. The design team at Stacks heavily inspired the stx.me website as well.
Misc
- TypeScript
- Tailwind CSS
- Used to make things pretty
- Testing Library
- Used to get that code coverage to 100%
- Webpack
- Next.js
- Next is my favourite tool for building stuff on my own
- Vercel
- Could deployments be any easier?