Batch QR Generator

Description

Batch QR Generator is a high-performance web application that enables users to generate multiple customized QR codes simultaneously. Built with modern frontend technologies, it offers a seamless user experience with real-time preview capabilities and batch processing functionality. The application is particularly useful for businesses and individuals who need to generate large volumes of QR codes with consistent styling but different data.

The application was developed to solve the common problem of manually creating multiple QR codes, which is time-consuming and error-prone. By automating this process, users can efficiently generate hundreds of codes in seconds while maintaining full control over their appearance and format.

Challenges

• Efficient Batch Processing: Implementing a system to handle large volumes of QR code generation without causing browser performance issues.
• Dynamic QR Code Customization: Creating a flexible and intuitive interface for customizing various aspects of QR codes (colors, shapes, logos) while providing real-time previews.
• Optimized File Handling: Managing file operations efficiently, particularly when dealing with image uploads for logos and CSV imports for batch processing.
• Cross-Format Support: Enabling the export of QR codes in multiple formats (SVG, PNG, JPEG) while maintaining quality and compatibility.
• ZIP Compression and Download: Implementing a mechanism to package and download multiple QR codes as a compressed ZIP file without overwhelming browser resources.

Solutions

Efficient Batch Processing

I implemented a progressive processing approach using JavaScript Promises to generate QR codes sequentially rather than simultaneously. This prevented browser freezing during large batch operations:

// Sequential processing with progress tracking
for (let i = 0; i < csvData.length; i++) {
  const row = csvData[i];
  const blob = await generateQRBlob(row);
  if (blob) {
    zip.file(`${row.filename}.${format}`, blob);
  }
  setProgress(((i + 1) / csvData.length) * 100);
}

A progress indicator keeps users informed about the operation status, enhancing perceived performance.

Dynamic QR Code Customization

I leveraged the qr-code-styling library combined with React’s state management to create a responsive customization system:

// Real-time QR code updates using React hooks
useEffect(() => {
  if (!qrCode) {
    const qr = new QRCodeStyling(config);
    setQrCode(qr);
    if (ref.current) {
      qr.append(ref.current);
    }
  } else {
    qrCode.update(config);
  }
}, [config, qrCode]);

This approach allows for instant visual feedback as users adjust settings like dot style, colors, and logo placement.

Optimized File Handling

I implemented efficient file handling using the FileReader API for both logo uploads and CSV imports:

// Logo image handling
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const imageUrl = e.target?.result as string;
      setConfig((prevConfig) => ({
        ...prevConfig,
        image: imageUrl,
      }));
    };
    reader.readAsDataURL(file);
  }
};

For CSV processing, I built a robust parser with validation to ensure data integrity:

// CSV validation and parsing
const headers = rows[0].split(',').map(header => header.trim());
const dataIndex = headers.findIndex(h => h.toLowerCase() === 'data');
const filenameIndex = headers.findIndex(h => h.toLowerCase() === 'filename');

if (dataIndex === -1 || filenameIndex === -1) {
  setError('CSV must contain "data" and "filename" columns');
  return;
}

ZIP Compression and Download

I integrated JSZip to package multiple QR codes efficiently for download:

const zip = new JSZip();
// Add files to zip
const zipBlob = await zip.generateAsync({ type: "blob" });
const url = URL.createObjectURL(zipBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'qr-codes.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

This approach ensures efficient memory usage and provides a single download for users.

Results

The Batch QR Generator delivers significant improvements over manual QR code creation:

• Efficiency: Reduces QR code generation time by up to 95% compared to individual creation methods
• Consistency: Ensures all QR codes maintain consistent styling and branding
• Flexibility: Supports multiple export formats (SVG, PNG, JPEG) to meet various use cases
• Scalability: Successfully tested with batches of 500+ QR codes
• User Experience: Intuitive interface with real-time previews and progress tracking

The application successfully combines advanced frontend technologies with a user-friendly interface, making it accessible to both technical and non-technical users. The modular architecture ensures maintainability and extensibility for future enhancements.

Visuals

Links

• Repository