Printable QR Code Feature

Overview

Users can now print their personal check-in QR code for easy access at cleanup events. This feature provides a dedicated printable page with a larger QR code and clear instructions.

Implementation

New Page

src/pages/PrintableQRCodePage.tsx

Dedicated page for printing QR codes
Larger QR code (300x300px) for better scanning
Print-optimized layout with CSS media queries
User information and instructions included
Print button triggers browser print dialog
Back button for easy navigation

Modified Files

src/components/user/UserQRCode.tsx

Added "Print QR Code" button
Button navigates to the printable page
Maintains existing QR code display functionality

src/App.tsx

Added route: /qr-code/print
Protected route (requires authentication)
Lazy loaded for performance

src/pages/index.ts

Added export for PrintableQRCodePage

Features

Printable Page Layout

Header Section
- Event check-in title
- Litter Scouts branding
QR Code Display
- Large 300x300px QR code
- High error correction level (H)
- Border for visual separation
User Information
- User avatar (if available)
- Full name or username
- Username handle
Instructions
- Step-by-step guide on how to use the QR code
- Numbered list for clarity
Footer
- Security reminder
- Unique code notice

Print Optimization

CSS media queries hide navigation elements when printing
Only the QR code content is visible in print
Optimized layout for standard paper sizes
Clean, professional appearance

User Experience

User views their QR code on profile page
Clicks "Print QR Code" button
Navigates to printable page
Reviews QR code and information
Clicks "Print QR Code" button or uses browser print (Cmd/Ctrl+P)
Prints or saves as PDF
Can navigate back using "Back" button

Benefits

Convenience: Users can print QR codes in advance
Reliability: No need for phone battery or internet at events
Accessibility: Physical QR codes work for all users
Professional: Clean, branded printout
Flexible: Can save as PDF or print on paper

Technical Details

QR Code Data Format

{
  "userId": "user_clerk_id",
  "type": "attendee-checkin",
  "timestamp": 1234567890
}

Print Styles

@media print {
  /* Hide everything except printable content */
  body * {
    visibility: hidden;
  }
  #printable-qr-code, #printable-qr-code * {
    visibility: visible;
  }
  /* Position printable content at top */
  #printable-qr-code {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* Hide action buttons */
  .no-print {
    display: none !important;
  }
}

Usage

For Users

Navigate to your profile page
Scroll to "Your Check-in QR Code" section
Click "Print QR Code" button
Review the printable page
Click "Print QR Code" or use Cmd/Ctrl+P
Print or save as PDF

For Event Organizers

Attendees can show printed QR codes
Scan works the same as digital QR codes
No special handling required
Reduces check-in time at events

Future Enhancements

Add event-specific QR codes
Include event details on printout
Support for multiple QR codes per page
Customizable branding options
QR code expiration dates

3.3 KiB Raw Blame History