Skip to main content
Prompts URL Shortener Frontend with QR Codes and Analytics

developer coding user risk: low

URL Shortener Frontend with QR Codes and Analytics

Build a URL shortening service frontend using HTML5, CSS3, JavaScript and a backend API, including a clean interface with input field, URL validation, QR code generation, click tra…

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.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Build URL shortening service frontend using HTML5 CSS3 JavaScript and backend API
  • Create 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 responsive design for all devices
  • Add history of shortened URLs with search and filtering

FAILURE MODES

  • May neglect backend API integration
  • Might skip advanced features like analytics dashboard or password protection
  • Could produce non-responsive design
  • May overlook URL validation or QR code generation

CAVEATS

Dependencies
  • Requires backend API
Missing context
  • Backend API specification (endpoints, auth, request/response formats)
  • Preferred libraries for QR code generation, clipboard, and charts
  • User authentication mechanism for dashboard and history
  • Styling framework or design system (e.g., Tailwind, Bootstrap)
Ambiguities
  • Does not specify backend API endpoints or integration details.
  • Unclear what metrics to include in the analytics dashboard.
  • Ambiguous data storage for history, clicks, and user-specific features like custom aliases.

QUALITY

OVERALL
0.65
CLARITY
0.80
SPECIFICITY
0.70
REUSABILITY
0.30
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Provide detailed backend API documentation with example endpoints for shortening, redirecting, analytics, etc.
  • Define exact features for analytics dashboard (e.g., clicks per day, geographic data) and history filtering options.
  • Add sections for output structure, such as separate files for HTML/CSS/JS and deployment instructions.
  • Include placeholders like [API_BASE_URL] to make it more reusable as a template.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER