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.