Skip to content
Submitted over 4 years ago

Desktop-First Shortly Landing Page with React and Sass

Waleed Alfaifi•130
@waleed-alfaifi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I would like to get feedback on these areas:

  • My animation-based success feedback when the user enters a URL to shorten. I implemented it so that when the URL is successfully shortened, it will show up in the list with some animation. What do you think of this from user experience perspective?

  • For the validation message that appears when the user is entering invalid URL (i.e. empty or invalid URL format) I am using absolute positioning to put the validation message right below the input field: https://github.com/waleed-alfaifi/url-shortening-app/blob/4ed14fc746031e68dd0e192262881d09c7430039/src/sass/components/_shorten.scss#L23 I personally did not like how I did it but that was the only way I could do it given my way of laying out the shorten section. I am interested in knowing your opinions on how I could do it in a better/more flexible way instead of absolute positioning? Or maybe it is fine to use absolute positioning in this case?

  • Finally, a React concern. As you can see, I am initializing clipboard.js (which I use for copying URLs to clipboard) in the Shorten component: https://github.com/waleed-alfaifi/url-shortening-app/blob/4ed14fc746031e68dd0e192262881d09c7430039/src/components/Shorten.js#L30 Do you think this hurts performance and I should have initialized in the index.js file or even the App component to reduce number of initializations? Am I over thinking it or maybe my way of thinking about is wrong in the first place?

I really appreciate your invaluable feedback. Thank you in advance.

Community feedback

  • Connor Z•5,115
    @zuolizhuPosted over 4 years ago

    Hey Waleed, I like your idea on the shaking and blinking animations when added the shorten url to the list 😆. Super cool! I also noticed that you used local storage to save the shorten urls, and those urls will load on next time, which is a good practice on user experience as well. However, personally I would prefer add the new shorten url to the top (or the front first position in the array).

    There is nothing wrong to use position absolute, and you did a great job on it!

    Another way I could think is to go normal way, but with height 0 (I don't like it to be honest).

    I used the vanilla javascript to work with the copy, but the copy won't work in preview window in frontend mentor site. And yours is working, which is good! I'm not familiar with react and I couldn't give you more on this topic 🤣.

    Anyway, sorry for my bad English hahaha, good work!

    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