Skip to content
Submitted over 3 years ago

REST Countries(Redux, Thunk,Framer-Motion,Styled-Components,Formik)

Nihat4ik•180
@nihadaliyev1
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

Well, this was not easy, but i have completed this challenge.
I used react framework, redux as state manager, thunk for handling async actions. There was no need to use Formik, but i thought that it will be better to slightly revise it. Styled Components for the css in js, it is very comfortable for me. For routing, i used react-router. This challenge encouraged me to learn Framer Motion from scratch and i also used it for animations. Your Feedback is very appreciated and i will be glad to hear you, thanks in advance.

Community feedback

  • Rufai Ayomide•170
    @haryor745Posted over 3 years ago

    Hi, Nihat4ik! Your take on the project is superb! 🤩 I have a question though, how did you achieve the loading effect with the blank cards when a user filters through the countries? Good job and happy coding!

    0
    Nihat4ik•180
    @nihadaliyev1Posted over 3 years ago

    @haryor745 Hello, haryor745, thanks for your question. I used react-skeleton website, here is the link ;). https://skeletonreact.com/. You have to install one dependency and configure your skeleton. When i filter the region, i call the api and untill i get data i render the skeleton component that i got from this website. For achieving the loading effect, i also used loading action by using redux, you can see it in github repo code. Thanks again for the question and happy coding!

    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hi there, Nihat4ik! 👋

    Amazing job on this challenge! 👏 I really like the animations you added to the project and I think everything looks good and functions quite well! 👍

    I'd like to suggest,

    • Perhaps adding a wee bit more padding around the sides of the home page.
    • Making sure there's always a comfortable amount of space between the content of the page and the bottom of the screen on the country details pages (there isn't any space between the two when the height of the screen decreases).
    • Adding overflow-x: hidden to the <body> (or something similar) to prevent a horizontal scroll bar from appearing along the bottom of the screen during the page transition.

    Keep coding (and happy coding, too)! 😁

    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