Responsive Countries Page with API data and Grid layout

Community feedback

• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 3 months ago

  Hi @Miki0035,

  Nice project! I like that you started with dark mode—it gives the design a modern feel right from the start. Here are a few suggestions for improvement:

  Custom Components for Select:

  Instead of using <Select> with <options>, I recommend looking into custom components to fully customize it and make it look amazing. Adding hover states and animations would really elevate the look of your select component.

  Card Animations:

  Consider adding animations to the cards. You did a great job with the shadows—they look good! Adding some animation could make the interaction more engaging.

  Grid Spacing:

  The spacing in the grid is a bit off on some breakpoints. Fine-tuning the grid layout would help create a more consistent and polished look.

  Next and Previous Buttons:

  Great job with the next and previous buttons! It’s a unique touch that makes your project stand out. I hadn’t thought of adding those myself—good thinking!

  Styling:

  Overall, I’d recommend fine-tuning the styling a bit more to create an awesome portfolio piece. Small details can make a big difference.

  React Router for Border Countries:

  For the logic, you might want to explore using React Router to navigate to the border countries. You’ve already translated them, which is great, but linking them directly would improve the user experience.

  ---

  I saw that you took your data from a data.js file. I would recommend looking into how to use an API for this project and implementing it.

  State Management:

  If you’re not already using a state provider like Redux or Zustand, consider putting your API calls in custom hooks. This would improve modularity and make your code easier to structure and navigate.

  API Structure:

  I recommend using APIs instead of relying on static files like data.js. This can offer more flexibility and scalability. Consider placing your API calls in a useHooks folder in src for better organization.

  Async/Await and Axios:

  I recommend looking into async/await and Axios. Fetching data from the Flag API site directly would give you more control and flexibility (I recommend using an API instead of pulling data from the data.js file, but otherwise, good job).

  Hope this was helpful! Best, Teodor

  Marked as helpful

  0