Skip to content
Submitted over 3 years ago

React QR Code Generator

react, accessibility
Travolgi 🍕•31,320
@denielden
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there :)

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 wanted to add features to this challenge using React:

  • 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

I am eager to further evolve this project and learn much more connecting a serveless database! For now I'd be happy to have some feedback ;)

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! And Happy coding ;)

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel•140
    @obriedan

    Amazing work! What library did you use to generate the QR code?

    Your form validation could use some extra information, it requests a URL, but doesn't specify that you need the protocol. www.google.com does not work, but https://www.google.com does. 👍

    Love it either way. Super clean.

    Marked as helpful
  • Kamasah-Dickson•5,570
    @Kamasah-Dickson

    Your solution is really good but I think there is supposed to be a restriction for the user to not choose same color for the QR and the card . E.g choosing red for the QR and red for the card background overlays the QR. Besides

    your solution is so inspiring :)

    Marked as helpful
  • ViicDev ☪︎•370
    @ViicDev

    excellent work 🤯

  • Mohit Jaiswal•90
    @mohit421

    Great, this really inspire me, this challenge at different level.

  • Martin•540
    @nonso01

    ooo! my gosh 😂😂😂! this is just mind blowing! great work sir

  • Rizkyani Indah Lestari•40
    @rzkyndhlstr

    wow!!!! so amazing👍👍👍👍👍

  • Nathanael Bonfim•10
    @nathabonfim59

    Awesome! Really liked that you provided a way to download the generated QR Code.

    Definitely something I'm looking forward to implementing in my own project, in a future iteration.

  • Nícolas Gabriel•140
    @Nick-Gabe

    Im really impressed with your result, you surely took the challenge even further. 👏👏

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord