Submitted over 2 years ago

Country facts app

Kakeru• 265

@adeleke5140

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

React Router wasn't that easy for me to use. I also think that there are a lot of optimizations and code refactoring needed.

Regarding API calls and nested routes, I'd appreciate it if anyone could let me know about the best practices.

Community feedback

Bryan Fonseca• 60

@BryanFonseca

Posted over 2 years ago

Hi @adeleke5140. Your work looks great! I was browsing your code and noticed you used a regular expression on your component which renders the country info. My approach was to use the internationalization API, it works out of the box and does it according to the browser language, with code like this you get a nicely formatted string: new Intl.NumberFormat(navigator.language).format(your_big_number) Also, I see you used one CSS file for all your components, how did it go? In my solution I opted for splitting them using CSS Modules so that I kept my style declarations scoped to only one component per file.

Marked as helpful

Kakeru• 265

@adeleke5140

Posted over 2 years ago

@BryanFonseca Hi Bryan

Thanks for the feedback. This was my very first React project after taking a crash course to it's...less than optimized. I just wanted to build something and it was fun for that.

I haven't heard of the internationalization API so thank you for mentioning that.

Regarding CSS, I just like writing all my CSS in one place. For my next projects though, I'm gonna be leveraging styled components because they are pretty nifty.

You can see what I'm up to on my Twitter, @adeleke5140. it would be great to connect.

Medjahdi Islem• 275

@IslemMedjahdi

Posted over 2 years ago

Hello @Kakeru, I love your work, good job. I have just some improvements to say, It would be better if you add pagination becuse your website looks too long and fix the flag images ( width and height) I can't see my full country flag :D check my work: https://country-finder-medjahdi.netlify.app/ Have a nice day!

Marked as helpful

Kakeru• 265

@adeleke5140

Posted over 2 years ago

@IslemMedjahdi Thank you. I haven't heard about pagination before but will look into it. I guess my initial attempt was just to render an infinite list of country images but that definitely wasn't the best.

The flag images was something I really struggled with and I will improve them.

Please log in to post a comment

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