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

Written by

FixTechToday

in

In the digital age, where information travels at lightning speed, URLs have become the primary gateways to content. However, long, unwieldy URLs can be a nuisance. They’re difficult to share, prone to errors when typed manually, and can clutter the visual experience, especially on platforms with character limits. This is where URL shorteners come in, transforming lengthy addresses into concise, manageable links. In this comprehensive guide, we’ll embark on a journey to build a simple yet functional URL shortener application using ReactJS. This project is ideal for both beginners and intermediate developers looking to hone their React skills and understand how to interact with APIs.

Why Build a URL Shortener?

Creating a URL shortener app offers several advantages for learning and practical application:

  • Practical Skill Development: It allows you to practice fundamental React concepts like state management, component composition, and handling user input.
  • API Interaction: You’ll learn how to fetch data from an external API (in this case, a URL shortening service) and handle responses.
  • Real-World Application: URL shorteners are widely used, making this project relevant and practical.
  • Project Portfolio: A URL shortener app is a valuable addition to your portfolio, demonstrating your ability to build functional web applications.

Prerequisites

Before we dive into the code, ensure you have the following prerequisites:

  • 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 and styling the application.
  • A code editor (e.g., VS Code, Sublime Text): Choose your preferred editor to write and manage your code.

Setting Up the React Project

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

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

This command creates a new React project named “react-url-shortener” and navigates you into the project directory. Now, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000.

Project Structure

Let’s outline the project structure we’ll be using:

react-url-shortener/
│
├── public/
│   └── index.html
│
├── src/
│   ├── components/
│   │   └── URLShortener.js
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
│
├── package.json
└── ...

We’ll create a `components` folder inside the `src` directory to hold our `URLShortener.js` component, which will be the core of our application. We will modify `App.js` to render this component.

Building the URLShortener Component

Now, let’s create the `URLShortener` component, which will handle the user interface and API interactions. Create a new file named `URLShortener.js` inside the `src/components` directory and add the following code:

import React, { useState } from 'react';

function URLShortener() {
  const [longURL, setLongURL] = useState('');
  const [shortURL, setShortURL] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      const response = await fetch('https://api.shrtco.de/v2/shorten?url=' + encodeURIComponent(longURL));
      const data = await response.json();

      if (data.ok) {
        setShortURL(data.result.short_link);
      } else {
        setError(data.error);
      }
    } catch (err) {
      setError('An error occurred. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="url-shortener-container">
      <h2>URL Shortener</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="url"
          placeholder="Enter URL"
          value={longURL}
          onChange={(e) => setLongURL(e.target.value)}
          required
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Shortening...' : 'Shorten'}
        </button>
        {error && <p className="error-message">{error}</p>}
        {shortURL && (
          <div className="short-url-display">
            <p>Shortened URL: <a href={shortURL} target="_blank" rel="noopener noreferrer">{shortURL}</a></p>
          </div>
        )}
      </form>
    </div>
  );
}

export default URLShortener;

Let’s break down this code:

  • State Variables: We use the `useState` hook to manage the following states:
    • `longURL`: Stores the URL entered by the user.
    • `shortURL`: Stores the shortened URL received from the API.
    • `isLoading`: A boolean indicating whether the API request is in progress.
    • `error`: Stores any error messages.
  • `handleSubmit` Function: This function is triggered when the form is submitted. It performs the following steps:
    • Prevents the default form submission behavior.
    • Clears any previous error messages and sets `isLoading` to `true`.
    • Makes an API call to the shrtco.de API using `fetch`. We use `encodeURIComponent` to properly format the URL.
    • Parses the response as JSON.
    • If the API call is successful (`data.ok` is true), it updates the `shortURL` state.
    • If there’s an error, it sets the `error` state.
    • Finally, it sets `isLoading` back to `false`.
  • JSX Structure: The component renders a form with:
    • An input field for the long URL.
    • A submit button that is disabled while `isLoading` is true.
    • An error message, if any.
    • A display of the shortened URL, if available, as a clickable link.

Integrating the Component into App.js

Now, let’s integrate the `URLShortener` component into our main `App.js` file. Open `src/App.js` and replace the existing code with the following:

import React from 'react';
import URLShortener from './components/URLShortener';
import './App.css';

function App() {
  return (
    <div className="App">
      <URLShortener />
    </div>
  );
}

export default App;

This imports the `URLShortener` component and renders it within a `div` with the class “App”.

Styling the Application (App.css)

To make our application visually appealing, let’s add some basic CSS styles. Open `src/App.css` and add the following code:

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

.url-shortener-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

