💻 Coding & Development

URL Shortener

📁 Coding & Development 👤 Contributed by @f 🗓️ Updated 2026-04-19

The prompt

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.

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'll help you build a comprehensive URL shortening service! Let's start with the HTML structure featuring a clean input field, then add CSS for responsive design across devices. For the backend, we'll use a REST API with endpoints for shortening, retrieving, and tracking URLs. I'll include URL validation using regex patterns, QR code generation via a library like qrcode.js, and implement localStorage for history management with search filters.

✨ Claude

This is quite an extensive feature set for a URL shortener. I'd recommend starting with core functionality first: the shortening interface, validation, and basic retrieval. Then layer in features like QR codes (using a library like qrcode.js), analytics (consider privacy implications), and password protection. Note that some features like click tracking will require careful backend design and potentially database considerations beyond a simple API.

💎 Gemini

To build this URL shortener, use HTML5 forms with input validation (pattern attribute and JavaScript checks), CSS Grid/Flexbox for responsive layout, and fetch API for backend calls. Integrate libraries like qrcode.js for QR generation and Clipboard API for copy functionality. The backend should handle POST requests for shortening, implement database storage for tracking clicks and metadata, and return JSON responses with shortened URLs and analytics data.

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.

How to customize this prompt

Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).

Common use cases

Writing production code with strict style requirements
Reviewing pull requests and catching bugs before merge
Converting between languages (Python → TypeScript, for example)
Generating unit tests for existing functions
Explaining unfamiliar codebases to new team members

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).