QR-Not

Advanced QR code generator with professional templates, batch downloads, and smart history management. Create, customize and share QR codes instantly with beautiful design options and multiple export.

Comment

Inspiration

QR codes have become essential in our digital world, but most generators are basic and lack professional features. We wanted to create a tool that combines beautiful design with powerful functionality - something that developers, marketers, and businesses could actually use in production.

What it does

QR-Not is an advanced QR code generator that goes beyond simple text-to-QR conversion:

  • Smart Templates: Pre-built templates for WiFi, email, phone, location, and more
  • Professional Customization: Full color control with beautiful color pickers
  • Batch Downloads: Generate multiple sizes (128px to 1024px) in one ZIP file
  • Smart History: Save, favorite, and manage your QR codes with timestamps
  • Multiple Formats: Export as PNG, SVG, or batch ZIP files
  • Responsive Preview: See how your QR code looks on mobile, tablet, and desktop
  • Dark Mode: Beautiful dark/light theme switching
  • Production Ready: High-quality output with customizable error correction levels

How we built it

  • Frontend: React 18 with TypeScript for type safety and modern development
  • Styling: Tailwind CSS with custom animations and glassmorphism effects
  • QR Generation: QRCode.js library with custom canvas rendering for high-quality output
  • UI Components: Headless UI for accessible modals and popovers
  • File Handling: JSZip for batch downloads, FileSaver for cross-browser downloads
  • State Management: React hooks with localStorage persistence
  • Build Tool: Vite for fast development and optimized production builds

Challenges we ran into

  • Canvas Rendering: Getting high-quality PNG generation from SVG QR codes required careful canvas manipulation and proper background handling
  • Batch Processing: Creating multiple PNG sizes asynchronously while maintaining performance
  • Mobile Sharing: Implementing native sharing API with proper fallbacks for different browsers
  • Color Management: Ensuring proper contrast and readability across all color combinations
  • Performance: Optimizing QR generation to be instant while maintaining quality

Accomplishments that we're proud of

✨ Beautiful Design: Created a production-worthy interface with smooth animations and glassmorphism effects 🚀 Performance: Instant QR generation with smooth transitions and loading states 📱 Mobile First: Fully responsive design that works perfectly on all devices 🎨 User Experience: Intuitive interface with helpful feedback and error handling 💾 Smart Features: History management, favorites, and batch downloads 🌙 Accessibility: Dark mode support and proper contrast ratios 📦 Production Ready: Deployed and fully functional at https://neon-cocada-8608e7.netlify.app

What we learned

Advanced canvas manipulation for high-quality image generation Implementing complex file download workflows with proper error handling Creating smooth, performant animations with CSS and React Building accessible UI components with proper keyboard navigation Optimizing React applications for production deployment Working with modern web APIs like the Share API and Clipboard API

What's next for QR-Not

🔗 API Integration: Add QR code analytics and tracking 🎨 Advanced Customization: Logo embedding and custom shapes 📊 Bulk Generation: CSV import for generating multiple QR codes 🔐 User Accounts: Cloud sync for history across devices 📈 Analytics Dashboard: Track QR code scans and usage 🌍 Internationalization: Multi-language support 🔌 Browser Extension: Quick QR generation from any webpage 📱 Mobile App: Native iOS/Android apps with camera integration

Built With

Share this project:

Updates