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

React and Styled Components solution

@pklepa

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 liked this challenge a lot, it has some nice details and interesting API implementation.

I used React with create-react-app as the basis, Styled Components for CSS-in-JS and component reusability and finally although unnecessary, I brought axios for the API integration.

I would love to hear comments about the page.

Cheers

Community feedback

P

@gsterczewski

Posted

Hey, I like your work.

Maybe you could consider adding some more support for keyboard navigation? It will make your project more accessibble. Currently it is hard to figure out on which element is focus set.

Overall good job.

Cheers!

1
Aniket 160

@AniketMJ

Posted

Hey buddy, it's amazing

I love the loading animation while getting the response from the api!!👍 But I faced one issue is that when you input an incalid URL, it's not giving me a specific error about it

Except that the UI is gr8 and I do also liked this challenge It was a lot fun creating it

Here is the link if you want to check it out - https://www.frontendmentor.io/solutions/tailwind-css-html-js-zAMl7yfPD

1

@pklepa

Posted

Nice catch! It haven't even occurred to me to test what would be the output for an invalid URL, I'll make sure to address it properly. Thanks!

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