Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Shortly Rel.ink API with NuxtJS, Vuelidate, and Vuetensils

Joshua Briley• 415

@somecallmejosh

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am continuing to use these projects to get more reps in with NuxtJS. We are using this framework at work, and it is helpful to work through these projects to get more experience with Nuxt.

My biggest challenge on this project was applying meaningful "loading state animations" of the dynamically generated content. I'm not finding much information in the Nuxt community regarding the transition element that is available in regular Vue apps. It doesn't appear to be working in Nuxt. I've accounted for this in a non-visual way by applying the aria-live="polite" attribute to the container that is created after the short url is requested.

Since animation isn't a requirement for this project, I am ok submitting it. But, I feel a a less jarring introduction of components would be a win for UX.

Regarding validation errors: There is no src attribute on the image icons in the dark blue circles because they are being lazy loaded.

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Nice work on this challenge Joshua! It looks really good and functions well. I'd agree on the animation side, but it's definitely a nice-to-have as opposed to a must-have. It's great to see you using the challenges to get more comfortable with Nuxt. Vue is a great framework!

1

Joshua Briley• 415

@somecallmejosh

Posted

@mattstuddert thanks for your feedback, Matt. I’m having a so much fun with these projects.

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@somecallmejosh that’s great to hear! 🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

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