← Back to All Projects

Shortly URL Shortening

Frontend Mentor - Shortly URL shortening API Challenge solution

This is a solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents


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

Additional things that I did:

  • Implemented a check that will stop an invalid URL from being sent to the API.
  • The error display will show the API error message in case a URL is rejected. (this usually contains the reason the URL is rejected)

My process

Built with

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

What I learned

Picked this one as API practice and it was really fun overall!

async function getShortenenedUrl(originalUrl) {
  const response = await fetch(
    "https://api.shrtco.de/v2/shorten?url=" + originalUrl
  const { ok, error, result } = await response.json();
  if (ok) {
    return handleSuccess({
      originalUrl: "https://" + originalUrl,
      shortUrl: result.full_short_link2,
  } else {
    return handleError(error);

Using "clamp" for font-sizing makes responsive text way easier:

&__title {
  font-size: clamp(fnc.rem(40), 6vw, fnc.rem(80));
  color: var(--color-neutral-300);

Handling errors is one of the things I really wanted to learn about:

const handleError = (errMessage) => {
  if (errMessage === undefined) return setErrorMessage("Please add a link");

Continued development

Adding an animation for the "Shorten it!" button seems like a good place to improve this design.

A way to delete previously shortenend URLs or clear the local storage also could be implemented.

Useful resources



Thanks to Ms. Jessica Chan (Coder Coder) and all the other YouTube creators making their knowledge available!

← Back to All Projects