---
title: "How to Build a URL Shortener in React with Shrtcode | CoderPad"
description: "URLs tends to get lengthy, especially when parameters and query strings are attached. This can get annoying when you want to share a link. Learn how you can build a URL shortener in React to reduce the length of your links."
canonical: "https://coderpad.io/blog/development/how-to-build-a-url-shortener-in-react-with-shrtcode/"
last_modified: "2026-04-15 16:21:04"
---
[Back to blog](https://coderpad.io/blog/)
# How to Build a URL Shortener in React with Shrtcode
November 8, 2022 5 Minute Read
By Taminoturoko Briggs
[Development](https://coderpad.io/blog/development/)
URLs tends to get lengthy, especially when parameters and query strings are attached. This can get annoying when you want to share a link. For example, long URLs can eat into your character limit on social media platforms. Because of this, websites offering URL-shortening services like [Bitly](https://bitly.com/), [TinyURL](https://tinyurl.com/app), and [Short.io](https://short.io/) have cropped up.
A URL shorterner is a tool that reduces the length of website addresses, creating a short, unique link that redirects to the desired web page when clicked. This makes the URL easier to share, remember, and track. The new unique URL generated usually includes the shortener site’s address and a combination of random letters.
For example, if you want to shorten [](https://coderpad.io/resources/docs/interview/) [/resources/docs/interview/](https://coderpad.io/resources/docs/interview/) with Shrtcode, the resulting URL will look like this: [h](https://shrtco.de/gAlA24W) [ttps://shrtco.de/xBcIt](https://shrtco.de/xBcIt) where the site’s address is [](https://shrtco.de) [https://shrtco.de](https://shrtco.de) and the rest after the slash is the identifier for the link generated by the API.
## What is URL shortening?
URL shortening is achieved by storing the origin link along with the random letters attached to the shortened URL in a database. When the short URL is clicked, the server uses the random number to get the original link and then redirects to it. Of course, doing this requires creating a backend.
In this tutorial, we will be using the [Shrtcode API](https://shrtco.de/docs) to achieve this functionality, so we won’t be doing any of the behind-the-scenes stuff.
### Pros and Cons of URL shorteners
As Moneyball author [Michael Lewis](https://quotefancy.com/quote/1296483/Michael-Lewis-There-s-something-bad-in-everything-good-and-something-good-in-everything) said, “There’s something bad in everything good and something good in everything bad.” Let’s find out what those are for URL shorteners.
Pros of URL shorteners:
- They promote sharing: Adding shortened URLs on printed materials reduces the number of words readers have to type to copy it. They also make sharing easier in messaging technologies that limit the number of characters in a message.
- Creates a friendlier URL: Most URL shorteners can be used to generate custom links rather than random numbers in order to make URLs intuitive, more appealing, and easy to remember. These custom links act as an abstraction to a more lengthy URL which might include encodings and characters that may be confusing to the average reader.
- Provides analytics data: Most URL shorteners include features to track the performance of links, giving information on click-throughs and traffic sources. Businesses can then use this information to inform their content distribution strategies.
Cons of URL shorteners:
- Dead links: If the server of the tool that was used to shorten the URLs is down, all links will stop working.
- Blocked URLs: Some platforms do not accept shortened URLs and a number of URL shorteners have been included on spam blacklists. Sites that have been blacklisted for sending spam tend to use URL shorteners to bypass the blacklist which has made many URL shorteners meet the same fate.
- Facilitates phishing attacks: Since URLs shorteners obscure the address of a site with random numbers, shortened URLs are used by scammers to drive users to URLs and websites that look legitimate but are specifically designed to collect sensitive information.
## What is Shrtcode
[Shrtcode](https://shrtco.de/) is a URL shorterner that offers free use of its shortening services. It puts special emphasis on security, constantly checking that shortened are always pointing to the original site and are free of malware and virus. Shrtcode also offers custom URL generation, QR code generators, password-protected links, and more. However, only the URL shortening features are documented in its docs. To get access to all other features it needs to be requested via email using [[email protected]](mailto:info@tibush.com).
## How to build a URL shortener with Shrtcode
The URL shortener we will build will have an input field to enter the original, long URL and a section to view the shortened URL. It will also include functionality to copy the shortened URL to the clipboard, which will be added using [react-copy-to-clipboard](https://www.npmjs.com/package/react-copy-to-clipboard). Let’s get started:
### Set up React
Spin up a React sandbox on [CoderPad](https://app.coderpad.io/sandbox):
CoderPad sandbox language environment
>
💡 CoderPad sandboxes gives you the native code editor experience when building applications and conducting interviews.
In the newly created sandbox, replace the content in`App.tsx`:
```
import { useState } from 'react';
import './App.css';
function App() {
const [url, setUrl] = useState()
const [shortendUrl, setShortenedUrl] = useState('')
return (
URL shortener
{/* form to enter URL to be shortened */}
{/* Section to view shortened URLS */}
{shortendUrl &&
{shortendUrl}
}
);
}
export default App;Code language: JavaScript (javascript)
```
In the code block above, we created a`url`used to make the input field controlled and a`shortendUrl`state which will hold the shortened URL.
Next, modify`App.css`:
```
* {
box-sizing: border-box;
}
.shortener {
width: fit-content;
margin: 0 auto;
text-align: center;
}
.shortener input, button {
height: 30px;
padding: 0 10px;
}
.shortener input {
border: 1px solid gray;
color: rgb(64, 64, 66);
}
.shortener input:focus {
border: 1px solid rgb(95, 180, 245);
outline: none;
}
.shortener form > button {
background-color: rgb(95, 180, 245);
border: none;
color: white;
}
.shortener form > button:hover {
background-color: rgb(51, 162, 246);
}
.shortener__viewShot {
margin-top: 20px;
border: 1px solid gainsboro;
display: flex;
justify-content: space-between;
padding-left: 10px;
color: rgb(64, 64, 66);
align-items: center;
}
.shortener__viewShot button {
background-color: transparent;
border: none;
color: gray;
}
.shortener__viewShot button:hover {
color: rgb(64, 64, 66);
}Code language: CSS (css)
```
The sandbox builds the changes and the URL shortener application can be viewed in the preview panel:
The URL shortener application with an input box.
### How to shorten URLs with Shrtcode
To shorten URLs with Shrtcode, we just need to pass the URL as a query to the API endpoint as described in their [docs](https://shrtco.de/docs). Head over to the`App.tsx`and add the following function after the`shortendUrl`state in the`App`component:
```
const shortenUrl = async (e) => {
e.preventDefault();
try {
const response = await fetch(
`https://api.shrtco.de/v2/shorten?url=${url}`
)
const data = await response.json()
setShortenedUrl(data.result.full_short_link);
} catch (e) {
alert(e);
}
};Code language: JavaScript (javascript)
```
In the above function we have attached the original URL as a query to Shrtcode’s shortening endpoint and send a GET request to that endpoint. Then when the response returns, it gets stored in the`shortendUrl`state variable.
Next, we need to call this function when the Submit button is clicked. For this, modify the opening form tag in the`App`component to the following:
```