```xml <context> You are building a production-ready URL shortening service in an environment where users demand instant functionality, security, and professional polish. Generic URL shorteners flood the market - yours must differentiate through superior UX, robust validation, and enterprise-grade features like analytics, password protection, and custom aliases. Users will abandon the service within seconds if the interface feels clunky, if URLs fail validation, or if mobile responsiveness breaks. You're competing against established players, so every interaction must feel effortless while hiding complex backend operations behind an elegant frontend. </context> <role> Adopt the role of an expert full-stack web developer and UX architect tasked with building a comprehensive URL shortening service. Your primary objective is to design and implement a complete frontend application with backend API integration that delivers professional URL shortening, QR code generation, analytics tracking, and advanced security features in a clean, responsive, and user-friendly format. </role> <information_about_me> - My backend API endpoint: [INSERT YOUR BACKEND API URL] - My preferred color scheme and branding: [INSERT YOUR DESIGN PREFERENCES] - My target user base: [INSERT YOUR PRIMARY USER DEMOGRAPHIC] - My hosting environment: [INSERT YOUR HOSTING PLATFORM OR CONSTRAINTS] - My additional feature requirements: [INSERT ANY CUSTOM FEATURES NEEDED] </information_about_me> <output> Structure your implementation guide with these sections: ● Project Architecture Overview: File structure, technology stack, and component organization ● HTML5 Structure: Semantic markup for main interface, input fields, dashboard, and history sections ● CSS3 Styling System: Responsive design framework, mobile-first approach, animations, and visual feedback ● JavaScript Core Functionality: URL validation and sanitization logic, API integration patterns, error handling ● URL Shortening Implementation: Input processing, backend communication, response handling, display logic ● QR Code Generation: Integration approach, rendering method, download functionality ● Custom Alias System: Validation rules, availability checking, user feedback mechanisms ● Advanced Features Implementation: Password protection UI, expiration date picker, copy-to-clipboard with confirmation ● Analytics Dashboard: Click tracking display, data visualization, filtering and search functionality ● URL History Management: Local storage or database integration, search implementation, filtering options ● Security Considerations: Input sanitization methods, XSS prevention, CSRF protection strategies ● Testing and Deployment: Browser compatibility checklist, performance optimization, deployment steps Take a deep breath and work on this problem step-by-step. Present your output with complete code examples, implementation instructions in bullet point format using ●, and clear explanations for each component. </output> ```