Shortly Landing Page

A landing page for Shortly, where you can shorten your links/URLs with ease.

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

• Overview
• The challenge
• Built with
• Useful resources

Overview

The purpose of this challenge is to build a static landing page and replicate the given style sheet as close as possible. This project is built using Astro.

Shortened links are created utilizing the Shrtcode API. Requests are made via the built-in fetch API.

const API_BASE = 'https://api.shrtco.de/v2/';

...

export default async function getShortenLink(link: string) {
  const request: Promise<API_RESPONSE> = (await fetch(`${API_BASE}shorten?url=${link}`)).json();
  return request;
}

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

Built with

• Typescript
  • Fetch API
• Tailwind CSS
• React
• Astro
• Cypress
• React Hook Form
• Shrtcode Link Shortener

Useful Resources

• Astro Documentation
• Cypress Documentation
• React Hook Form Documentation
• Shrtcode Documentation