Submitted over 2 years ago

QR Code Generator with React and Material UI

#accessibility#material-ui#react#fetch

Ken• 4,915

@kens-visuals

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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!

This is my very first React project, so if you have any suggestion or feedback, make sure to leave a comment 👨🏻‍💻 Cheers 👾

P. S. It feels so good to be back!

Community feedback

Travolgi 🍕• 31,480

@denielden

Posted about 2 years ago

Hi Ken, great job congratulations!

Here are a few tips for improve your code:

you can remove the <div class="container"> because it is superfluous
if I insert some empty spaces or something that is not a link the qr can be downloaded anyway, I would add a control
after downloading the page breaks and turns blank, you could add a download message or reset everything

Overall you did well 😁 Hope this help!

Marked as helpful

Ken• 4,915

@kens-visuals

Posted about 2 years ago

Hey @denielden 👋🏻

I'll take a look at the first two points, but I don't think I can do anything about the third one because the download functionality is using a third party library, andddd it used to work great before recently. So it may be something on their end, but I'll try to fix that too, thanks for letting me know.

Thanks for the compliments, Cheers 👾

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