Well, the new year has started. And to go with it, I’ve updated my side project Byte Size Links.

What is it, and why the changes? Well, it’s a bit of a story. Some time in 2023, I was using sites like Bitly to shorten the ridiculously long links provided for Google Docs(including in reminder posts for a committee I was part of; I thought it would be nice to make this link more personal to the identity/brand of the committee). So I reached out to the overworked IT support person, who agreed this was a workable idea and that he had a Top Level Domain (TLD) ready to go once he had time. He mentioned that ‘How to build such a service’ is a common interview question, and therefore a common portfolio project.

Appoaching this from my skill set as a front end developer, I thought the solution could be a simple VueJs app to recall the short URLs from a database in a backend – a service such as Firebase or Supabase. Set on the latter, I set to work on the first step – research the practicalities of achieving this. I knew I wanted to use Vue and SupaBase; and that I’d need a way of creating a unique ID to serve as the table row ID. I turned to Chat GPT for some advice, which included suggestions on names and TLD for the site.

Now I had a name, 2 TLD (bytesz.link & bytsize.link), and a rough plan on how the service would work: a simple home screen to input a long link in the Vue app, Vue to store that link in its supabase, then return the ID as the slug of the short link (the slug is the part after the slash in his case). Now I needed a design. I’d heard of Vercel’s design AI v0, so I turned there for the basics. Hours of coding and Chat GPTs helped when stuck. I had a service, basic but working.

Then I learnt about Daisy UI, a Tailwind CSS component library, and thought it would raise the bar on the app. Starting again, adding tailwind and Daisy UI, I decided to add an About section, plus update to Nuxt from Vue, giving me an API route to hide the supabase API details. This also meant I could use the supabase Nuxt module.

V1.5 was updated and live, the hosting moved from Vercel to Cloudflare pages at this stage. There was an issue, while small, that still made the service unusable after a while. Supabase’s free tier would shut down a project should it not be active for a certain amount of time. As to be expected at this stage, no one was using the service.

While looking into Cloudflare’s offerings, I noticed they’d updated workers and pages to be natively binded to their other services – crucially their storage services; and this was somewhat free. I decided to move Byte Size Link to use Cloudflare KV (Key Value) store. This would make sure it continued to work even if there were long periods of inactive time.. v0 had also had a big update and I used it to build a website for a family business, making this a timely opportunity to update looks and styling.

V2 is now live, using Nuxt and CloudFlare. Have a look at it and at the GitHub repo linked on the about page using either https://bytesz.link/ or https://bytsize.link/ I would love your feedback – and please feel free to reach out to me via LinkedIn.

Wow, what a journey around the galaxy. I hope you had your towel, hitchhiker.

Ellery Hulme

(they/he)

Building My Own URL Shortener: A Vue, Supabase, and Cloudflare Odyssey