Submitted about 1 year ago

REST API countries with React and SASS

Copper2• 410

@long-1810

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

This project is a real challenge to me. In this project, I have learnt how to use React Router v6 library and also how to use contexts.

While doing this project, I have encountered numerous issues, the biggest of which is how to deploy this to GitHub Pages. It took me 2 days just to deploy this app, but there is still a minor bug. When you open the dev tools console, you can see that there is a bunch of errors, saying that the image files are not found, even though the images of the countries load perfectly fine.

Is this bug a big deal? And if yes, how to fix this? Also, the performance is pretty bad, at least for me. How to also fix this?

Community feedback

Anjali saini• 150

@Anjali550

Posted about 1 year ago

Hi, Firstly, congrats on completing this project! 🎉 It turned out really nice and I bet you had a lot of fun while doing it.

i want to suggest you that you have to do some minor changes in country image container because i see all country img are not coverd whole space. you have to add object-fit: cover; property in img container.

I hope you will find those tips helpful. Overall, the project looks solid and once again - congrats!

Happy Coding! 👻🎃

Copper2• 410

@long-1810

Posted about 1 year ago

@Anjali550 If the country img fits all the space available, some flags would be stretched so I just leave it as it be and center it in the middle.

Copper2• 410

@long-1810

Posted about 1 year ago

@long-1810 Because like not all the flags has the same ratios so I had a hard time finding a solution for this.

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