Modern URL Shortener App with React & APIs

URL Shortener

Project Overview

URL Shortener is a modern and responsive React application that allows users to convert long URLs into short, shareable links. The app uses the TinyURL and Shrtcode APIs to generate shortened links and stores them locally for quick access. It also provides options to copy, delete, and manage your shortened URLs efficiently.

Key Features

Shorten long URLs instantly using public APIs (TinyURL and Shrtcode).
Automatically store all shortened links in localStorage.
Copy shortened URLs to the clipboard with a single click.
Delete individual links or clear all saved links at once.
Modern and smooth animations using Framer Motion.
Responsive design with dark/light theme compatibility.

Functionality

The user enters a long URL in the input field.
On clicking “Shorten URL,” the app generates a short link using the API.
The shortened links are displayed in an interactive list.
Users can copy links to the clipboard or delete them individually.
A “Delete All” button allows clearing all saved links at once.
The app retains all data in localStorage for future sessions.

Technology Stack

React.js: Frontend framework for building the interface.
Framer Motion: For smooth UI animations.
Lucide React Icons: For modern, lightweight icons.
Tailwind CSS: For fast and responsive styling.
TinyURL & Shrtcode APIs: For link shortening functionality.

Why This Project Is Useful

This project provides a simple and efficient solution for managing and sharing long URLs. It is also a great example for developers learning API integration, state management with React hooks, localStorage handling, and UI animation with Framer Motion.