Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive All Countries Made with React + Vite

#accessibility#react#sass/scss#vite#react-router
Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello guys this is my second React app that I completed.... I think I should really focus on Async Js and focus more on refactoring and file structuring. One of the challenges I faced was that when I was using react-router....I wanted to use the <Outlet/> to maintain the header component but It wasn't working I got tired and I manually imported and rendered the header component in the /:countryID page and my theme and toggle all got broken ๐Ÿ˜‚๐Ÿ˜‚ because I cant send props. it wasn't a component that could receive props it was just a react-router element={} page which am not rendering anywhere u understand? so I copied the header and pasted it in the /:countryID page ๐Ÿ˜‚ but It worked..how would you have fixed it ??.....Guys what do you think about this project. Kindly share your opinions please.

Community feedback

@GTG4K

Posted

I've noticed you don't reroute the user to the border countries on click, I've spent too much time trying to figure it out, so just in case you don't know, there is an endpoint in the REST Countries API called Code. https://restcountries.com/v3.1/alpha/{code}

you can just pass the data from border-countries object to this endpoint and it will return the data just like it would when fetching the data with country names.

Marked as helpful

0

Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

@GTG4K Thank you so much. I am currently learning how to use react-router and It's my first project with it๐Ÿ˜‚... also relating to the border countries, the data I was getting was an Abbreviation of the border countries and I spent so much time trying to figure out how I could get the end points using the Abbreviations. but in the actual design it wasn't abbreviated it was a full country name.

1
princemuelโ€ข 105

@princemuel

Posted

I checked the site on mobile and overall, the layout looks good.

There are accessibility and code quality issues though. For example, the current tabindexes added on the drop-down menu messes with touch on mobile. Also, the routing in your app's entry point (index.js) is not setup properly but that can easily be fixed.

I would love to help, but as I'm on my mobile, I can't really type out all what you need to do to fix the issues. If you're on discord, I'd be game to jump on a video chat and we can refactor the project together.

Marked as helpful

0

Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

@princemuel I really appreciate your opinion. I am currently learning how to use the react-router-dom. I would appreciate if you can help refactor the code, maybe if you get some time. It could be an opportunity to learn from you tho. relating to the accessibility๐Ÿ˜‚ I could have used the select and its option for the drop-down but I used divs and ARIA๐Ÿ˜‚...you know I could have styled the drop-down....learnt a lot from this project tho.

Thanks alot ๐Ÿ‘

0
princemuelโ€ข 105

@princemuel

Posted

@Kamasah-Dickson Sure, if you're on discord, dm me @princemuel#3896.

0
princemuelโ€ข 105

@princemuel

Posted

@Kamasah-Dickson Sure, if you're on discord, dm me @princemuel#3896.

0
Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

@princemuel sure alright

0

Please log in to post a comment

Log in with GitHub
Discord logo

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