Reduce printable QR code page size to fit on single page

Add printable QR code feature for event check-in
Add email prompt when users without email register for events
2025-11-20 19:37:50 +00:00 · 2025-11-20 19:30:59 +00:00 · 2025-11-20 19:24:27 +00:00 · 2025-11-20 19:10:29 +00:00 · 2025-11-20 19:04:28 +00:00 · 2025-11-20 19:02:33 +00:00
21 changed files with 1733 additions and 237 deletions
--- a/EMAIL_PROMPT_ON_REGISTRATION.md
+++ b/EMAIL_PROMPT_ON_REGISTRATION.md
@@ -0,0 +1,53 @@
+# Email Prompt on Event Registration
+
+## Overview
+
+When users without a registered email address attempt to sign up for an event, they are now prompted to add an email address. This ensures they can receive notifications about event changes or cancellations.
+
+## Implementation
+
+### New Component
+
+**`src/components/event/EmailPromptModal.tsx`**
+- Modal that appears when a user without an email tries to register for an event
+- Provides two options:
+  1. "Add Email Address" - Navigates to user profile page
+  2. "Continue Without Email" - Proceeds with registration anyway
+
+### Modified Files
+
+**`src/pages/EventsPage.tsx`**
+- Added email check in `handleRegister` function
+- Checks if user has `primaryEmailAddress` before registration
+- Shows EmailPromptModal if no email is found
+- Added navigation to user profile page for email management
+- Maintains pending event ID to complete registration after user decision
+
+**`src/components/event/index.ts`**
+- Added export for `EmailPromptModal`
+
+## User Flow
+
+1. User clicks "Register" or "Quick Register" on an event
+2. System checks if user has an email address registered
+3. If no email:
+   - EmailPromptModal appears
+   - User can choose to:
+     - Add email (redirected to profile page)
+     - Continue without email (registration proceeds)
+4. If email exists:
+   - Registration proceeds normally
+
+## Benefits
+
+- Encourages users to add email addresses for better communication
+- Non-blocking - users can still register without email
+- Clear messaging about why email is beneficial
+- Seamless integration with existing registration flow
+
+## Technical Details
+
+- Uses Clerk's `user.primaryEmailAddress?.emailAddress` to check for email
+- Modal is shown before API call to register
+- Pending event ID is stored in state during modal interaction
+- Registration completes after user makes a choice
--- a/PRINTABLE_QR_CODE_FEATURE.md
+++ b/PRINTABLE_QR_CODE_FEATURE.md
@@ -0,0 +1,146 @@
+# 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
+
+1. **Header Section**
+   - Event check-in title
+   - Litter Scouts branding
+
+2. **QR Code Display**
+   - Large 300x300px QR code
+   - High error correction level (H)
+   - Border for visual separation
+
+3. **User Information**
+   - User avatar (if available)
+   - Full name or username
+   - Username handle
+
+4. **Instructions**
+   - Step-by-step guide on how to use the QR code
+   - Numbered list for clarity
+
+5. **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
+
+1. User views their QR code on profile page
+2. Clicks "Print QR Code" button
+3. Navigates to printable page
+4. Reviews QR code and information
+5. Clicks "Print QR Code" button or uses browser print (Cmd/Ctrl+P)
+6. Prints or saves as PDF
+7. 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
+
+```json
+{
+  "userId": "user_clerk_id",
+  "type": "attendee-checkin",
+  "timestamp": 1234567890
+}
+```
+
+### Print Styles
+
+```css
+@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
+
+1. Navigate to your profile page
+2. Scroll to "Your Check-in QR Code" section
+3. Click "Print QR Code" button
+4. Review the printable page
+5. Click "Print QR Code" or use Cmd/Ctrl+P
+6. 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
--- a/QR_CODE_CHECKIN_IMPLEMENTATION.md
+++ b/QR_CODE_CHECKIN_IMPLEMENTATION.md
@@ -0,0 +1,210 @@
+# QR Code Check-In System Implementation
+
+## Overview
+
+Implemented a QR code-based check-in system for event attendees. Event organizers can scan attendee QR codes from their mobile devices to track attendance at cleanup events.
+
+## Features
+
+### 1. User QR Code Display
+- **Location**: User Profile Page (Overview tab)
+- **Component**: `UserQRCode` (`src/components/user/UserQRCode.tsx`)
+- Each user has a unique QR code containing their Clerk user ID
+- QR code is displayed prominently on their profile for easy access
+- Users can show this QR code to event organizers for check-in
+
+### 2. QR Code Scanner
+- **Component**: `QRCodeScanner` (`src/components/event/QRCodeScanner.tsx`)
+- Uses `html5-qrcode` library for camera-based scanning
+- Mobile-optimized with back camera support
+- Real-time scanning with visual feedback
+- Error handling for invalid QR codes
+
+### 3. Event Check-In Page
+- **Route**: `/events/:eventId/checkin`
+- **Component**: `EventCheckInPage` (`src/pages/EventCheckInPage.tsx`)
+- **Access**: Only event organizers can access
+- Features:
+  - Live QR code scanner
+  - List of registered attendees
+  - Visual indication of checked-in attendees
+  - Real-time updates after successful check-in
+  - Success/error notifications
+
+### 4. Backend API
+- **Endpoint**: `POST /api/events/:id/checkin`
+- **Controller**: `eventController.checkInAttendee`
+- **Service**: `eventService.checkInAttendee`
+- Validates:
+  - User is the event organizer
+  - Attendee is registered for the event
+  - Attendee hasn't already checked in
+- Returns attendee information on successful check-in
+
+## User Flow
+
+### For Attendees:
+1. Navigate to their profile page
+2. View their personal QR code in the Overview tab
+3. Show QR code to event organizer at the event
+
+### For Organizers:
+1. Navigate to their event details
+2. Click "QR Code Check-In" button
+3. Grant camera permissions
+4. Click "Start Scanning"
+5. Point camera at attendee's QR code
+6. System automatically checks in the attendee
+7. Visual confirmation and attendee list updates
+
+## Technical Implementation
+
+### Dependencies Added:
+```json
+{
+  "qrcode.react": "^3.x.x",
+  "html5-qrcode": "^2.x.x",
+  "@types/qrcode.react": "^1.x.x"
+}
+```
+
+### QR Code Data Format:
+```json
+{
+  "userId": "clerk_user_id",
+  "type": "attendee-checkin",
+  "timestamp": 1234567890
+}
+```
+
+### Key Components:
+
+1. **UserQRCode.tsx**
+   - Generates QR code using `qrcode.react`
+   - High error correction level (H)
+   - 200x200px size with margin
+   - Displays user's name below QR code
+
+2. **QRCodeScanner.tsx**
+   - Uses Html5Qrcode for camera access
+   - 250x250px scanning box
+   - 10 FPS scanning rate
+   - Parses and validates QR code data
+   - Callbacks for successful scan and errors
+
+3. **EventCheckInPage.tsx**
+   - Fetches event and attendee data
+   - Verifies organizer permissions
+   - Manages scanner state
+   - Handles check-in API calls
+   - Updates UI in real-time
+
+### Backend Changes:
+
+1. **eventController.ts**
+   - Added `checkInAttendee` method
+   - Validates organizer permissions
+   - Finds or creates user from Clerk ID
+   - Calls service layer for check-in
+
+2. **eventService.ts**
+   - Added `checkInAttendee` method
+   - Validates registration status
+   - Prevents duplicate check-ins
+   - Updates attendance record
+
+3. **eventRoutes.ts**
+   - Added `POST /:id/checkin` route
+   - Protected with `requireAuth` middleware
+
+## UI/UX Enhancements
+
+### User Profile:
+- QR code card with clear instructions
+- Prominent placement in Overview tab
+- User identification below QR code
+
+### Check-In Page:
+- Mobile-responsive design
+- Large, easy-to-use scanner interface
+- Clear start/stop buttons
+- Real-time attendee list with check-in status
+- Color-coded status indicators (green for checked in)
+- Success/error toast notifications
+
+### Event Detail Modal:
+- Added "QR Code Check-In" button for organizers
+- Purple button with QR icon
+- Available before and after event date
+- Navigates to dedicated check-in page
+
+## Security Considerations
+
+1. **Authorization**: Only event organizers can access check-in page
+2. **Validation**: Backend validates all check-in requests
+3. **QR Code Format**: Structured JSON with type validation
+4. **Timestamp**: Included in QR code (not currently validated, but available for future use)
+
+## Mobile Optimization
+
+- Camera access optimized for mobile devices
+- Back camera selected by default
+- Responsive layout for small screens
+- Touch-friendly buttons and controls
+- Large scanning area for easy targeting
+
+## Future Enhancements
+
+1. **Offline Support**: Cache attendee list for offline check-in
+2. **Bulk Check-In**: Allow manual selection of multiple attendees
+3. **Check-In History**: Track check-in timestamps
+4. **QR Code Expiry**: Add time-based validation to QR codes
+5. **Export**: Generate check-in reports
+6. **Notifications**: Send confirmation to attendees upon check-in
+
+## Testing
+
+### Manual Testing Checklist:
+- [ ] User can view their QR code on profile page
+- [ ] QR code scanner requests camera permission
+- [ ] Scanner successfully reads QR codes
+- [ ] Only organizers can access check-in page
+- [ ] Check-in updates attendee status
+- [ ] Duplicate check-ins are prevented
+- [ ] Error messages display correctly
+- [ ] Mobile camera works properly
+- [ ] Attendee list updates in real-time
+
+## Files Modified/Created
+
+### Frontend:
+- `src/components/user/UserQRCode.tsx` (new)
+- `src/components/user/index.ts` (new)
+- `src/components/event/QRCodeScanner.tsx` (new)
+- `src/pages/EventCheckInPage.tsx` (new)
+- `src/pages/UserProfilePage.tsx` (modified)
+- `src/components/event/EventDetailModal.tsx` (modified)
+- `src/App.tsx` (modified)
+- `package.json` (modified)
+
+### Backend:
+- `server/src/controllers/eventController.ts` (modified)
+- `server/src/services/eventService.ts` (modified)
+- `server/src/routes/eventRoutes.ts` (modified)
+
+## Deployment Notes
+
+1. Ensure camera permissions are properly configured in production
+2. HTTPS required for camera access in browsers
+3. Test on various mobile devices and browsers
+4. Consider rate limiting for check-in endpoint
+5. Monitor for QR code scanning performance issues
+
+## Support
+
+For issues or questions:
+- Check browser camera permissions
+- Ensure HTTPS is enabled
+- Verify user is registered for the event
+- Check that user is the event organizer
+- Review browser console for errors
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,11 @@
        "@tanstack/react-query": "^5.90.9",
        "date-fns": "^4.1.0",
        "exifr": "^7.1.3",
+        "html5-qrcode": "^2.3.8",
        "leaflet": "^1.9.4",
        "leaflet.heat": "^0.2.0",
        "leaflet.markercluster": "^1.5.3",
+        "qrcode.react": "^4.2.0",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
        "react-leaflet": "^5.0.0",
@@ -28,11 +30,11 @@
        "@types/leaflet": "^1.9.21",
        "@types/leaflet.heat": "^0.2.5",
        "@types/leaflet.markercluster": "^1.5.6",
+        "@types/qrcode.react": "^1.0.5",
        "@types/react": "^19.2.2",
        "@types/react-dom": "^19.2.2",
        "@vitejs/plugin-react": "^5.1.0",
        "autoprefixer": "^10.4.22",
-        "concurrently": "^9.2.1",
        "eslint": "^9.39.1",
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
@@ -3292,6 +3294,16 @@
        "@types/leaflet": "^1.9"
      }
    },
+    "node_modules/@types/qrcode.react": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode.react/-/qrcode.react-1.0.5.tgz",
+      "integrity": "sha512-BghPtnlwvrvq8QkGa1H25YnN+5OIgCKFuQruncGWLGJYOzeSKiix/4+B9BtfKF2wf5ja8yfyWYA3OXju995G8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react": {
      "version": "19.2.5",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.5.tgz",
@@ -3393,16 +3405,6 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3755,21 +3757,6 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
-    "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/clsx": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3823,47 +3810,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/concurrently": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
-      "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "4.1.2",
-        "rxjs": "7.8.2",
-        "shell-quote": "1.8.3",
-        "supports-color": "8.1.1",
-        "tree-kill": "1.2.2",
-        "yargs": "17.7.2"
-      },
-      "bin": {
-        "conc": "dist/bin/concurrently.js",
-        "concurrently": "dist/bin/concurrently.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
-      }
-    },
-    "node_modules/concurrently/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4245,13 +4191,6 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/enhanced-resolve": {
      "version": "5.18.3",
      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -4949,16 +4888,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
    "node_modules/get-intrinsic": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5225,6 +5154,12 @@
        "hermes-estree": "0.25.1"
      }
    },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
+    },
    "node_modules/idb": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -5483,16 +5418,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/is-generator-function": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -6625,6 +6550,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -6895,16 +6829,6 @@
        "regjsparser": "bin/parser"
      }
    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -6994,16 +6918,6 @@
        "fsevents": "~2.3.2"
      }
    },
-    "node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
    "node_modules/safe-array-concat": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -7184,19 +7098,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/shell-quote": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
-      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/side-channel": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -7353,21 +7254,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/string.prototype.matchall": {
      "version": "4.0.12",
      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -7470,19 +7356,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/strip-comments": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
@@ -7647,16 +7520,6 @@
        "punycode": "^2.1.0"
      }
    },
-    "node_modules/tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "tree-kill": "cli.js"
-      }
-    },
    "node_modules/tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -8553,24 +8416,6 @@
        "workbox-core": "7.3.0"
      }
    },
-    "node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -8578,16 +8423,6 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -8595,35 +8430,6 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -16,9 +16,11 @@
    "@tanstack/react-query": "^5.90.9",
    "date-fns": "^4.1.0",
    "exifr": "^7.1.3",
+    "html5-qrcode": "^2.3.8",
    "leaflet": "^1.9.4",
    "leaflet.heat": "^0.2.0",
    "leaflet.markercluster": "^1.5.3",
+    "qrcode.react": "^4.2.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-leaflet": "^5.0.0",
@@ -32,6 +34,7 @@
    "@types/leaflet": "^1.9.21",
    "@types/leaflet.heat": "^0.2.5",
    "@types/leaflet.markercluster": "^1.5.6",
+    "@types/qrcode.react": "^1.0.5",
    "@types/react": "^19.2.2",
    "@types/react-dom": "^19.2.2",
    "@vitejs/plugin-react": "^5.1.0",
--- a/server/src/controllers/eventController.ts
+++ b/server/src/controllers/eventController.ts
@@ -536,4 +536,73 @@ export const eventController = {
      });
    }
  },
+
+  // QR Code Check-in
+  async checkInAttendee(req: AuthRequest, res: Response) {
+    try {
+      const organizerClerkId = req.userId;
+      if (!organizerClerkId) {
+        return res.status(401).json({
+          code: 'UNAUTHORIZED',
+          message: 'User not authenticated',
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      const organizerId = await findOrCreateUser(organizerClerkId);
+      const { id } = req.params;
+      const { clerkUserId } = req.body;
+
+      if (!clerkUserId) {
+        return res.status(400).json({
+          code: 'VALIDATION_ERROR',
+          message: 'clerkUserId is required',
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Verify event exists and user is organizer
+      const event = await eventService.getEventById(id);
+      if (!event) {
+        return res.status(404).json({
+          code: 'EVENT_NOT_FOUND',
+          message: 'Event not found',
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      if (event.organizerId !== organizerId) {
+        return res.status(403).json({
+          code: 'FORBIDDEN',
+          message: 'Only the event organizer can check in attendees',
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Find or create the attendee user
+      const attendeeUserId = await findOrCreateUser(clerkUserId);
+
+      // Check in the attendee (will auto-register if not registered)
+      const result = await eventService.checkInAttendee(id, attendeeUserId);
+
+      res.json(result);
+    } catch (error: any) {
+      console.error('Error checking in attendee:', error);
+
+      if (error.message.includes('already checked in')) {
+        return res.status(409).json({
+          code: 'ALREADY_CHECKED_IN',
+          message: error.message,
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      res.status(500).json({
+        code: 'CHECKIN_ERROR',
+        message: 'Failed to check in attendee',
+        details: error.message,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  },
 };
--- a/server/src/routes/eventRoutes.ts
+++ b/server/src/routes/eventRoutes.ts
@@ -20,5 +20,6 @@ router.get('/:id/registration-status', requireAuth, eventController.getRegistrat
 router.post('/:id/complete', requireAuth, eventController.completeEvent);
 router.patch('/:id/attendees/:attendeeId', requireAuth, eventController.updateAttendeeStatus);
 router.post('/:id/attendees/bulk', requireAuth, eventController.bulkUpdateAttendees);
+router.post('/:id/checkin', requireAuth, eventController.checkInAttendee);

 export default router;
--- a/server/src/services/eventService.ts
+++ b/server/src/services/eventService.ts
@@ -392,6 +392,7 @@ export const eventService = {
        user: {
          select: {
            id: true,
+            clerkId: true,
            username: true,
            firstName: true,
            lastName: true,
@@ -491,4 +492,109 @@ export const eventService = {

    return updates;
  },
+
+  async checkInAttendee(eventId: string, userId: string) {
+    // Check if user is registered
+    let registration = await prisma.eventRegistration.findUnique({
+      where: {
+        userId_eventId: {
+          userId,
+          eventId,
+        },
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            firstName: true,
+            lastName: true,
+            avatarUrl: true,
+          },
+        },
+      },
+    });
+
+    // If not registered, register them now (walk-in)
+    if (!registration) {
+      registration = await prisma.eventRegistration.create({
+        data: {
+          userId,
+          eventId,
+          attended: true, // Check them in immediately
+        },
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              firstName: true,
+              lastName: true,
+              avatarUrl: true,
+            },
+          },
+        },
+      });
+
+      return {
+        success: true,
+        username: registration.user.username,
+        firstName: registration.user.firstName,
+        lastName: registration.user.lastName,
+        wasWalkIn: true, // Flag to indicate this was a walk-in registration
+        attendee: {
+          id: registration.id,
+          userId: registration.userId,
+          eventId: registration.eventId,
+          registeredAt: registration.registeredAt || new Date(),
+          attended: registration.attended || false,
+          user: registration.user,
+        },
+      };
+    }
+
+    if (registration.attended) {
+      throw new Error('User is already checked in');
+    }
+
+    // Update attendance for pre-registered user
+    const updated = await prisma.eventRegistration.update({
+      where: {
+        userId_eventId: {
+          userId,
+          eventId,
+        },
+      },
+      data: {
+        attended: true,
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            firstName: true,
+            lastName: true,
+            avatarUrl: true,
+          },
+        },
+      },
+    });
+
+    return {
+      success: true,
+      username: updated.user.username,
+      firstName: updated.user.firstName,
+      lastName: updated.user.lastName,
+      wasWalkIn: false,
+      attendee: {
+        id: updated.id,
+        userId: updated.userId,
+        eventId: updated.eventId,
+        registeredAt: updated.registeredAt || new Date(),
+        attended: updated.attended || false,
+        user: updated.user,
+      },
+    };
+  },
 };
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,8 @@ const ReportDetailDemo = lazy(() => import('./pages/ReportDetailDemo'));
 const WhyCleanPage = lazy(() => import('./pages/WhyCleanPage'));
 const UserProfilePage = lazy(() => import('./pages/UserProfilePage'));
 const EnvironmentalDataDemo = lazy(() => import('./pages/EnvironmentalDataDemo'));
+const EventCheckInPage = lazy(() => import('./pages/EventCheckInPage'));
+const PrintableQRCodePage = lazy(() => import('./pages/PrintableQRCodePage'));

 // Services
 import { apiClient } from './services/api';
@@ -152,6 +154,24 @@ function App() {
                    </ProtectedRoute>
                  }
                />
+                <Route
+                  path="/events/:eventId/checkin"
+                  element={
+                    <ProtectedRoute>
+                      <Layout>
+                        <EventCheckInPage />
+                      </Layout>
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/qr-code/print"
+                  element={
+                    <ProtectedRoute>
+                      <PrintableQRCodePage />
+                    </ProtectedRoute>
+                  }
+                />
                
                {/* Demo routes for testing */}
                <Route
--- a/src/components/event/EmailPromptModal.tsx
+++ b/src/components/event/EmailPromptModal.tsx
@@ -0,0 +1,57 @@
+interface EmailPromptModalProps {
+  onClose: () => void;
+  onAddEmail: () => void;
+  onContinue: () => void;
+}
+
+export function EmailPromptModal({ onClose, onAddEmail, onContinue }: EmailPromptModalProps) {
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        {/* Background overlay */}
+        <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onClick={onClose}></div>
+
+        {/* Modal panel */}
+        <div className="relative inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full z-10">
+          <div className="bg-white px-6 pt-6 pb-4">
+            {/* Icon */}
+            <div className="flex items-center justify-center w-12 h-12 mx-auto bg-amber-100 rounded-full mb-4">
+              <svg className="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+
+            {/* Content */}
+            <div className="text-center">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                Add an Email Address?
+              </h3>
+              <p className="text-sm text-gray-600 mb-4">
+                You don't have an email address registered. Adding one will allow you to receive notifications about event changes or cancellations.
+              </p>
+              <p className="text-xs text-gray-500">
+                You'll be directed to your profile page where you can manage your account settings.
+              </p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="bg-gray-50 px-6 py-4 space-y-2">
+            <button
+              onClick={onAddEmail}
+              className="w-full bg-blue-600 text-white py-2.5 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium"
+            >
+              Add Email Address
+            </button>
+            <button
+              onClick={onContinue}
+              className="w-full bg-white text-gray-700 py-2.5 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium"
+            >
+              Continue Without Email
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/event/EventDetailModal.tsx
+++ b/src/components/event/EventDetailModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { format } from 'date-fns';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -53,6 +54,7 @@ export function EventDetailModal({
  const mapRef = useRef<HTMLDivElement>(null);
  const mapInstanceRef = useRef<L.Map | null>(null);
  const [showCompletionForm, setShowCompletionForm] = useState(false);
+  const navigate = useNavigate();

  // Check if event date has passed
  const hasEventPassed = new Date(event.scheduledDate) < new Date();
@@ -300,23 +302,34 @@ export function EventDetailModal({
          {event.status === 'upcoming' && !showCompletionForm && (
            <div className="bg-gray-50 px-6 py-4 border-t border-gray-200 flex-shrink-0">
              {canComplete ? (
-                <div className="flex gap-3">
-                  <button
-                    onClick={() => setShowCompletionForm(!showCompletionForm)}
-                    disabled={isLoading}
-                    className="flex-1 bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
-                  >
-                    {showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
-                  </button>
-                  {onCancel && (
+                <div className="space-y-3">
+                  <div className="flex gap-3">
                    <button
-                      onClick={onCancel}
+                      onClick={() => setShowCompletionForm(!showCompletionForm)}
                      disabled={isLoading}
-                      className="px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                      className="flex-1 bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
                    >
-                      Cancel Event
+                      {showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
                    </button>
-                  )}
+                    {onCancel && (
+                      <button
+                        onClick={onCancel}
+                        disabled={isLoading}
+                        className="px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                      >
+                        Cancel Event
+                      </button>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => navigate(`/events/${event.id}/checkin`)}
+                    className="w-full bg-purple-600 text-white py-3 px-6 rounded-lg hover:bg-purple-700 transition-colors font-medium flex items-center justify-center"
+                  >
+                    <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
+                    </svg>
+                    QR Code Check-In
+                  </button>
                </div>
              ) : isOrganizer && !hasEventPassed ? (
                <div className="space-y-3">
@@ -334,6 +347,15 @@ export function EventDetailModal({
                      </span>
                    </div>
                  </div>
+                  <button
+                    onClick={() => navigate(`/events/${event.id}/checkin`)}
+                    className="w-full bg-purple-600 text-white py-3 px-6 rounded-lg hover:bg-purple-700 transition-colors font-medium flex items-center justify-center"
+                  >
+                    <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
+                    </svg>
+                    QR Code Check-In
+                  </button>
                  {onCancel && (
                    <button
                      onClick={onCancel}
--- a/src/components/event/QRCodeScanner.tsx
+++ b/src/components/event/QRCodeScanner.tsx
@@ -0,0 +1,373 @@
+import { useEffect, useRef, useState } from 'react';
+import { Html5Qrcode } from 'html5-qrcode';
+
+interface QRCodeScannerProps {
+  onScan: (userId: string) => void;
+  onError?: (error: string) => void;
+}
+
+export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
+  const [isScanning, setIsScanning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showManualInput, setShowManualInput] = useState(false);
+  const [manualInput, setManualInput] = useState('');
+  const [showTroubleshooting, setShowTroubleshooting] = useState(false);
+  const scannerRef = useRef<Html5Qrcode | null>(null);
+  const scannerIdRef = useRef('qr-reader');
+
+  // Detect if user is on iOS
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  useEffect(() => {
+    return () => {
+      // Cleanup on unmount
+      if (scannerRef.current) {
+        scannerRef.current.stop().catch(console.error);
+      }
+    };
+  }, []);
+
+  const startScanning = async () => {
+    try {
+      setError(null);
+      
+      // First, check if we can get camera devices (this will trigger permission prompt)
+      try {
+        const devices = await Html5Qrcode.getCameras();
+        if (!devices || devices.length === 0) {
+          throw new Error('No camera found on this device.');
+        }
+      } catch (permErr: any) {
+        // If we can't get cameras, it might be a permission issue
+        console.error('Camera access error:', permErr);
+      }
+
+      const scanner = new Html5Qrcode(scannerIdRef.current);
+      scannerRef.current = scanner;
+
+      await scanner.start(
+        { facingMode: 'environment' }, // Use back camera
+        {
+          fps: 10,
+          qrbox: { width: 250, height: 250 },
+        },
+        (decodedText) => {
+          try {
+            const data = JSON.parse(decodedText);
+            if (data.type === 'attendee-checkin' && data.userId) {
+              onScan(data.userId);
+            } else {
+              const errorMsg = 'Invalid QR code format';
+              setError(errorMsg);
+              onError?.(errorMsg);
+            }
+          } catch (err) {
+            const errorMsg = 'Failed to parse QR code';
+            setError(errorMsg);
+            onError?.(errorMsg);
+          }
+        },
+        () => {
+          // Ignore scanning errors (happens continuously while scanning)
+        }
+      );
+
+      setIsScanning(true);
+    } catch (err: any) {
+      let errorMsg = 'Failed to start camera';
+      
+      console.error('Scanner error:', err);
+      
+      if (err.name === 'NotAllowedError' || err.message?.includes('NotAllowedError')) {
+        errorMsg = 'Camera permission denied. Please click "Allow" when your browser asks for camera access.';
+      } else if (err.name === 'NotFoundError' || err.message?.includes('NotFoundError')) {
+        errorMsg = 'No camera found on this device.';
+      } else if (err.name === 'NotReadableError' || err.message?.includes('NotReadableError')) {
+        errorMsg = 'Camera is already in use by another application.';
+      } else if (err.name === 'OverconstrainedError' || err.message?.includes('OverconstrainedError')) {
+        errorMsg = 'Camera constraints not supported. Trying with default camera...';
+        // Try again without facingMode constraint
+        setTimeout(() => startScanningWithoutConstraints(), 1000);
+        return;
+      } else if (err.message?.includes('secure') || err.message?.includes('https')) {
+        errorMsg = 'Camera access requires HTTPS. Use manual input instead.';
+      } else if (err.message) {
+        errorMsg = `Camera error: ${err.message}`;
+      }
+      
+      setError(errorMsg);
+      onError?.(errorMsg);
+      setIsScanning(false);
+      setShowManualInput(true); // Show manual input as fallback
+    }
+  };
+
+  const startScanningWithoutConstraints = async () => {
+    try {
+      setError(null);
+      const scanner = new Html5Qrcode(scannerIdRef.current);
+      scannerRef.current = scanner;
+
+      // Try with any available camera
+      const devices = await Html5Qrcode.getCameras();
+      if (devices && devices.length > 0 && devices[0]) {
+        await scanner.start(
+          devices[0].id, // Use first available camera
+          {
+            fps: 10,
+            qrbox: { width: 250, height: 250 },
+          },
+          (decodedText) => {
+            try {
+              const data = JSON.parse(decodedText);
+              if (data.type === 'attendee-checkin' && data.userId) {
+                onScan(data.userId);
+              } else {
+                const errorMsg = 'Invalid QR code format';
+                setError(errorMsg);
+                onError?.(errorMsg);
+              }
+            } catch (err) {
+              const errorMsg = 'Failed to parse QR code';
+              setError(errorMsg);
+              onError?.(errorMsg);
+            }
+          },
+          () => {
+            // Ignore scanning errors
+          }
+        );
+        setIsScanning(true);
+      }
+    } catch (err: any) {
+      console.error('Fallback scanner error:', err);
+      setError('Unable to access camera. Please use manual check-in instead.');
+      setShowManualInput(true);
+    }
+  };
+
+  const stopScanning = async () => {
+    if (scannerRef.current) {
+      try {
+        await scannerRef.current.stop();
+        scannerRef.current = null;
+        setIsScanning(false);
+      } catch (err) {
+        console.error('Error stopping scanner:', err);
+      }
+    }
+  };
+
+  const handleManualSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!manualInput.trim()) return;
+
+    try {
+      const data = JSON.parse(manualInput);
+      if (data.type === 'attendee-checkin' && data.userId) {
+        onScan(data.userId);
+        setManualInput('');
+        setShowManualInput(false);
+      } else {
+        setError('Invalid QR code data format');
+      }
+    } catch (err) {
+      setError('Invalid JSON format. Please scan the QR code or paste valid data.');
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Info message before scanning */}
+      {!isScanning && !error && (
+        <div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg">
+          <div className="flex items-start">
+            <svg className="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+            </svg>
+            <div className="text-sm">
+              <p className="font-medium mb-1">Camera Permission Required</p>
+              <p>When you click "Start Camera Scan", your browser will ask for camera permission. Please click "Allow" to enable QR code scanning.</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div
+        id={scannerIdRef.current}
+        className="w-full rounded-lg overflow-hidden bg-black"
+        style={{ minHeight: isScanning ? '300px' : '0' }}
+      />
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+          <p className="font-medium">{error}</p>
+          {error.includes('HTTPS') && (
+            <p className="text-sm mt-2">
+              💡 Tip: Camera access requires a secure connection (HTTPS) in most browsers. Use manual input below as an alternative.
+            </p>
+          )}
+          {error.includes('permission') && (
+            <p className="text-sm mt-2">
+              💡 Tip: Check your browser's address bar for camera permission settings, or use manual input below.
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="flex gap-3">
+        {!isScanning ? (
+          <>
+            <button
+              onClick={startScanning}
+              className="flex-1 bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium"
+            >
+              Start Camera Scan
+            </button>
+            <button
+              onClick={() => setShowManualInput(!showManualInput)}
+              className="flex-1 bg-gray-600 text-white px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors font-medium"
+            >
+              {showManualInput ? 'Hide' : 'Manual Input'}
+            </button>
+          </>
+        ) : (
+          <button
+            onClick={stopScanning}
+            className="flex-1 bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium"
+          >
+            Stop Scanning
+          </button>
+        )}
+      </div>
+
+      {isScanning && (
+        <p className="text-sm text-gray-600 text-center">
+          Position the QR code within the frame to scan
+        </p>
+      )}
+
+      {/* Manual Input Form */}
+      {showManualInput && !isScanning && (
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+          <h3 className="text-sm font-semibold text-gray-900 mb-2">
+            Manual Check-In
+          </h3>
+          <p className="text-xs text-gray-600 mb-3">
+            Paste the QR code data or enter the user's Clerk ID directly
+          </p>
+          <form onSubmit={handleManualSubmit} className="space-y-3">
+            <textarea
+              value={manualInput}
+              onChange={(e) => setManualInput(e.target.value)}
+              placeholder='{"userId":"user_xxx","type":"attendee-checkin"}'
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
+              rows={3}
+            />
+            <button
+              type="submit"
+              className="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors font-medium"
+            >
+              Check In User
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Troubleshooting Button */}
+      <button
+        onClick={() => setShowTroubleshooting(!showTroubleshooting)}
+        className="w-full text-sm text-gray-600 hover:text-gray-900 underline"
+      >
+        {showTroubleshooting ? '▼ Hide' : '▶'} Camera not working? Troubleshooting guide
+      </button>
+
+      {/* Troubleshooting Guide */}
+      {showTroubleshooting && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-4">
+          <div>
+            <h3 className="font-semibold text-gray-900 mb-2 flex items-center">
+              <svg className="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              Camera Troubleshooting
+            </h3>
+          </div>
+
+          {/* iOS/iPhone Instructions */}
+          {isIOS && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                📱 iPhone/iPad Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Open your iPhone <strong>Settings</strong> app</li>
+                <li>Scroll down and tap <strong>Safari</strong> (or <strong>Chrome</strong> if using Chrome)</li>
+                <li>Tap <strong>Camera</strong></li>
+                <li>Select <strong>"Ask"</strong> or <strong>"Allow"</strong></li>
+                <li>Close Settings and return to this page</li>
+                <li>Refresh the page and try scanning again</li>
+              </ol>
+              <div className="mt-3 p-2 bg-blue-50 rounded border border-blue-200">
+                <p className="text-xs text-blue-800">
+                  <strong>Note:</strong> If you previously denied camera access, you must change it in Settings. The browser won't ask again until you do.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Safari-specific */}
+          {isSafari && !isIOS && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                🧭 Safari Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Click <strong>Safari</strong> in the menu bar</li>
+                <li>Select <strong>Settings for This Website</strong></li>
+                <li>Find <strong>Camera</strong> and set to <strong>"Allow"</strong></li>
+                <li>Refresh the page and try again</li>
+              </ol>
+            </div>
+          )}
+
+          {/* Chrome/General */}
+          {!isSafari && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                🌐 Chrome/Browser Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Look for a camera icon in your browser's address bar</li>
+                <li>Click it and select <strong>"Allow"</strong></li>
+                <li>Or click the lock/info icon next to the URL</li>
+                <li>Find <strong>Camera</strong> permissions and set to <strong>"Allow"</strong></li>
+                <li>Refresh the page and try scanning again</li>
+              </ol>
+            </div>
+          )}
+
+          {/* General Tips */}
+          <div className="bg-white rounded-lg p-3 border border-amber-300">
+            <h4 className="font-semibold text-gray-900 mb-2">💡 Other Common Issues</h4>
+            <ul className="text-sm text-gray-700 space-y-2 list-disc list-inside">
+              <li><strong>Camera in use:</strong> Close other apps/tabs using your camera</li>
+              <li><strong>No camera found:</strong> Make sure your device has a working camera</li>
+              <li><strong>HTTPS required:</strong> Camera access only works on secure (https://) sites</li>
+              <li><strong>Still not working?</strong> Use the "Manual Input" option or click "Check In" buttons in the attendee list below</li>
+            </ul>
+          </div>
+
+          {/* Quick Alternative */}
+          <div className="bg-green-50 rounded-lg p-3 border border-green-300">
+            <h4 className="font-semibold text-green-900 mb-2">✅ Easy Alternative</h4>
+            <p className="text-sm text-green-800">
+              Skip the camera entirely! Just scroll down to the attendee list and click the <strong>"Check In"</strong> button next to each person's name.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/event/index.ts
+++ b/src/components/event/index.ts
@@ -6,4 +6,5 @@ export { EventDetailModal } from './EventDetailModal';
 export { EventCompletionForm } from './EventCompletionForm';
 export { AttendeeManagement } from './AttendeeManagement';
 export { CompletedEventDetails } from './CompletedEventDetails';
+export { EmailPromptModal } from './EmailPromptModal';
 export type { EventFilterState } from './EventFilters';
--- a/src/components/user/UserQRCode.tsx
+++ b/src/components/user/UserQRCode.tsx
@@ -0,0 +1,58 @@
+import { QRCodeSVG } from 'qrcode.react';
+import { useUser } from '@clerk/clerk-react';
+import { useNavigate } from 'react-router-dom';
+
+export function UserQRCode() {
+  const { user } = useUser();
+  const navigate = useNavigate();
+
+  if (!user) return null;
+
+  // Generate QR code data with user ID
+  const qrData = JSON.stringify({
+    userId: user.id,
+    type: 'attendee-checkin',
+    timestamp: Date.now(),
+  });
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">
+        Your Check-in QR Code
+      </h3>
+      <p className="text-sm text-gray-600 mb-4">
+        Show this QR code to event organizers to check in at events
+      </p>
+      <div className="flex justify-center p-4 bg-gray-50 rounded-lg">
+        <QRCodeSVG
+          value={qrData}
+          size={200}
+          level="H"
+          includeMargin={true}
+        />
+      </div>
+      <p className="text-xs text-gray-500 mt-4 text-center">
+        {user.username || user.firstName || 'User'}
+      </p>
+      <button
+        onClick={() => navigate('/qr-code/print')}
+        className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center"
+      >
+        <svg
+          className="w-5 h-5 mr-2"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+          />
+        </svg>
+        Print QR Code
+      </button>
+    </div>
+  );
+}
--- a/src/components/user/index.ts
+++ b/src/components/user/index.ts
@@ -0,0 +1 @@
+export { UserQRCode } from './UserQRCode';
--- a/src/pages/EventCheckInPage.tsx
+++ b/src/pages/EventCheckInPage.tsx
@@ -0,0 +1,315 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useUser } from '@clerk/clerk-react';
+import { QRCodeScanner } from '@/components/event/QRCodeScanner';
+import { apiClient } from '@/services/api';
+import { CleanupEvent, EventAttendee } from '@/types';
+
+export function EventCheckInPage() {
+  const { eventId } = useParams<{ eventId: string }>();
+  const { user } = useUser();
+  const [event, setEvent] = useState<CleanupEvent | null>(null);
+  const [attendees, setAttendees] = useState<EventAttendee[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadEventData();
+  }, [eventId]);
+
+  const loadEventData = async () => {
+    if (!eventId) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Load event details
+      const eventResponse = await apiClient.get<CleanupEvent>(`/events/${eventId}`);
+      setEvent(eventResponse);
+
+      // Check if user is the organizer
+      if (eventResponse.organizerClerkId !== user?.id) {
+        setError('Only the event organizer can access check-in');
+        return;
+      }
+
+      // Load attendees
+      const attendeesResponse = await apiClient.get<EventAttendee[]>(
+        `/events/${eventId}/attendees`
+      );
+      setAttendees(attendeesResponse);
+
+
+    } catch (err: any) {
+      console.error('Error loading event data:', err);
+      setError(err.message || 'Failed to load event data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleScan = async (clerkUserId: string) => {
+    if (!eventId) return;
+
+    try {
+      // Send the Clerk ID to backend and let it handle the lookup
+      const response = await apiClient.post<{ 
+        success: boolean; 
+        username?: string; 
+        firstName?: string; 
+        lastName?: string;
+        wasWalkIn?: boolean;
+      }>(
+        `/events/${eventId}/checkin`,
+        { clerkUserId }
+      );
+
+      const displayName = response.firstName && response.lastName 
+        ? `${response.firstName} ${response.lastName}`
+        : response.username || 'user';
+      
+      if (response.wasWalkIn) {
+        setSuccessMessage(`✨ ${displayName} registered and checked in as walk-in!`);
+      } else {
+        setSuccessMessage(`✓ Successfully checked in ${displayName}`);
+      }
+
+      // Reload attendees to get updated status
+      setTimeout(() => {
+        loadEventData();
+        setSuccessMessage(null);
+      }, 2000);
+    } catch (err: any) {
+      console.error('Error checking in user:', err);
+      setError(err.message || 'Failed to check in user');
+      setTimeout(() => setError(null), 3000);
+    }
+  };
+
+  const handleScanError = (errorMsg: string) => {
+    setError(errorMsg);
+    setTimeout(() => setError(null), 3000);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading event...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !event) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow-md p-6 max-w-md w-full">
+          <div className="text-red-600 mb-4">
+            <svg
+              className="w-12 h-12 mx-auto"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900 text-center mb-2">
+            Access Denied
+          </h2>
+          <p className="text-gray-600 text-center mb-4">{error}</p>
+          <Link
+            to="/events"
+            className="block w-full bg-blue-600 text-white text-center px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Back to Events
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8 px-4">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="mb-6">
+          <Link
+            to={`/events/${eventId}`}
+            className="text-blue-600 hover:text-blue-700 mb-4 inline-flex items-center"
+          >
+            <svg
+              className="w-5 h-5 mr-1"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            Back to Event
+          </Link>
+          <h1 className="text-3xl font-bold text-gray-900">Event Check-In</h1>
+          {event && (
+            <p className="text-gray-600 mt-2">{event.title}</p>
+          )}
+        </div>
+
+        {/* Success Message */}
+        {successMessage && (
+          <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">
+            <div className="flex items-center">
+              <svg
+                className="w-5 h-5 mr-2"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {successMessage}
+            </div>
+          </div>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
+            {error}
+          </div>
+        )}
+
+        {/* QR Scanner */}
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Scan Attendee QR Code
+          </h2>
+          <QRCodeScanner onScan={handleScan} onError={handleScanError} />
+        </div>
+
+        {/* Attendee List */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Registered Attendees ({attendees.length})
+          </h2>
+          {attendees.length === 0 ? (
+            <p className="text-gray-500 text-center py-8">
+              No attendees registered yet
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {attendees.map((attendee) => (
+                <div
+                  key={attendee.id}
+                  className={`flex items-center justify-between p-3 rounded-lg border ${
+                    attendee.attended
+                      ? 'bg-green-50 border-green-200'
+                      : 'bg-gray-50 border-gray-200'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    {attendee.user.avatarUrl ? (
+                      <img
+                        src={attendee.user.avatarUrl}
+                        alt={attendee.user.username}
+                        className="w-10 h-10 rounded-full"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
+                        {attendee.user.username.charAt(0).toUpperCase()}
+                      </div>
+                    )}
+                    <div>
+                      <p className="font-medium text-gray-900">
+                        {attendee.user.firstName && attendee.user.lastName
+                          ? `${attendee.user.firstName} ${attendee.user.lastName}`
+                          : attendee.user.username}
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        @{attendee.user.username}
+                      </p>
+                    </div>
+                  </div>
+                  {attendee.attended ? (
+                    <div className="flex items-center text-green-600">
+                      <svg
+                        className="w-6 h-6"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span className="ml-1 text-sm font-medium">Checked In</span>
+                    </div>
+                  ) : (
+                    <button
+                      onClick={async () => {
+                        try {
+                          const response = await apiClient.post<{ 
+                            success: boolean; 
+                            username?: string; 
+                            firstName?: string; 
+                            lastName?: string;
+                            wasWalkIn?: boolean;
+                          }>(
+                            `/events/${eventId}/checkin`,
+                            { clerkUserId: attendee.user.clerkId }
+                          );
+
+                          const displayName = response.firstName && response.lastName 
+                            ? `${response.firstName} ${response.lastName}`
+                            : response.username || attendee.user.username;
+                          
+                          if (response.wasWalkIn) {
+                            setSuccessMessage(`✨ ${displayName} registered and checked in as walk-in!`);
+                          } else {
+                            setSuccessMessage(`✓ Successfully checked in ${displayName}`);
+                          }
+                          
+                          // Reload attendees to get updated status
+                          setTimeout(() => {
+                            loadEventData();
+                            setSuccessMessage(null);
+                          }, 2000);
+                        } catch (err: any) {
+                          console.error('Error checking in user:', err);
+                          setError(err.message || 'Failed to check in user');
+                          setTimeout(() => setError(null), 3000);
+                        }
+                      }}
+                      className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+                    >
+                      Check In
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EventCheckInPage;
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -1,12 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useUser } from '@clerk/clerk-react';
-import { EventForm, EventList, EventFilters, EventDetailModal } from '@/components/event';
+import { useNavigate } from 'react-router-dom';
+import { EventForm, EventList, EventFilters, EventDetailModal, EmailPromptModal } from '@/components/event';
 import type { EventFilterState } from '@/components/event';
 import { eventService } from '@/services/eventService';
 import type { CleanupEvent } from '@/types';

 export function EventsPage() {
  const { isSignedIn, user } = useUser();
+  const navigate = useNavigate();
  const [events, setEvents] = useState<CleanupEvent[]>([]);
  const [filteredEvents, setFilteredEvents] = useState<CleanupEvent[]>([]);
  const [filters, setFilters] = useState<EventFilterState>({
@@ -19,6 +21,8 @@ export function EventsPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [showEmailPrompt, setShowEmailPrompt] = useState(false);
+  const [pendingEventId, setPendingEventId] = useState<string | null>(null);

  // Load events
  useEffect(() => {
@@ -148,6 +152,18 @@ export function EventsPage() {
      return;
    }

+    // Check if user has an email address
+    const hasEmail = user?.primaryEmailAddress?.emailAddress;
+    if (!hasEmail) {
+      setPendingEventId(eventId);
+      setShowEmailPrompt(true);
+      return;
+    }
+
+    await performRegistration(eventId);
+  };
+
+  const performRegistration = async (eventId: string) => {
    try {
      setIsSubmitting(true);
      setError(null);
@@ -162,6 +178,22 @@ export function EventsPage() {
    }
  };

+  const handleAddEmail = () => {
+    setShowEmailPrompt(false);
+    // Navigate to user profile where they can manage their Clerk account
+    if (user?.id) {
+      navigate(`/profile/${user.id}`);
+    }
+  };
+
+  const handleContinueWithoutEmail = async () => {
+    setShowEmailPrompt(false);
+    if (pendingEventId) {
+      await performRegistration(pendingEventId);
+      setPendingEventId(null);
+    }
+  };
+
  const handleUnregister = async () => {
    if (!selectedEvent) return;

@@ -323,6 +355,18 @@ export function EventsPage() {
          isLoading={isSubmitting}
        />
      )}
+
+      {/* Email Prompt Modal */}
+      {showEmailPrompt && (
+        <EmailPromptModal
+          onClose={() => {
+            setShowEmailPrompt(false);
+            setPendingEventId(null);
+          }}
+          onAddEmail={handleAddEmail}
+          onContinue={handleContinueWithoutEmail}
+        />
+      )}
    </div>
  );
 }
--- a/src/pages/PrintableQRCodePage.tsx
+++ b/src/pages/PrintableQRCodePage.tsx
@@ -0,0 +1,201 @@
+import { useEffect } from 'react';
+import { useUser } from '@clerk/clerk-react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useNavigate } from 'react-router-dom';
+
+export function PrintableQRCodePage() {
+  const { user, isLoaded } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Add print-specific styles
+    const style = document.createElement('style');
+    style.textContent = `
+      @media print {
+        body * {
+          visibility: hidden;
+        }
+        #printable-qr-code, #printable-qr-code * {
+          visibility: visible;
+        }
+        #printable-qr-code {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+        }
+        .no-print {
+          display: none !important;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  if (!isLoaded) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow-md p-6 max-w-md w-full text-center">
+          <p className="text-gray-600 mb-4">Please sign in to view your QR code</p>
+          <button
+            onClick={() => navigate('/')}
+            className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Go Home
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const qrData = JSON.stringify({
+    userId: user.id,
+    type: 'attendee-checkin',
+    timestamp: Date.now(),
+  });
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8 px-4">
+      {/* Action Buttons - Hidden when printing */}
+      <div className="max-w-4xl mx-auto mb-6 no-print">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => navigate(-1)}
+            className="text-blue-600 hover:text-blue-700 inline-flex items-center"
+          >
+            <svg
+              className="w-5 h-5 mr-1"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            Back
+          </button>
+          <button
+            onClick={handlePrint}
+            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium inline-flex items-center"
+          >
+            <svg
+              className="w-5 h-5 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+              />
+            </svg>
+            Print QR Code
+          </button>
+        </div>
+      </div>
+
+      {/* Printable Content */}
+      <div id="printable-qr-code" className="max-w-3xl mx-auto">
+        <div className="bg-white rounded-lg shadow-md p-8">
+          {/* Header */}
+          <div className="text-center mb-4">
+            <h1 className="text-2xl font-bold text-gray-900 mb-1">
+              Event Check-In QR Code
+            </h1>
+            <p className="text-sm text-gray-600">
+              Litter Scouts - Beach Cleanup Events
+            </p>
+          </div>
+
+          {/* QR Code */}
+          <div className="flex justify-center mb-4">
+            <div className="p-4 bg-white border-4 border-gray-200 rounded-lg">
+              <QRCodeSVG
+                value={qrData}
+                size={240}
+                level="H"
+                includeMargin={true}
+              />
+            </div>
+          </div>
+
+          {/* User Info */}
+          <div className="text-center mb-4">
+            <div className="inline-flex items-center justify-center mb-2">
+              {user.imageUrl && (
+                <img
+                  src={user.imageUrl}
+                  alt={user.fullName || user.username || 'User'}
+                  className="w-12 h-12 rounded-full border-2 border-gray-300"
+                />
+              )}
+            </div>
+            <h2 className="text-xl font-semibold text-gray-900 mb-0.5">
+              {user.fullName || user.username || 'User'}
+            </h2>
+            <p className="text-sm text-gray-600">@{user.username}</p>
+          </div>
+
+          {/* Instructions */}
+          <div className="border-t border-gray-200 pt-4">
+            <h3 className="text-base font-semibold text-gray-900 mb-2 text-center">
+              How to Use
+            </h3>
+            <div className="space-y-1.5 text-sm text-gray-700">
+              <div className="flex items-start">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
+                  1
+                </span>
+                <p>Bring this QR code to any Litter Scouts cleanup event</p>
+              </div>
+              <div className="flex items-start">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
+                  2
+                </span>
+                <p>Show it to the event organizer for quick check-in</p>
+              </div>
+              <div className="flex items-start">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
+                  3
+                </span>
+                <p>Your attendance will be automatically recorded</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-4 pt-4 border-t border-gray-200 text-center text-xs text-gray-500">
+            <p>This QR code is unique to your account - Keep it safe and don't share with others</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PrintableQRCodePage;
--- a/src/pages/UserProfilePage.tsx
+++ b/src/pages/UserProfilePage.tsx
@@ -6,6 +6,7 @@ import { userService, type UserProfile, type UserActivity } from '@/services/use
 import type { Report, CleanupEvent } from '@/types';
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import { NotificationSettings, type NotificationPreferences, BadgeDisplay } from '@/components/auth';
+import { UserQRCode } from '@/components/user/UserQRCode';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';

@@ -97,7 +98,9 @@ export function UserProfilePage() {
        areasOfInterest: profileData.areasOfInterest || [],
      });
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load profile');
+      console.error('Error loading profile data:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
+      setError(errorMessage);
    } finally {
      setLoading(false);
    }
@@ -420,6 +423,11 @@ export function UserProfilePage() {
          <div className="p-6">
            {activeTab === 'overview' && (
              <div className="space-y-6">
+                {/* QR Code for own profile */}
+                {isOwnProfile && (
+                  <UserQRCode />
+                )}
+
                <div>
                  <h2 className="text-xl font-semibold mb-4">Contribution Map</h2>
                  {reports.length > 0 && reports[0] ? (
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -9,3 +9,4 @@ export { ReportDetailDemo } from './ReportDetailDemo';
 export { WhyCleanPage } from './WhyCleanPage';
 export { UserProfilePage } from './UserProfilePage';
 export { EnvironmentalDataDemo } from './EnvironmentalDataDemo';
+export { PrintableQRCodePage } from './PrintableQRCodePage';
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -78,6 +78,7 @@ export interface EventAttendee {
  contributionNote?: string;
  user: {
    id: string;
+    clerkId: string;
    username: string;
    firstName?: string;
    lastName?: string;
Author	SHA1	Message	Date
Paul Bailey	c23b93bef2	Reduce printable QR code page size to fit on single page	2025-11-20 19:37:50 +00:00
Paul Bailey	2dcd1ce78d	Add printable QR code feature for event check-in	2025-11-20 19:30:59 +00:00
Paul Bailey	4baa2892b9	Add email prompt when users without email register for events	2025-11-20 19:24:27 +00:00
Paul Bailey	57b7cd2308	feat: auto-register walk-in attendees during check-in - Automatically register users who scan QR code but aren't pre-registered - Mark walk-in registrations with wasWalkIn flag - Show different success messages for walk-ins vs pre-registered attendees - Check in walk-ins immediately upon registration - Remove 'not registered' error - now handles walk-ins gracefully - Update both QR scan and manual check-in to support walk-ins	2025-11-20 19:10:29 +00:00
Paul Bailey	2102f053da	feat: add comprehensive camera troubleshooting guide - Add collapsible troubleshooting section with device-specific instructions - Detect iOS/iPhone and show specific Settings app instructions - Detect Safari and show Safari-specific permission steps - Show Chrome/general browser instructions for other browsers - Include common issues and solutions - Highlight manual check-in alternative - Auto-detect user's device/browser for relevant instructions	2025-11-20 19:04:28 +00:00
Paul Bailey	cc01e9adc8	feat: improve camera permission handling for QR scanner - Add pre-check for camera devices to trigger permission prompt - Add helpful info message explaining camera permission requirement - Implement fallback to try default camera if facingMode constraint fails - Better error messages for different camera access scenarios - Log errors to console for debugging - Handle NotAllowedError, NotFoundError, NotReadableError, OverconstrainedError	2025-11-20 19:02:33 +00:00
Paul Bailey	31af9bd083	fix: improve QR code check-in with manual fallback and better error handling - Add manual check-in buttons for each attendee in the list - Add manual QR code data input as fallback for camera issues - Include clerkId in EventAttendee user object for proper check-in - Improve camera error messages with helpful tips - Fix TypeScript warnings - Better UX for organizers with multiple check-in options	2025-11-20 19:00:09 +00:00
Paul Bailey	e793a8e3ea	feat: implement QR code check-in system for event attendees - Add UserQRCode component to display unique QR code on user profile - Add QRCodeScanner component for mobile camera-based scanning - Create EventCheckInPage for organizers to scan attendee QR codes - Add backend endpoint POST /api/events/:id/checkin for check-in - Add check-in button to EventDetailModal for organizers - Install qrcode.react and html5-qrcode dependencies - Implement real-time attendee list updates - Add organizer permission validation - Prevent duplicate check-ins - Mobile-optimized with back camera support	2025-11-20 18:52:04 +00:00