Building a Simple React URL Shortener: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital landscape, URLs are everywhere. From sharing website links on social media to embedding them in emails, we constantly interact with them. But long, unwieldy URLs can be a real pain. They’re difficult to remember, they take up valuable space, and they often look unprofessional. That’s where URL shorteners come in. They take those monstrously long URLs and transform them into sleek, shareable, and much more manageable short links. This article will guide you, step-by-step, through building your own simple URL shortener using ReactJS. This project is ideal for beginners and intermediate developers looking to hone their React skills while learning about API interactions and state management.

Why Build a URL Shortener?

Creating a URL shortener is an excellent learning project for several reasons:

  • Practical Application: You’ll build something you can actually use. Shortening URLs is a common need, and having your own tool can be incredibly useful.
  • API Integration: You’ll learn how to interact with external APIs (like a URL shortening service) to fetch and display data.
  • State Management: You’ll gain practical experience in managing the state of your application, from user input to the shortened URL.
  • Component-Based Architecture: You’ll reinforce your understanding of React’s component-based structure, building reusable UI elements.
  • Real-World Problem Solving: You’ll address a common problem and create a solution that provides tangible value.

This project will solidify your understanding of fundamental React concepts, preparing you for more complex projects down the line. Plus, you’ll have a cool tool to show off!

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.
  • A code editor: Choose your favorite – VS Code, Sublime Text, Atom, or any other editor you prefer.
  • React knowledge: You should have a basic understanding of React components, JSX, state, and props.

Setting Up Your React Project

Let’s get started by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app url-shortener
cd url-shortener

This command will create a new directory called `url-shortener`, install all the necessary dependencies, and set up a basic React application structure. Once the installation is complete, navigate into the project directory using `cd url-shortener`.

Project Structure

Your project directory will look something like this:


url-shortener/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

The core of your application will reside in the `src` directory. We’ll be primarily working with `App.js` and potentially creating new components within this directory.

Installing Dependencies (Optional)

While this project doesn’t strictly require any external libraries, you might want to use a library like `axios` for making API requests. Install it using:

npm install axios

If you choose not to use `axios`, you can use the built-in `fetch` API in JavaScript.

Building the Components

Let’s break down the project into smaller, manageable components. We’ll need at least two main components:

  • `App.js` (Main Component): This component will handle the overall structure, user input, API calls, and displaying the shortened URL.
  • `ShortenerForm.js` (Optional, but recommended): This component will handle the form for entering the URL and submitting it. This separation keeps your code organized.

1. The `ShortenerForm` Component (Optional)

Create a new file named `ShortenerForm.js` in the `src` directory. This component will contain the form for the user to enter the long URL.

// src/ShortenerForm.js
import React, { useState } from 'react';

function ShortenerForm({ onShorten }) {
  const [longUrl, setLongUrl] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onShorten(longUrl);
    setLongUrl(''); // Clear the input after submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="url"
        placeholder="Enter your URL here"
        value={longUrl}
        onChange={(e) => setLongUrl(e.target.value)}
        required
      />
      <button type="submit">Shorten</button>
    </form>
  );
}

export default ShortenerForm;

Explanation:

  • `useState`: We use the `useState` hook to manage the `longUrl` state, which holds the URL entered by the user.
  • `handleSubmit`: This function is called when the form is submitted. It prevents the default form submission behavior (which would refresh the page), calls the `onShorten` function (passed as a prop from `App.js`) with the `longUrl`, and then clears the input field.
  • `onChange`: This event handler updates the `longUrl` state whenever the user types in the input field.
  • `onShorten` prop: This prop is a function passed from the `App.js` component. It’s responsible for making the API call to shorten the URL.

2. The `App.js` Component (Main Component)

Now, let’s modify the `App.js` file to include the form, handle API calls, and display the shortened URL.


// src/App.js
import React, { useState } from 'react';
import ShortenerForm from './ShortenerForm'; // Import the ShortenerForm component
import axios from 'axios'; // Import axios (if you're using it)
import './App.css';

