Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Four Card Feature Section

bem, lighthouse, react, pwa
P
Darkstar•1,490
@DarkstarXDD
A solution to the Four card feature section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello everyone! 👋

  • Started learning React recently so did this one with react. Created a component for the Card, and passed in the data for each card using props.
  • Started using Lighthouse. I sometimes get 100% and sometimes it shows 99%. I read that it's not consistent and can give different results for the same code. Also I get some errors when I run it on a browser that has chrome extensions installed. So I try it either on incognito mode or on pageSpeed Insights.
  • I used a different font color for the paragraph texts, since the color given in the style-guide did not pass the contrast check. Other than that I tried to match everything to the provided design.

Question

  • I wanted to make this a PWA and I added the necessary features to the code. And I passed the PWA check when I ran Lighthouse on the localhost site.
  • But when I deployed the site to Vercel, it doesn't pass the PWA. When I checked the Vercel deployment logs I found that Vercel doesn't copy the PWA icon images I had in my icons folder, to the assets folder Vercel creates when deploying the project.
  • I tried putting my icons folder in the public directory. But it still doesn't work.
  • Everything works well when I try on the locally hosted site. But on Vercel it breaks.

If someone can help me with it I would appreciate it so much. Thanks!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Darkstar's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License