The other day I was on Product Hunt. And suddenly, a project caught my attention in a certain way. It was a QR code generator, rather, an API. In it, with a simple GET to the domain and the text you wanted to transform you got your image to use wherever you wanted.

So far so good, a normal API. But I noticed something, this API didn't have any specified path or any parameter in the URL. It was found this way:

https://do.mainofthe.api/TEXT_TO_CONVERT

And that was something I hadn't thought of, personally. Right after that I started thinking: "But, it won't do any good for images, links, etc.". This because in most pages you are given several options to generate a code (I'm not talking about the customization of it). I started to investigate and found that a QR code is basically a string of characters coded in black and white squares.

Right after having that information I realized that, in fact, most pages that offer services to deliver a QR code simply offer to transform them into text and give you the image. So I said to myself, "Hey, it shouldn't be that hard, I'll give it a try!".

The first thing I did was to look for a library to generate them, I just wanted to make a simple API to deliver the code, not the whole process. Then I found qrcode a NPM library that gives several options to generate the QR code. Then I started a project with fastify to have a simple and fast configuration of an API.

Later, I set up the main path to be able to do the translation from text to QR code, but I encountered a problem. When I added a URL to the same API fastify, it responded with a 404 error, because it took into account the diagonals of a URL (http:// for example).

Then I had to adapt the function a bit to make it usable in the main path and when a 404 error is sent from the server.

async function handler(request, reply) {
      let valueToQR = null;

      if (request.url !== '/') valueToQR = request.url.replace('/', '');
      else return reply.sendFile('index.html');

      const qrBuffer = await QRCode.toBuffer(`${valueToQR}`, {
         errorCorrectionLevel: 'H',
         margin: 0.5,
         width: 500,
      });

      reply.type('image/png'); // To show the image instead of download it
      reply.send(qrBuffer);
   }

With this function, using it as operation for the paths in "/" and in the cases of 404 error, I can handle the return of QR images. Since with fastify I can get what appears right after the domain. This value serves me as a parameter in the function of generating QR codes and voilà. Any text that is found after the domain will be transformed into QR code. This except for cases where you define specific paths.

After this configuration I can do whatever I want with the project. Personally I decided to make a small graphic interface to make the presentation a bit more enjoyable. Currently, you can access the project through the following link: QR Code Generator. I also leave a link to the repository, in case you want to see more in depth the source code.

Go to the repository

With this project I also tested for the first time Tailwind CSS and learned more about the settings of a PWA. But that is a topic for other posts. I would like to get your opinion of the project and also your feedback if there is any.