/QR-Code-Generator

A simple website for generating QR-codes. The QR-codes can be personalised by using the color picker. The project was made to explore the use of custom hooks in React.

Primary LanguageJavaScript

QR Code Generator - Custom Hook Project

The project was to create a simple QR code generator, by creating and utilizing a Custom Hook.

The Problem

It was tricky in the beginning to grasp how the QRcode library worked. I used AI to help in understanding the code, by writing more comments for myself and playing around with the code. I pretty quickly got the generator to work, but I struggled a bit with the filename saving. After a lecture I realized I missed the "png" ending in a template literal.

When the code was working I decided to style it a little. I tried Tailwind, but I didn't really enjoy it. In my current workplace, all coders work with SCSS, so I decided to try that out this time. It was a new way to think, being able to nest code etc.

I also decided to add in a colorpicker functionality. I tried for a while to have two color pickers, one for the dark and one for the light. However, it ended up only choosing one of the colors even though I changed both. I decided to comment out these parts from the code, so that I can have a look at it in the future. Hopefully you won't get distracted by the commented out code.

I decided to not add a regex pattern to define a valid url, I thought it might also be relevant to be able to create a QR code for a search result for example.

View it live

https://qr-code-generator-lyckholm.netlify.app/