Skip to content
Submitted over 2 years ago

Project with responsive searching component.

Jakub Krwawicz•320
@kerminek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hi, I've made this project using a few of new for me technologies:

  • tailwind.css
  • react-spring
  • react-virtualized

I started project with typescript, but i did't use it as much as i could, definitely will be using it more in the future. I think that most interesting part is smooth searching functionality, because as i saw, people usually submit solutions with search bar that is lagging our app when rendering a lot of new country-tile components. Dark mode functionality was made using tailwind. App is fetching data only once, then it's stored using react context. Please let me know your opinions. Would appreciate all the feedback :)

Community feedback

  • AnaesthCode•100
    @AnaesthCodePosted over 2 years ago

    Very smooth search function and loading in general.

    For the "border countries" i used the package country-iso-3-to-2 found here: https://www.npmjs.com/package/country-iso-3-to-2 to turn the ISO3 code to a ISO-2 code which could then be used with the Intl.DisplayNames-function to get the whole name.

    1
  • Curtis•930
    @webguy83Posted over 2 years ago

    Looks good! Looks pretty much similar to mine at first glance :D. As previously mentioned I think the Border Country buttons in the detailed view probably should link to the other countries but it's pretty minor! For the Regions there is also Antarctica and Antarctic Ocean but seeing as hardly any items there it is barely worth it to put it in.

    1
  • Sebastian•300
    @sandlerzPosted over 2 years ago

    Hi Kuba again, Your page and file structure it's nice, I like its animations.

    I think you have a forgotten button for the countries border section that redirects to that country ( I don't know if it's required but it looks like btn design ).

    Have a good starting weekday.

    1

Please log in to post a comment

Log in with GitHub

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