Skip to content
Submitted almost 3 years ago

React QR Code Generator

#react#accessibility
Travolgi 🍕•31,400
@denielden
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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 ;)

Community feedback

  • Daniel•140
    @obriedanPosted almost 3 years ago

    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
    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @obriedan Thank you so much! I used QRCode.react

    I know, but thanks for the helpful observation! I have to fix some things and I want to evolve more as soon as I have more time.

    Feel free to clone the repository and come up with your adding features by creating your own feature branch to the repository, that would be awesome ;)

    Happy coding!

    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 3 years ago

    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
    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @Kamasah-Dickson Excellent observation! I'll add checking the two fields;) Thanks

    I am very pleased that my solution is stimulating :)

    0
  • VicDev ☪︎•330
    @ViicDevPosted almost 3 years ago

    excellent work 🤯

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @PitagoraStrike Thanks! :)

    0
  • Mohit Jaiswal•50
    @mohit421Posted almost 3 years ago

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

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @mohit421 Thanks! I'm glad you are an inspiration 😉 and happy coding!

    0
  • Martin•480
    @nonso01Posted almost 3 years ago

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

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @nonso01 Thank you! :)

    0
  • Rizkyani Indah Lestari•40
    @rzkyndhlstrPosted almost 3 years ago

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

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @rzkyndhlstr Hi Rizkyani, Thank you! :)

    0
  • Nathanael Bonfim•10
    @nathabonfim59Posted almost 3 years ago

    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.

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @nathabonfim59 Thank you. It makes me very happy to inspire you!

    Happy coding ;)

    0
  • Nícolas Gabriel•140
    @Nick-GabePosted almost 3 years ago

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

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @Nick-Gabe Hi Nícolas, Thank you! I hope it can inspire you :)

    1

Please log in to post a comment

Log in with GitHub

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