REST Countries API - React, styled-components, grid, flexbox, and CSS3

@RocTanweer

Hello!

I am thinking this project is possible with vanilla JS. I am thinking you will need a container that will hold either the main page or the feature country page and you would swap them out depending on the URL.

For this project, I just make one call to the API ('https://restcountries.eu/rest/v2/all') when the program is loaded and then use that data where it is needed. This data is an array of objects. I was thinking it was better to get the data once, and keep it local, to prevent multiple API calls that can slow the application down.

On the main page, I use a filter on the main countries array to return a filteredCountryData array and it is used to make the individual country cards. This may be a little trickier with vanilla JS, but I imagine it would be watching the event listeners for changes and then refreshing the country cards as necessary. React makes this very easy by managing the state of the filteredCountryData array.

And on the "featured" country page, I use the main countries array and filter it on the alpha3Code field so that in only returns the single country as the featuredCountry array.

I hope this helps. And let me know if you have any questions.

Happy Coding! David

@davidrhyne that swapping idea is awesome..

But you didn't answer my question 😅

@davidrhyne I was asking how you are rendering content when user request a country-details page...?

Like this...

https://reactApp.com/feature/#/AFG

shouldn't it throw an error since there is no page for this url?

@RocTanweer Sorry, I misinterpreted the original question. I used "client side routing" by using HashRouter from the react-router-dom package.

As you indicated, 'https://reactApp.com/#/featured/AFG' is not an actual site that the server can route to, so the server will return a 404 error. With HashRouter, the part of the URL beyond the # is routed on the client side.

From the host point of view, the application loads to https://reactApp.com/ and remains there. The navigation of the links beyond the # are not given to the server to route. Instead, they are used by the JS to load pages.

Therefore, with my application, I have 2 routes to act on.... 1) is the home route (#/) and 2) is the featured route (#/featured/AFG). And for the featured, I capture the AFG as a variable to use with the filter to determine which country to display.

I thought I some resources on doing this with vanilla JS, but I not finding them at the moment.

But the key is "client side routing".

I hope this help.

David

@davidrhyne and it helped... thank you very much sir 🙏

By the way, I just noticed that even if you normally put /#/ in any url that you said would throw 404 won't throw, it just gets ignored

try it

For example...

https://roctanweer.github.io/roomhomepage/#/countries/APG

And it will open Google page normally and won't throw any error 404

Again thank you

@RocTanweer

That is awesome news and happy to help!! The roomhomepage is looking great!

And thank you for the tip on the #. In retrospect, it makes a lot of sense because anchor tag with href with # will navigate on the page, but I done 2 React apps in a row and have React on the brain. 😅

Happy Coding!

@palgramming That is a good idea. I will add the selected region to the region dropdown selector. Thank you for the feedback!