Submitted over 2 years ago

React QR Code Generator

Travolgi 🍕• 31,420

@denielden

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@obriedan

Posted over 2 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

Travolgi 🍕• 31,420

@denielden

Posted over 2 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!

Kamasah-Dickson• 5,590

@Kamasah-Dickson

Posted over 2 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

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

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

I am very pleased that my solution is stimulating :)

𝄃𝄃𝄂𝄂𝄀𝄁𝄃𝄂𝄂𝄃 VicDev 𝄃𝄃𝄂𝄂𝄀𝄁𝄃𝄂𝄂𝄃• 320

@ViicDev

Posted over 2 years ago

excellent work 🤯

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

@PitagoraStrike Thanks! :)

Mohit Jaiswal• 50

@mohit421

Posted over 2 years ago

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

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

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

Martin• 460

@nonso01

Posted over 2 years ago

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

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

@nonso01 Thank you! :)

Rizkyani Indah Lestari• 40

@rzkyndhlstr

Posted over 2 years ago

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

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

@rzkyndhlstr Hi Rizkyani, Thank you! :)

Nathanael Bonfim• 10

@nathabonfim59

Posted over 2 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.

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

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

Happy coding ;)

Nícolas Gabriel• 140

@Nick-Gabe

Posted over 2 years ago

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

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

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

Please log in to post a comment

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