Shortly App

Next.js JAMstack hosted on Vercel.

Link Shortener frontend challenge from Frontend Mentor

Demo

Features

• 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 was an invalid url
  • The url shortener API returns an error message

Technology Used

• Next.js
• tailwindcss
• Hosted on Vercel

Development

1. Clone repo

   git clone https://github.com/cloworm/shortly
   

2. Install Dependencies

   npm i
   

3. Run the dev server

   npm run dev
   

Screenshots

Desktop

Mobile