URL Shortener front

Netlify Status

Link shortener created with MERN Stack

 

Project setup 🔧

  • npm install / yarn install
  • Create .env and set REACT_APP_API_URL variable.
Dev 🎬
  • npm start / yarn start
Build 🏗️
  • npm run build / yarn run build

Home Page

I decided to make home page simple, with just one input and list of generated links. You can copy shortened URL from home page and also see statistics for your generated URL.

Statistics Page

On statistics page you can see some graphs. how many times user clicked your shortened link, unique users and more... Also on header you can see original URL Meta data , title and image (if available).

Redirect Page

On this page website sends request to get original URL by short ID, If current URL is disabled, removed, or just can not be found, website displays error message, otherwise you will be redirected to original URL.

Visited Links Page

On visited links page website displays all URL that you have clicked, including removed and disabled ones. You can filter removed URLs and show only active and paused URLs.