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

Rest Countries API App

P
Andrija 510

@andrijaivkovic

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! This is my solution to this challenge. Everything was implemented as shown in the challenge as well as the optional theme switcher. Hope you will find my solution useful and if you have any suggestions or criticism feel free to write about them!

Community feedback

@asbhogal

Posted

Hi Andrija,

This is brilliant work - well done! The design matches the mockups really well and its great to see context used for global native state management. Just a few things I've noticed, more from a back-end and maintenance perspective:

  • Avoid using CRA for future projects, as Meta no longer supports this. For client-side applications such as these, Vite is your next best bet, it's relatively low-config and compiles SASS out-of-the-box (you'll just need to install it as a dev dependency as normal)
  • Always locally host your Google Fonts. You can install the typeface you need via the Fontsource dependency, then import the font weights required and declare the relevant properties needed. Here's a link to documentation for the font used here Link
  • Your _Country.scss file is empty. Presumably your styles are referenced elsewhere, in which case this can be removed
  • Netlify throws a 404 error on a page refresh/re-directs (this is a very common problem with React routing, I had the same issue with Vercel.) I've added some documentation here which will hopefully resolve this on your end Link

Hope this helps!

Marked as helpful

1

P
Andrija 510

@andrijaivkovic

Posted

Hi Aman,

Thank you for the provided feedback, much appreciated!

As for the solutions to the problems you pointed out:

  • I used CRA for this project because I'm used to it and I wanted to quickly setup the project. I realize that Vite is the superior way to setup a React project nowadays and I plan to transition to Vite for my future projects.
  • Thank you for suggesting that I host fonts locally, I didn't realize that can cause problems. Starting files from FEM suggest importing fonts straight from Google Fonts, so I guessed that is the way to go. Apparently it's not.
  • I had two unnecessary Sass files for pages that didn't include any rules, so I removed them as you suggested.
  • For the 404 errors on Netlify I tried fixing them by adding a PageNotFound page and creating a netlify.toml file with code below inside of it: [[redirects]] from = "/*" to = "/" status = 200. Please let me know if that fixed the issue.

Thank you for the provided feedback again!

0

@asbhogal

Posted

@andrijaivkovic Hi Andrija, apologies for the late reply. I've had another look at the deployment and can confirm that 404 error is now resolved on this end. The Google Fonts link in the starter files points to the typeface but I presume it's left open-ended as to how you implement them. I can pass a suggestion to Matt about possibly mentioning the best way to do this (ie. locally host), though explicit suggestions are generally avoided to prevent the challenges being too prescriptive and thereby leaving it up to us as devs to decide.

Marked as helpful

1

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