Frontend Mentor - Shortly URL shortening API Challenge solution

This is a solution to the URL Shorting Landing Page.

Live site URL

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• Shorten any valid URL
• See a list of their shortened links, even after refreshing the browser
• Copy the shortened link to their clipboard in a single click
• Receive an error message when the form is submitted if:
  • The input field is empty

Screenshot

• Mobile live site screenshot (Yep, the image is too long to be directly here)
• Desktop live site screenshot

Links

• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

In this project I learned how to use conditional rendering on React and the use of useRef hook. Also, how some CSS properties like transform, object-fit and object-position works. At last, the use of POST method on the API is super cool too.

Continued development

The use of forms in general is always challenger for me. On this project, there is only one input but the useRef used on it bring new paths to the task, like the rendering (or not) of some elements depending on the value from the input. I hope this becomes more and more natural in the future.

Useful resources

• Stackoverflow - Always him, the real MVP. Helped me a lot with CSS, React Hooks and some logical problems. Even how managed to change the HTML favicon was from there.
• W3Schools - The best CSS documentation. The way they show the examples is a bless.
• React Icons - Forget any other icon site for React. For me this is the best and easiest solution.

Author

• GitHub - Igor Matheus
• Frontend Mentor - @igormath