Responsive All Countries Made with React + Vite
Design comparison
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
- @GTG4KPosted almost 2 years ago
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 helpful0@Kamasah-DicksonPosted almost 2 years ago@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 - @princemuelPosted almost 2 years ago
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 helpful0@Kamasah-DicksonPosted almost 2 years ago@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@princemuelPosted almost 2 years ago@Kamasah-Dickson Sure, if you're on discord, dm me @princemuel#3896.
0@princemuelPosted almost 2 years ago@Kamasah-Dickson Sure, if you're on discord, dm me @princemuel#3896.
0
Please log in to post a comment
Log in with GitHub
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