Rest Countries Api with React Typescript Tailwindcss Vite js

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Jesse, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • add header tag and wrap the navbar to improve the Accessibility
  • add main tag and wrap the content of page (all cards) to improve the Accessibility
  • also you can use article tag inside the a tag to the container card for improve the Accessibility
  • add transition on the element with change theme color
  • instead of using px use relative units of measurement like rem -> read here
  • use ul element for the details text of country instead of multiple p
  • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
  • I would also add a query reset button, I find it very convenient
  • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"

  Hope this help! Happy coding 😉

  Marked as helpful

  1

  ---

  

  Jesse Ohanugo•110

  @J-e-s-sePosted about 2 years ago

  @denielden Thanks for the positive criticism. I've worked on most of the tips.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @J-e-s-se You are welcome and keep it up 😁

  0
• 

  Ali Muhammad•20

  @AliMuhammadOfficialPosted about 2 years ago

  Overall it looks good but needs some improvements. when we have applied the filter for the region and click somewhere else on the page filter dropdown should get closed. the second problem is with accessibility when we press the tab it doesn't take us to the filter dropdown! after the search box, it goes directly to the country's cards. The search box and filter dropdown's heights don't match they both should have the same height. in my opinion, it'll look good if cards are in the center of the page. and should have less margin on xs and sm screens.

  Marked as helpful

  0

  ---

  

  Jesse Ohanugo•110

  @J-e-s-sePosted about 2 years ago

  @AliMuhammadOfficial Thanks for informing me on the faults of my solution.

  I've improved the "region" filter. It closes when I click somewhere else on the page and it is also accessible by pressing the tab key.

  I also reduced the margins on smaller screens.

  The filter dropdown matches its design file equivalent.

  0