function App() {
  const [shortenedUrl, setShortenedUrl] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const API_ENDPOINT = 'https://api.shrtco.de/v2/shorten'; // Replace with your chosen API endpoint

  const handleShorten = async (longUrl) => {
    setIsLoading(true);
    setError('');
    try {
      const response = await axios.post(API_ENDPOINT, { url: longUrl });
      if (response.data.ok) {
        setShortenedUrl(response.data.result.short_link);
      } else {
        setError(response.data.error);
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="App">
      <h1>URL Shortener</h1>
      <ShortenerForm onShorten={handleShorten} />
      {isLoading && <p>Loading...</p>}
      {error && <p className="error">{error}</p>}
      {shortenedUrl && (
        <div>
          <p>Shortened URL: <a href={shortenedUrl} target="_blank" rel="noopener noreferrer">{shortenedUrl}</a></p>
        </div>
      )}
    </div>
  );
}

export default App;

Explanation:

  • `useState`:
    • `shortenedUrl`: Stores the shortened URL.
    • `isLoading`: Tracks whether the API request is in progress.
    • `error`: Stores any error messages.
  • `API_ENDPOINT`: This constant holds the URL of the API you’ll use for shortening URLs. You’ll need to find a free and reliable URL shortening API. A popular option is `https://api.shrtco.de/v2/shorten`. Make sure to check the API’s documentation for usage guidelines and rate limits.
  • `handleShorten`: This asynchronous function is responsible for making the API call. It takes the `longUrl` as input, sets `isLoading` to `true`, and then attempts to shorten the URL.
  • API Call: Inside `handleShorten`, we use `axios.post` (or `fetch` if you prefer) to send a POST request to the API endpoint. We pass the `longUrl` in the request body.
  • Error Handling: The `try…catch…finally` block handles potential errors during the API call. If the API returns an error, it’s displayed to the user. `finally` ensures `isLoading` is set to `false` regardless of success or failure.
  • Conditional Rendering: The component conditionally renders the loading message, error message, and the shortened URL based on the `isLoading`, `error`, and `shortenedUrl` states, respectively.
  • Component Composition: We use the `ShortenerForm` component and pass the `handleShorten` function as a prop (`onShorten`).

3. Styling (Optional, but recommended)

Create an `App.css` file in the `src` directory and add some basic styling to improve the look and feel of your application. Here’s a basic example:


/* src/App.css */
.App {
  text-align: center;
  padding: 20px;
  font-family: sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

.error {
  color: red;
  margin-top: 10px;
}

You can customize the styling further to your liking.

Connecting to a URL Shortening API

The core functionality of your application relies on a URL shortening API. There are several free and paid options available. For this tutorial, we’ll use `shrtco.de` because it’s easy to use and doesn’t require an API key for basic usage. However, it’s always a good practice to review the API’s documentation and terms of service before using it in a production environment.

Important: Always be mindful of API rate limits and terms of service. Avoid making excessive requests, and consider implementing error handling to gracefully handle API errors.

Choosing an API

If you prefer a different API, research available options and choose one that suits your needs. Some popular alternatives include:

  • Bitly: A well-known and feature-rich option, but often requires an API key for more than basic usage.
  • TinyURL: A simple and free option, but with limited features.
  • Rebrandly: A more advanced option with features like custom domains and analytics (may require a paid plan).

Make sure to replace the `API_ENDPOINT` in your `App.js` with the correct URL of your chosen API. You may also need to adjust the way you send the URL and parse the response based on the API’s documentation.

Testing Your Application

Now that you’ve built the components and connected to the API, it’s time to test your application. Run the following command in your terminal:

npm start

This will start the development server, and your application should open in your browser (usually at `http://localhost:3000`). Enter a long URL into the input field and click the “Shorten” button. If everything is working correctly, the shortened URL should appear below the form.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect API Endpoint: Double-check that you’ve entered the correct API endpoint URL. Typos are a common cause of errors.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API you’re using doesn’t allow requests from your domain. This is less common with public APIs, but it can happen. If this occurs, you might need to use a proxy server or choose a different API that supports CORS.
  • Incorrect Data Parsing: Make sure you’re correctly parsing the API’s response. The structure of the response (e.g., the key containing the shortened URL) varies between APIs. Carefully examine the API documentation and adjust your code accordingly. Use `console.log(response.data)` to inspect the response structure.
  • Missing Dependencies: Ensure you’ve installed all the required dependencies (e.g., `axios`). Run `npm install` in your project directory if you’re unsure.
  • State Management Issues: If the UI doesn’t update correctly, review your state management logic. Make sure you’re updating the state variables correctly using `setShortenedUrl`, `setIsLoading`, and `setError`.
  • API Rate Limiting: Some APIs have rate limits. If you’re making too many requests, you might get an error. Consider implementing rate limiting in your application if necessary (e.g., by disabling the button for a short period after a successful request).
  • Error Handling: Implement robust error handling to catch API errors and display informative messages to the user.

Key Takeaways and Summary

This tutorial has walked you through creating a simple URL shortener using React. You’ve learned how to:

  • Set up a React project using Create React App.
  • Create reusable components.
  • Handle user input using the `useState` hook.
  • Make API calls using `axios` (or `fetch`).
  • Manage application state.
  • Display data fetched from an API.
  • Implement basic error handling.

This project provides a solid foundation for understanding fundamental React concepts and API integration. You can expand upon this project by adding features such as:

  • Custom URL slugs: Allow users to specify a custom short URL. (This often requires a paid API plan.)
  • Analytics: Display the number of clicks for each shortened URL. (This often requires a paid API plan.)
  • User accounts: Allow users to create accounts and manage their shortened URLs.
  • More advanced error handling: Implement more sophisticated error handling and user feedback.
  • UI improvements: Enhance the user interface with better styling and user experience.

By tackling this project, you’ve gained valuable experience in building interactive web applications with React, and you’ve learned how to interact with external APIs to enhance your applications’ functionality. Now, go forth and shorten those URLs!

More posts