Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator responsive app

Jose 80

@JooseMM

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! The only issue for me was that in Firefox the fetch method was pulling data out of the cache memory instead of the URL provided as an argument. I fixed it specifying the cache policy as it's mention in this article.

https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

Community feedback

@asbhogal

Posted

Hi Jose,

Great work! The design matches the mockup nicely and the app is responsive and functions well (I like your coding practices here too with the custom hook and useEffect implementation. Nice.) Just a few things which are worth considering:

  • Always locally host your Google Fonts for privacy and performance reasons. Since you're in an npm environment, you can install the typeface as a Fontsource dependency, import the weights require then declare the relevant properties in your styling. Here's the documentation for the Manrope font Link
  • Avoid using Create React App, as Meta no longer supports this. For client-side applications like these, switch to Vite.

Hope this helps!

Marked as helpful

1

Jose 80

@JooseMM

Posted

Hi @asbhogal

Thank you so much for your recommendations, I will start implementing it in my future projects!.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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