/shorturl

Primary LanguageJavaScript

Frontend Mentor - Shortly URL shortening API Challenge solution

This is a solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor.

Table of contents

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
    • The input filed is a url with or without http(s)://www.

Videos

Browser.mp4
Mobile.mp4

Links

My process

Built with

  • React - JS library
  • Styled Components - For styles
  • Semantic HTML5 markup
  • Flexbox for components
  • Mobile-first workflow
  • Kanban Methodology

What I practiced

  • Mobile-first workflow.

  • throtle function in Buttons: I had to deal with useState(), so i had to make use of useMemo() in order to preserve the closure across re-renders

  • Solution

    const memoThrotleClickURLHandler = useMemo(() => {
        const handleShortenUrlClick = async event => {
            ...
        }
        return throtle(handleShortenUrlClick, 1500)
    }, [])
<form onSubmit={memoThrotleClickURLHandler}>

  • Ellipsis: If the url is too long, it overflows its container.

  • Solution:

    p {
      ...
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

Useful resources

  • Stale Closure - This helped me understan what a stale closure is and gave me an idea of how to solve it with an external throtle function

Author