Link shortener website

user profile photouser profile photouser profile photo2548 developers have joined this project.

What you will practice

You'll practice taking simple inputs from users, calling a third-party API, and displaying the return value to the user.

Introduction

In this project, you'll learn how to build a website that shortens URLs. Optimizing the length of your website's URLs is useful on space-sensitive forums, helps websites rank better in search results, and are also easier for users to type out.

Requirements

The user will input a valid URL and click a "shorten" button. The shortened URL will then be displayed.

Your UI should include the following elements:

  • Text input for the user's URL
  • "Shorten" button to trigger the link shortening
  • Display area to return the shortened URL to the user

For extra challenge:

  • Make it easier for the user to copy the shortened URL by adding a "copy" button for one-click copying.
  • Try to allow the user to automatically copy the shortened URL by using libraries like SimpleCopy or ClipboardJS.

Suggested Implementation

  • This project can be implemented as a webpage using any front end stack (e.g. JavaScript, React, Angular, Vue.js).
  • You can use free link shortenings services such as bit.ly to process the URL.

Hit a programming wall?
Get help from our mentors

  • Post request free
  • First 15 mins free

Suggested languages and frameworks

HTML/CSSAngularReactJavaScriptVue.js

Difficulty

easy

Contributed by

Learning and sharing programming tips & insights

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

  • Post request free
  • First 15 mins free
Shorten your learning curve with on-demand programming help

Browse more projects

More coming soon...