Source: Jolli-sample-repos/url-shortener  Last Updated: 4/8/2026

URL Shortener Frontend

Simple HTML/CSS/JavaScript frontend for the URL Shortener API.

Features

• Shorten long URLs with optional custom codes
• Set expiration dates for short URLs
• Copy shortened URLs to clipboard
• View URL statistics (clicks, created date, last accessed)
• Recent URLs history (stored in localStorage)
• Top 10 most clicked URLs leaderboard
• Clean, responsive design

Running the Frontend

1. Make sure the backend is running on http://localhost:3001

2. Open index.html in your browser or use a simple HTTP server:

# Using Python
python -m http.server 8080
 
# Using Node.js http-server
npx http-server -p 8080

3. Navigate to http://localhost:8080/index.html

File Structure

frontend/
├── index.html          # Main page
├── css/
│   └── style.css      # All styles
└── js/
    └── app.js         # Application logic

Usage

1. Enter a long URL to shorten
2. Optionally set a custom code (must be unique)
3. Optionally set an expiration date
4. Click “Shorten URL” to generate a short link
5. Copy the shortened URL or view its statistics
6. Recent URLs are saved to browser localStorage
7. View the top 10 most clicked URLs at the bottom