Check it out at: http://base64.troypoulter.com/!
Have you ever found yourself in need of quickly encoding and decoding Base64 text, only to be disappointed by the available online tools? I decided to encounter this frustration for the final time and to take matters into my own hands.
So naturally, I stayed up late and built it.
I want to write this short post to explain my thinking on why I wasn’t happy with what’s out there today and what I learnt while making this, if you’d like to see the code it’s open-source and available on GitHub!
What did ‘good’ look like
After trying a few different existing tools, I was dissatisfied that most of them didn’t allow you to encode and decode on the same page, required you to click a button - which sometimes even refreshed the full page!
I know it can be a better experience than this, looking through what is out there helped me articulate my three main requirements for the tool to be good:
- Real-time updates: No more clicking buttons repeatedly. I wanted a tool that instantly reflected any changes I made.
- Simultaneous updates: The ability to modify either the encoded or decoded text and see the other update automatically, even if it meant amusing symbols when altering the encoded text.
- Utmost privacy: Above all, I sought a solution that assured me my data would not be sent or stored beyond the confines of my own browser. And with the code open-source and available on GitHub, anyone with doubts are able to check out the code and run it themselves locally if they wanted to!
How I built it
I’ve been working with React primarily professionally for several years now, though all of them have been client-side rendered (CSR) apps, I decided to explore Next.js - a framework that runs more on the server side (though not really applicable for this project), but also provides a suite of incredible features out of the box, such as the exciting new app router! For the styling, I opted for Tailwind CSS for it’s utility-first approach to styling, instead of my usual MUI as a refreshing departure from my normal go-to.
With Tailwind, I was especially excited to try out the amazing component library shadcn, which also came with a Next.js starter which I kicked off with:
| |
This template proved invaluable as a foundation for my project. Next, I incorporated text areas, buttons, and state management. Voila! The core functionality was up and running.
Next, I quickly deployed the app using Vercel for free hosting. I added a DNS record to my existing domain, troypoulter.com, and within moments, the web app went live at base64.troypoulter.com!
Over the following days, I made further enhancements, including analytics integration, Open Graph and Twitter Card support, and various refinements.
Reflecting on the experience
Though the tool I built may appear simple at first glance, the process introduced me to exciting new technologies that have left me enthusiastic about their future applications. Particularly, with how easy it is to build a prototype and deploy it online, I definitely want to use this type of stack for my future projects.
None of this would have been achievable without the incredible libraries I utilized. I encourage others who stumble upon my code, which is open-source and available on GitHub, to find value in it, meeting their specific needs just as it has met mine.