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 , using React Typescript

Vinz 290

@kamnida1992

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


What are you most proud of, and what would you do differently next time?

I am proud of getting work on Typescript although i am very beginner and also i am proud to use React for this project.

i am open for suggestion. Thank you

What challenges did you encounter, and how did you overcome them?

i always struggle on typescript , but i will learn a lot .

Community feedback

P
alexander 1,300

@alex931d

Posted

Great solution but i notice some major flaws :)

  1. Search doesn’t work properly - when i search for example ‘ant’ all countries containing ‘ant’ no matter the order comes up usally when making an search bar you will want to check the position too
  2. React.FC is outdated and you should not use it
  3. Lack of error handling and datacontext - what i mean by that is you have no contexts where you load data from for example you chould have made an theme context and country context where you load the theme and set the theme and load the countries data from and set it you can use React’s context hook
  4. Instead of doing the loading of fetched data manually you should use something called react query since i notice you don’t take care of all edge cases, react query will do the work for you and even prioritize the fetch before the site is loaded

Hope all of it helps :)

Marked as helpful

0

Vinz 290

@kamnida1992

Posted

@alex931d Thank you.

0

@C3SC0-V4113

Posted

Hi! Im seeing your project and is looking cool! However there are some flaws:

  • There is a scroll in the x-axis in any size of the screen, you can solve this with the css property 'overflow'
  • Your toggle theme button only works in the logo, i think is better if the letters also are clickable
  • And the search overwrites the region decision, so you have only name search or only region search, but not both combined, i solved this by doing the region by API and the name using the filter option of javascript
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