CodingTextIntermediate

URL Shortener Frontend

Build a fully-featured URL shortening service frontend with input validation, QR code generation, click tracking, custom aliases, expiration dates, password protection, and more.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

Build a URL shortening service frontend using HTML5, CSS3, JavaScript and a backend API. Create a clean interface with prominent input field. Implement URL validation and sanitization. Add QR code generation for shortened URLs. Include click tracking and analytics dashboard. Support custom alias creation for URLs. Implement expiration date setting for links. Add password protection option for sensitive URLs. Include copy-to-clipboard functionality with confirmation. Create a responsive design for all devices. Add history of shortened URLs with search and filtering.

Use Cases

Demonstrate a complete frontend for URL shorteningTeach input validationQR code generationand click trackingShow advanced features like custom aliasesexpiration

Reference Output

A responsive URL shortener interface with input field, shorten button, QR code display, analytics dashboard, and link history list.

Scoring Rubric

Tier 1 (1-3): Basic input and URL shortening; Tier 2 (4-6): Add QR code generation, click tracking, and analytics; Tier 3 (7-9): Support custom aliases, expiration, password protection, and clipboard; Tier 4 (10): Full advanced features and responsive design.