Link shortener website

3127 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.

References

bit.ly API documentation

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS Angular React JavaScript Vue.js

Difficulty

easy

Contributed by

Jennifer Fu

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

Other recommended projects

easy

Temperature converter website

You'll create a simple app to convert temperatures from Celsius to Fahrenheit, and vice-versa. This project should be implemented as a web page.

JavaScriptReactHTML/CSSAngularVue.js

medium

Joke telling bot web app

Whether it's smartphones, cars, or speakers, voice assistants are becoming more and more integral to our everyday lives. Not only so, voice assistants are gaining traction in companies to help streamline operations like Customer Service. In this project, you'll build a full-fledged Joke telling robot web app using Web Speech APIs, which can be applied to both web apps and mobile apps.

JavaScriptReactAngularVue.js

easy

Alpaca image generator website

At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images. This project should take you approximately 8 hours to complete.

JavaScriptReactHTML/CSSAngular