input[type="url"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

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

.short-url-display {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #28a745;
  border-radius: 4px;
  background-color: #f8f9fa;
}

These styles provide basic styling for the container, input field, button, error messages, and the display of the shortened URL. You can customize these styles to match your preferences.

Common Mistakes and How to Fix Them

During the development process, you might encounter some common mistakes. Here’s how to address them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the browser is blocking your request to the API because the API server doesn’t allow requests from your domain. The shrtco.de API, which we are using, generally doesn’t have CORS issues, but if you switch to another API, you might need to use a proxy server or configure CORS on the server-side. For development, you might be able to use a browser extension that disables CORS, but this is not recommended for production.
  • API Key Issues: Some URL shortening services require API keys. If you’re using an API that requires a key, make sure you’ve obtained one and included it correctly in your API request. For our example, the shrtco.de API does not require an API key.
  • Incorrect URL Formatting: Ensure the URL entered by the user is valid. You can use HTML5’s `type=”url”` input type, which provides some basic validation, and consider adding more robust validation in your JavaScript code.
  • Handling Errors Properly: Always include error handling in your `try…catch` blocks to gracefully handle API failures. Display informative error messages to the user.
  • State Updates: Make sure you are correctly updating the state variables using the `set…` functions provided by the `useState` hook. Incorrect state updates can lead to unexpected behavior.

Step-by-Step Instructions

Let’s recap the steps to build and run the application:

  1. Create a new React app: `npx create-react-app react-url-shortener`.
  2. Navigate to the project directory: `cd react-url-shortener`.
  3. Create `URLShortener.js` component: Create this file in the `src/components` directory and add the component code.
  4. Modify `App.js`: Import and render the `URLShortener` component in `App.js`.
  5. Add CSS styles: Add the CSS styles to `App.css`.
  6. Run the application: `npm start`.
  7. Test the application: Enter a long URL and click the “Shorten” button.

Enhancements and Further Learning

Once you’ve built the basic URL shortener, consider these enhancements to improve its functionality and your understanding of React:

  • Add a Copy to Clipboard Button: Implement a button that copies the shortened URL to the user’s clipboard.
  • Implement URL Validation: Add more robust URL validation to ensure the user enters a valid URL.
  • Add a Custom Domain Option: Some URL shorteners allow users to use their own domains. Research how to integrate this functionality. (This is significantly more complex.)
  • Implement Error Handling: Improve error handling by displaying more specific error messages and logging errors to the console.
  • Add a Loading Indicator: Display a loading spinner while the API request is in progress to provide better feedback to the user. (We already implemented this).
  • Consider a Different API: Explore other URL shortening APIs and compare their features and pricing.
  • Use Environment Variables: Store the API endpoint in an environment variable to avoid hardcoding it in the code.
  • Add a History Feature: Store the shortened URLs in local storage or a database and display a history of shortened URLs.

Key Takeaways

This project provides a solid foundation for understanding React and interacting with APIs. You’ve learned how to:

  • Create and manage React components.
  • Use the `useState` hook for state management.
  • Make API requests using `fetch`.
  • Handle user input and display responses.
  • Implement basic error handling.

Optional FAQ

Here are some frequently asked questions about building a URL shortener app:

  1. Can I use this app in production?

    Yes, you can deploy this app. However, consider the rate limits and terms of service of the URL shortening API you’re using. You might need to implement more robust error handling and rate limiting on your end if the API has strict limits.

  2. What if the API I’m using requires an API key?

    If the API requires an API key, you’ll need to obtain one from the API provider and include it in your API request. It is best practice to store the API key in an environment variable rather than hardcoding it in your code. You would typically pass the API key in the `fetch` request headers or as a query parameter in the URL.

  3. How can I deploy this app?

    You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms typically require you to build your app using `npm run build` and then deploy the contents of the `build` directory.

  4. Where can I find other URL shortening APIs?

    There are many URL shortening APIs available. Some popular options include Bitly, TinyURL, and is.gd. Research different APIs to find one that suits your needs and budget.

Building a URL shortener app is a rewarding project that allows you to apply core React concepts while creating something useful. The ability to transform long, cumbersome links into neat, shareable ones is a valuable skill in today’s digital landscape. Experiment with the code, explore the enhancements, and most importantly, enjoy the learning process. With each line of code, you’re not just building an application; you’re solidifying your understanding of React and web development principles. The knowledge gained from this project will undoubtedly serve you well as you continue your journey in the world of front-end development. The power to create efficient and user-friendly tools is now at your fingertips, one shortened URL at a time.

More posts