REST Countries API with color theme switcher

Solution retrospective
Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.
I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.
I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!
Thanks
Please log in to post a comment
Log in with GitHubCommunity feedback
- @adram3l3ch
Hi Catherine you did a great job :) . You can sort out the border issue by making the border as a component itself and fetch about that country on that component. Also the problem of github pages with SPAs can be solved by using something like
(function(l) { if (l.search[1] === '/' ) { var decoded = l.search.slice(1).split('&').map(function(s) { return s.replace(/~and~/g, '&') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location))
You can refer about the same here
Marked as helpful - @fadelun
i have seen your website, but when dark mode some color it doesn't change. maybe you can check on style.css, there is ".region-list option"
Marked as helpful - @denielden
Hey Catherine, congratulations on completing the challenge! You did a great job 😉
Let me give you some little tips for optimizing your code:
- add
header
tag ad wrap thenav
to improve the Accessibility - with
main
tag wrap the content of page - add descriptive text in the
alt
attribute of the images - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of flag images and styling directly theimg
element - use
ul
element for the details text of country instead of multiplep
- if you want to use the title for the
href
attribute you have to parse it inurl
, it can give problems creating links with empty spaces or special characters - if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
- I would also add a query reset button, I find it very convenient
- in the filters there is no way to return to all countries after choosing a region, add an entry "all region"
- in the region filter after clicking on a region the submenu does not close
- instead of using
px
use relative units of measurement likerem
-> read here - to fetch data from API create and use a custom hook so you can reuse the same code in many different components and keep the logic separate from the design
Hope this help! Happy coding 😁
Marked as helpful - add
- P@christopher-adolphe
Hi @catherineisonline,
You did a great job in completing this challenge using React. 👍
- For your issue to display the border countries, I suggest you build a list of countries with their respective alpha codes on the initial load since you are already fetching all the countries. Something like this:
const countryCodes: [ { name: 'Albania', alpha2Code: 'AL', alpha3Code: 'ALB' }, { name: 'Algeria', alpha2Code: 'DZ', alpha3Code: 'DZA' } ]
Then you could store this list in a global state using React's context API and when a user goes to the
country
page you can find the country codes from thiscountryCodes
list and map them to their respective full name.- It might also be a good thing to wrap asynchronous logics in a
try...catch
block to catch any potential errors.
I hope this helps.
Keep it up.
Marked as helpful - @Javieer57
Hi!
I found a bug in the neighboring countries' tags. When you click on one, it adds the neighboring countries of the current one to the neighboring countries from the previous screen. Excellent job! :)
- @Jukiyoomi
I think you can get data of a country using its code with this link https://restcountries.com/v3.1/alpha/{code} from the api.
- @KorneyChervonenko
HI! Your solution looks nice though there are a couple of things you can improve:
- Region selector provides only 5 options despite the fact that there are 8 of them in the country database
- Clicking on India in boundary countries for some reason derives information about the British Indian Ocean Territory instead of India.
- Clicking on the Back button just jumps to the homepage instead of returning to the previously viewed country.
- @qadzek
Nice work. I like how you have implemented the "Filter by Region" menu.
A couple of small remarks:
- I can confirm the bug described by @Javieer57.
- The use of
any
in TS is discouraged. - There are tools online to automatically convert a JSON response to TS types: https://app.quicktype.io
- I don't think there is a need for separate
FilteredCountries
andAllCountries
components. - A single API call should suffice.
- @Samadeen
Hello Catherine... You did beautifully well on this project, can you kindly recommend resources to learn React
- @D3press3dd
wow, you've grown quite a bit in the area, keep it up, check out this tool for animations https://www.framer.com/motion/ you can see what you can do in my solution to this challenge, it is really intuitive you can check this video https://www.youtube.com/watch?v=u_95SPKE6vg and see how it works in just 5 minutes
- @sparrowsl
This is just too amazing, makes me want to do it now. I have no words to say here :)
I only found that the spacing on the right side is not consistent with the left (on desktop) Everything else if just fire and amazing
- @Zein-MB
Amazing! you're just an example of success!!
- @Valeri85
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') Search.js:21 e = e.value;
- @vickydarlinn
after a long time.....But Amazing🔥
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