This is a solution to the QR Code Component Challenge on Frontend Mentor.
Users should be able to:
- Generate a QR code by inserting a string or link in the input
- Change the format of the image of QR code
- Change the background color of the generated QR code
- Embed the link of the QR code's picture
- Download the QR code's image with the prefered background and format
- Live Site URL: https://kens-visuals.github.io/qr-code-generator/
- Solution URL: https://www.frontendmentor.io/solutions/qr-code-generator-with-react-and-material-ui-XpZA7o_Ke
- React
- MUI Library
- QR code API
- Semantic HTML5 markup
- CSS Flexbox
- CSS Grid
- Mobile-first workflow
This small but really cool project has taught me a lot and helped me to practice my newly learned React skills. I've worked with class components before, but working with function components seems to be a lot cooler. The code is more concise and easy readable. When building stuff with Vanilla JS, I was used to making everything by myself, however, now that's not the case anymore. It's not that I stopped liking making things by myself, but I think that I don't have to know how to write a code that'll generate a QR code, when I can easily add that functionality in my React project. This is just the beginning, but I can surely say that I already like working with React a lot!
Since this was a small project and didn't have a lot of components involved, I didn't do much in terms of file structure. However, for the future projects I'm going to pay closer attention to that and to some other things as well.
- QR code API - Simplest QR code generator that helped me to build this cool project.
- filesaver.js - If you're looking for a JS filer saver, this is my recommendation.
- copytoclipboard.js - In case if you were wondering, this is what I used for the embed button to copy to clipboard the link of the QR code.
- Medium - @kens_visuals
- CodePen - @kens-visuals
- Codewars - @kens_visuals
- Frontend Mentor - @kens-visuals