React REST Countries & Weather API with color theme switcher

Community feedback

• 

  Isaac Novaes•650

  @isaacnovaesPosted over 2 years ago

  Hey @danielden!

  Great job! Your solution looks great. Also, the idea of displaying the country's weather and localization is awesome. However, I have a few suggestions:

  • If I go to any country detail and reload the page, your website crashes. I think that you should look into it
  • For a tablet dimension, for example, 811 x 860, all border country buttons are stacked in a column, leaving too much space which could be better used. So fixing it could improve the UI and the responsiveness
  • If a country has no currencies, nothing is displayed. I think that at least a "no currency" message should be displayed
  • If a country has no border, like Antarctica, a UI button with "no countries" text is displayed. I think that only a simple text fits best here instead of a UI button because, in this border countries section, a button links you to another country

  Marked as helpful

  2

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @isaacnovaes thanks for your suggestions, we will fix them as soon as possible!

  I am afraid that the first point is due to the configuration of the netlify environment... I will delve into the bug

  Thanks again :)

  1

  

  Isaac Novaes•650

  @isaacnovaesPosted over 2 years ago

  @denielden yep, that’s exactly it. Normally, for every request, the hosting server sends a different HTML, CSS, and JS files. However, when we use React Router, we don’t want this behavior, since with React Router our app is a SPA, i.e. only one HTML file. So we should set the hosting server to always direct the path for the index.html, because whenever the URL changes, React Router will take care of what should be displayed.

  Thankfully, it is easy to do. Check out this Youtube video

  Marked as helpful

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @isaacnovaes Wow! Thank you so much :)

  1
• 

  Kevin Mason•280

  @mrfinesse47Posted over 2 years ago

  hello,

  good job on this project especially with the maps and weather additions. one thing i noticed is that some of the buttons such as "back" don't change the cursor to pointer. The Neighbour countries buttons only work when you click on the text but not anywhere else on the button. I also think the drop down items can use some more styling to be more inline with the design documentation. I really liked the loading transition, and custom slider. You have lots of neat extra additions.

  Marked as helpful

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @mrfinesse47 Thanks for your feedback!

  I will fix the points you mentioned, but unfortunately it isn't possible to customize the drop-down menu using a select type input

  happy coding :)

  1
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  hi, There are few thinks i like to point about: 1.You are making lots of network request, which i think is not required. First duing filtering, You already have data for all the countring filter from that data rather than making a new network request. 2.After visiting detail page, when going to home page again, you made another request, which i think was not required. Just transfer the data fetching logic to "app.js" file that way you data will be save irrespective of the page. 3. To make it even faster you can keep track which country detail info has been fetched and store it. That way if user again open the same page rather than making a new request just used the stored data.

  Here is how i did: https://www.frontendmentor.io/solutions/react-tailwind-scss-context-api-axios-B-76lKa-G

  I also made this using nextJS. which is supe-fast with no refesh as it is a static generated page. https://www.frontendmentor.io/solutions/nextjsstatic-generation-styledcomponets-ht7_ZZF55

  Good luck #happyCoding

  Marked as helpful

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @besttlookk Thanks for your feedback!

  I know that I am doing a lot of network requests... but since there are no limits in the API I have done so to also shorten the development time. Your reasoning is very correct and right to optimize the app.

  Maybe when I have time I will improve this aspect!

  Thank you and happy coding :)

  1
• 

  the prince•30

  @AAHMMPosted almost 2 years ago

  AMAZING GOOD WORK

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @AAHMM Thank you !

  0
• 

  Hayatunnabi Nabil•130

  @imhayatunnabiPosted over 2 years ago

  nice work man !!!!

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @imhayatunnabi Thank you so much ;)

  0
• 

  Julian•80

  @julian-GFPosted over 2 years ago

  excelent work!

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @julian-GF Thank you so much ;)

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  Great work man, Nicely done

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Phalcin Thank you so much ;)

  1