Skip to content
Submitted over 4 years ago

Mobile first API with React Hooks, React Router, Sass

Magda Kokot•1,425
@magdakok
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hello! It was by far the hardest and the most frustrating challenge. I encountered hundreds of issues. Some I managed to solve myself; some forced me to give up a few ideas I had. I'm happy the app is working but disappointed same time because I know what should work better.

Most significant/weirdest issues are:

  1. On live server website path looks great: localhost:3000/ for main page or localhost:3000/ESP for Spain and so on. After deploy the address got weird, and I have no idea what's wrong.

2 [SOLVED]. On the country page, buttons representing border countries are generated BUT I can't make them redirect to the relevant country. URL changes, but component not. I tried to wrap the component with withRouter but still nothing. I found one working way, but it was refreshing the whole website.

As always, I'd be really grateful for the feedback! :)

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey Magda, to solve your issue with hash - use BrowserRouter instead of HashRouter, check it out how to implement it properly.

    1
    Magda Kokot•1,425
    @magdakokPosted over 4 years ago

    Hello Roman! :) I guess it might have been my surname that drew your attention :D BrowseRouter was what I started with, but after deploy it was not working at all :(

    0
    Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    @magdakoko not really, just looked what that problem here🙂. strange it doesn't work, maybe try to deploy it on elsewhere, netlify or vercel, pretty easy to use 😉

    Maybe this article will help you - https://medium.com/the-andela-way/understanding-the-fundamentals-of-routing-in-react-b29f806b157e

    1
    Magda Kokot•1,425
    @magdakokPosted over 4 years ago

    @rfilenko thanks a lot, the article is exactly what I needed!

    0
  • Magda Kokot•1,425
    @magdakokPosted over 4 years ago

    256 accessibility issues 🤦 I'll try to sort them out tomorrow :)

    1

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