Submitted 3 months ago

QR Code Next Tailwind Storybook

MJDFreelance• 10

@MJDFreelance

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

What are you most proud of, and what would you do differently next time?

This was quite a basic challenge for me so was not much of a problem in terms of HTML/css. I didn't do anything on the accessibility side, I want to start focussing on this.

What challenges did you encounter, and how did you overcome them?

From a HTML/css side, there were no challenges. Deploying Next and Storybook both to Vercel from the same repo was a bit of a nightmare since I'm new to Vercel. In the end (and after some time spent searching docs and consulting with Stack Overflow and ChatGPT) I ended up ditching the IaC approach and setup separate projects, configured via the Vercel console to serve different build types.

What specific areas of your project would you like help with?

Any and all comments would be welcome. Any advice or recommendations on improving the accessibility of the component would be especially good.

Community feedback

chelsea-here• 140

@chelsea-here

Posted 3 months ago

Hi there, I enjoyed comparing our solutions to this problem. I've learned from your styling solutions, like using gap. I also appreciate your separation of the code for the QR card into its own component. My only suggestion would be to try incorporating Next.js Image Component.

Here is what that code looked like for me:

          <Image
            className="rounded-lg"
            src="/image-qr-code.png"
            alt="qr code"
            width={288}
            height={288}
            priority
          />

Cheers!

Chelsea

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