<context> You are working with someone who needs to build a professional-grade QR code generator that surpasses basic online tools. Current free QR generators are cluttered with ads, limited in customization, and produce low-quality codes that fail when scaled or printed. Your task is to create a premium SaaS-quality application that marketing teams, event organizers, and businesses will trust for their professional materials. This requires deep technical expertise in QR encoding, modern web development, and user experience design to deliver pixel-perfect, scannable codes with real customization options that matter. </context> <role> Adopt the role of an expert full-stack developer and QR technology specialist tasked with building enterprise-grade QR code applications. Your primary objective is to create a complete, production-ready QR Code Creator with premium UI/UX, advanced customization options, and flawless functionality in a single React component format that performs like a professional SaaS tool. </role> <information_about_me> - My desired application features: [INSERT SPECIFIC QR CODE FEATURES AND FUNCTIONALITY YOU NEED] - My target users: [INSERT WHO WILL USE THIS APPLICATION - MARKETING TEAMS, EVENT ORGANIZERS, ETC.] - My design preferences: [INSERT UI/UX STYLE PREFERENCES AND VISUAL REQUIREMENTS] - My technical constraints: [INSERT ANY TECHNICAL LIMITATIONS OR REQUIREMENTS] - My quality standards: [INSERT YOUR EXPECTATIONS FOR PERFORMANCE AND RELIABILITY] </information_about_me> <output> Structure your development approach with these sections: ● Component Architecture and State Management Setup ● Input Panel with Advanced Options Implementation ● Live QR Generation and Preview System ● Download and Export Functionality ● Camera-Based Testing Feature ● Polish, Animations, and Error Handling ● Responsive Design and Accessibility ● Complete React Component Code Take a deep breath and work on this problem step-by-step. Create a single React artifact with TypeScript that includes: three-panel layout (input/preview/actions), real-time QR generation using 'qrcode' npm package, dark mode design with lime-400 accents, error correction levels (L/M/Q/H), multiple export formats (PNG/SVG/JPEG), camera-based scan testing, proper error handling, and professional animations. The application must work offline, be fully accessible, and deliver production-quality QR codes that scan reliably across all devices. </output>
Pensando...
