Skip to content
Submitted about 5 years ago

REST Countres API with NuxtJS SPA & Vuetensils

Joshua Brileyā€¢415
@somecallmejosh
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

Using CSS Grid, CSS Custom Properties, NuxtJS, Axios, and the Vuetensils library. My main goal is to use these frontendmentor.io projects to get some reps in with Nuxt.js. We have adopted it at work, and the more opportunities I have to build things, the better.

I am aware that Nuxt is triggering some HTML validation errors. Since they are non-breaking issues, I'm ok with them. I am happy to receive any constructive feedback regarding performance and accessibility. Would love to keep the conversation positive and useful for people who read the comments thread.

Community feedback

  • Matt Studdertā€¢13,611
    @mattstuddertPosted about 5 years ago

    Hey Joshua, awesome work on this challenge. Your solution looks really good! I can't see any issues with the accessibility or performance side. The only slight issue is that some of the flags don't change if you play around with the search and filter. Also, on a purely UI side, you could set a height on the flags and use object-fit: cover so that they're not varying sizes.

    I hope you enjoyed the challenge. Keep up the great work!

    1
    Joshua Brileyā€¢415
    @somecallmejoshPosted about 5 years ago

    Hey Matt! Thanks for your feedback. I've updated based on your suggestions. I believe the wonkiness with the filtered flags had something to do with the lazy loading of the images. I set them back to regular images and things work fine. I'll have to do some research into why that was happening. BTW, I found this site in your No CS Degree interview from September. Been wanting to tinker on one of these projects for a while. I'm very excited by the work you're doing here.

    0
    Matt Studdertā€¢13,611
    @mattstuddertPosted about 5 years ago

    @somecallmejosh nice work resolving that issue! Odd that the lazy loading was interfering.

    That's great that you read the No CS Degree interview and that you like the idea behind the site. If you ever have any feedback or ideas please feel free to message me. Also, if you ever fancy giving people feedback then feel free to just dive in. The more people providing useful feedback to each other the better! šŸ™‚

    1
    Joshua Brileyā€¢415
    @somecallmejoshPosted about 5 years ago

    @mattstuddert I will do my best to provide constructive feedback on other projects. Giving good feedback is a good skill to have. Need all the practice I can get. :-)

    See you on the next project.

    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