zolee1337 / react-qrcode-generator

This challenge was to build the QR Code component, but it has become something more complex than a simple component!

QR Code Generator component - Frontend Mentor

This challenge was to build the QR Code component, but it has become something more complex than a simple component!
Inspired by another project, I also wanted to add features to this challenge:

• On load, it shows the default basic QR Code
• Added a form that allows the user to enter a website URL to generate a QR Code for it
• Dynamically update the QR Code as you type the URL
• Dynamically update the color and background of the QR Code based on the customization input entered by the user
• When the form is sent, the .png of the generated QR Code is downloaded

This is a evolved solution to the QR code component challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: github
• Live Site URL: live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• QRCode.react - For QR Code

What I learned

With this challenge I had the opportunity to learn and deepen:

• the use and manipulation of QRCode.react
• the correct use of Refs in react
• how the html canvas element works behind the scenes

I am eager to further evolve this project and learn much more!

Continued development

Add new features:

• Insert custom image inside the QR Code
• Choose the format of the image to download
• Connect with serverless database
• SignIn/Login
• Save the QR Code generated

Useful resources

• React Refs
• QRCode.react

Author

• Website - denielden
• Frontend Mentor - @denielden

Special thanks to @Remus432, he have really inspired me to create this dinamic component!
Thank you for taking the time to check out my project!

Have fun building! 🚀