URL Shortener

URL Shortener is a web-based application that allows users to input long URLs and generate shortened links. This project leverages an intuitive interface for a seamless user experience, with the added feature of copying the shortened URL to the clipboard directly.

URL Shortener Screenshot

Technologies Used

  • Frontend: HTML, CSS, TypeScript
  • Backend: None (API Integration with axios)
  • API: Various URL shortening APIs (e.g., shrtco.de, tinyurl.com)
  • Libraries & Tools:
    • Toastify.js (Notification System)
    • Axios (HTTP Client)
    • Tailwind CSS (UI Styling)
    • Vite (Build Tool)

Features

  1. URL Shortening:

    • Allows users to shorten URLs through an external API service.
    • Displays the shortened URL in the input field for easy access.

  2. Clipboard Copying:

    • Users can click a button to copy the shortened URL directly to the clipboard.
    • Provides feedback through visual notifications using Toastify.js.

  3. Real-Time Validation:

    • Automatically validates the URL format before submission.
    • Shows warnings for invalid URLs.

  4. User-Friendly Interface:

    • Simple form for URL input and output.
    • Responsive design for various screen sizes.

  5. Notifications:

    • Provides real-time feedback when a URL is successfully shortened or when an error occurs.

Code Architecture

The core functionality is encapsulated in the Shortener class, which handles:

  • Initialization: Dynamically creates and renders the DOM elements for the form and buttons.
  • Event Handling: Tracks user input and form submissions, handling URL validation and API requests.
  • State Management: Manages the form state, error messages, and success responses.
  • API Integration: Uses external URL shortening APIs to generate shortened URLs.
  • Clipboard Handling: Manages the copy-to-clipboard functionality for the shortened URL.
  • Notification System: Uses Toastify.js to provide user feedback on actions performed.