Skip to content
Submitted about 4 years ago

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

David Rhyne•270
@davidrhyne
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found styling the images to be trickier than expected due to their inconsistent shapes. For example, Belgium is fairly square and American Samoa is pretty rectangular by comparison. I masked this on the main page, but allowed the flags to be their normal shapes on their "featured" pages. Are there any CSS properties for managing images of various shapes?

And this is my second React app from scratch, so I would greatly appreciate any overall feedback on the React and styled-components coding.

Thank you in advance and Happy Coding!

Code

Please log in to post a comment

Log in

Community feedback

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋

    Can I make this with just vanilla javascript?

    I am just facing problem with url handling...

    1. I will make ajax call right when a user visits and display all the countries
    2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
    3. User can also come back to home page by clicking on either back button of app or browser
    4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

    My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

    Please help....🙏

  • P
    Patrick•14,265
    @palgramming

    Looks like you did a good job. The only thing I saw and I do not know if it was outlined in the project or not ....when a region is chosen there is no way for the user to see feedback that it has been or that it is still set

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