Submitted almost 2 years agoA solution to the Four card feature section challenge
Four Card Feature Section
bem, lighthouse, react, pwa
P
@DarkstarXDD

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
iconsfolder, to theassetsfolder Vercel creates when deploying the project. - I tried putting my
iconsfolder in thepublicdirectory. 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 GitHubCommunity 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