Reduce printable QR code page size to fit on single page

- 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

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

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

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

package-lock.json

@@ -1,20 +1,22 @@
 {
-  "name": "ocean-cleanup",
+  "name": "litter-scouts",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ocean-cleanup",
+      "name": "litter-scouts",
       "version": "0.0.0",
       "dependencies": {
         "@clerk/clerk-react": "^5.55.0",
         "@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,6 +30,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",
@@ -3291,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",
@@ -5141,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",
@@ -6531,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",

package.json

@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\" --names \"frontend,backend\" --prefix-colors \"cyan,magenta\"",
+    "dev:frontend": "vite",
+    "dev:backend": "cd server && npm run dev",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
@@ -14,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",
@@ -30,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",

server/prisma/migrations/20251118193723_add_equipment_fields/migration.sql

@@ -0,0 +1,3 @@
+-- Add equipment fields to events table
+ALTER TABLE `events` ADD COLUMN `equipment_provided` BOOLEAN DEFAULT false AFTER `photos`;
+ALTER TABLE `events` ADD COLUMN `required_items` JSON AFTER `equipment_provided`;

server/prisma/schema.prisma

@@ -83,6 +83,8 @@ model Event {
   participantCount Int?                 @default(0) @map("participant_count")
   litterCollected  Decimal?             @map("litter_collected") @db.Decimal(10, 2)
   photos           Json?
+  equipmentProvided Boolean?            @default(false) @map("equipment_provided")
+  requiredItems    Json?                @map("required_items")
   createdAt        DateTime?            @default(now()) @map("created_at") @db.Timestamp(0)
   updatedAt        DateTime?            @default(now()) @updatedAt @map("updated_at") @db.Timestamp(0)
   registrations    EventRegistration[]

server/src/controllers/eventController.ts

@@ -109,7 +109,7 @@ export const eventController = {
       // Find or create user in database
       const userId = await findOrCreateUser(clerkId);
 
-      const { title, description, latitude, longitude, locationName, scheduledDate, duration } = req.body;
+      const { title, description, latitude, longitude, locationName, scheduledDate, duration, equipmentProvided, requiredItems } = req.body;
 
       // Validation
       if (!title || !description || !latitude || !longitude || !locationName || !scheduledDate || !duration) {
@@ -129,6 +129,8 @@ export const eventController = {
         locationName,
         scheduledDate: new Date(scheduledDate),
         duration: parseInt(duration),
+        equipmentProvided: equipmentProvided !== undefined ? Boolean(equipmentProvided) : false,
+        requiredItems: Array.isArray(requiredItems) ? requiredItems : [],
       };
 
       const event = await eventService.createEvent(eventData);
@@ -534,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(),
+      });
+    }
+  },
 };

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;

server/src/services/eventService.ts

@@ -21,6 +21,8 @@ interface CreateEventData {
   locationName: string;
   scheduledDate: Date;
   duration: number;
+  equipmentProvided?: boolean;
+  requiredItems?: string[];
 }
 
 interface UpdateEventData {
@@ -31,6 +33,8 @@ interface UpdateEventData {
   status?: 'upcoming' | 'completed' | 'cancelled';
   litterCollected?: number;
   photos?: string[];
+  equipmentProvided?: boolean;
+  requiredItems?: string[];
 }
 
 export const eventService = {
@@ -93,6 +97,8 @@ export const eventService = {
       participantCount: event._count.registrations,
       litterCollected: event.litterCollected ? parseFloat(event.litterCollected.toString()) : undefined,
       photos: event.photos ? (Array.isArray(event.photos) ? event.photos : []) : undefined,
+      equipmentProvided: (event as any).equipmentProvided || false,
+      requiredItems: (event as any).requiredItems ? (Array.isArray((event as any).requiredItems) ? (event as any).requiredItems : []) : [],
       createdAt: event.createdAt,
       updatedAt: event.updatedAt,
     }));
@@ -137,6 +143,8 @@ export const eventService = {
       participantCount: event._count.registrations,
       litterCollected: event.litterCollected ? parseFloat(event.litterCollected.toString()) : undefined,
       photos: event.photos ? (Array.isArray(event.photos) ? event.photos : []) : undefined,
+      equipmentProvided: (event as any).equipmentProvided || false,
+      requiredItems: (event as any).requiredItems ? (Array.isArray((event as any).requiredItems) ? (event as any).requiredItems : []) : [],
       createdAt: event.createdAt,
       updatedAt: event.updatedAt,
     };
@@ -145,16 +153,18 @@ export const eventService = {
   async createEvent(data: CreateEventData) {
     // Create point geometry for spatial queries
     const locationPoint = `POINT(${data.longitude} ${data.latitude})`;
+    const equipmentProvided = data.equipmentProvided !== undefined ? data.equipmentProvided : false;
+    const requiredItems = data.requiredItems && data.requiredItems.length > 0 ? JSON.stringify(data.requiredItems) : null;
 
     const event = await prisma.$executeRaw`
       INSERT INTO events (
         id, organizer_id, title, description, location, latitude, longitude,
-        location_name, scheduled_date, duration, status, participant_count
+        location_name, scheduled_date, duration, status, participant_count, equipment_provided, required_items
       ) VALUES (
         UUID(), ${data.organizerId}, ${data.title}, ${data.description},
         ST_GeomFromText(${locationPoint}, 4326),
         ${data.latitude}, ${data.longitude}, ${data.locationName},
-        ${data.scheduledDate}, ${data.duration}, 'upcoming', 0
+        ${data.scheduledDate}, ${data.duration}, 'upcoming', 0, ${equipmentProvided}, ${requiredItems}
       )
     `;
 
@@ -195,6 +205,8 @@ export const eventService = {
       participantCount: createdEvent._count.registrations,
       litterCollected: createdEvent.litterCollected ? parseFloat(createdEvent.litterCollected.toString()) : undefined,
       photos: createdEvent.photos ? (Array.isArray(createdEvent.photos) ? createdEvent.photos : []) : undefined,
+      equipmentProvided: (createdEvent as any).equipmentProvided || false,
+      requiredItems: (createdEvent as any).requiredItems ? (Array.isArray((createdEvent as any).requiredItems) ? (createdEvent as any).requiredItems : []) : [],
       createdAt: createdEvent.createdAt,
       updatedAt: createdEvent.updatedAt,
     };
@@ -380,6 +392,7 @@ export const eventService = {
         user: {
           select: {
             id: true,
+            clerkId: true,
             username: true,
             firstName: true,
             lastName: true,
@@ -479,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,
+      },
+    };
+  },
 };

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

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>
+  );
+}

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();
@@ -186,6 +188,54 @@ export function EventDetailModal({
                       </div>
                     </div>
 
+                    {/* Equipment Information */}
+                    <div className="flex items-start">
+                      <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+                        />
+                      </svg>
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900">Equipment</p>
+                        {event.equipmentProvided ? (
+                          <div className="mt-1">
+                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                              ✓ Equipment Provided
+                            </span>
+                            <p className="text-sm text-gray-600 mt-2">
+                              All necessary cleanup equipment will be provided by the organizer.
+                            </p>
+                          </div>
+                        ) : (
+                          <div className="mt-1">
+                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
+                              Bring Your Own
+                            </span>
+                            {event.requiredItems && event.requiredItems.length > 0 ? (
+                              <div className="mt-2">
+                                <p className="text-sm text-gray-600 mb-2">Please bring the following items:</p>
+                                <ul className="space-y-1">
+                                  {event.requiredItems.map((item, index) => (
+                                    <li key={index} className="text-sm text-gray-700 flex items-center">
+                                      <span className="text-blue-600 mr-2">•</span>
+                                      {item}
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            ) : (
+                              <p className="text-sm text-gray-600 mt-2">
+                                Participants should bring their own cleanup equipment.
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
                     <div className="flex items-start">
                       <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path
@@ -252,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">
+                <div className="space-y-3">
-                  <button
+                  <div className="flex gap-3">
-                    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 && (
                     <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">
@@ -286,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}

src/components/event/EventForm.tsx

@@ -25,6 +25,8 @@ interface EventFormData {
   scheduledDate: string;
   scheduledTime: string;
   duration: number;
+  equipmentProvided: boolean;
+  requiredItems: string[];
 }
 
 interface EventFormProps {
@@ -44,8 +46,12 @@ export function EventForm({ onSubmit, onCancel, initialData, isSubmitting = fals
     scheduledDate: initialData?.scheduledDate || '',
     scheduledTime: initialData?.scheduledTime || '',
     duration: initialData?.duration || 120,
+    equipmentProvided: initialData?.equipmentProvided || false,
+    requiredItems: initialData?.requiredItems || [],
   });
 
+  const [newItem, setNewItem] = useState('');
+
   const [selectedLocation, setSelectedLocation] = useState<Coordinates | null>(
     initialData?.latitude && initialData?.longitude
       ? { latitude: initialData.latitude, longitude: initialData.longitude }
@@ -328,6 +334,130 @@ export function EventForm({ onSubmit, onCancel, initialData, isSubmitting = fals
         {errors.duration && <p className="mt-1 text-sm text-red-600">{errors.duration}</p>}
       </div>
 
+      {/* Equipment Section */}
+      <div className="border border-gray-200 rounded-lg p-4 bg-gray-50">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Equipment</h3>
+        
+        {/* Equipment Provided Toggle */}
+        <div className="mb-4">
+          <label className="flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              checked={formData.equipmentProvided}
+              onChange={(e) => {
+                setFormData(prev => ({ ...prev, equipmentProvided: e.target.checked }));
+                // Clear required items if equipment is provided
+                if (e.target.checked) {
+                  setFormData(prev => ({ ...prev, requiredItems: [] }));
+                }
+              }}
+              className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="ml-3 text-sm font-medium text-gray-700">
+              Equipment will be provided by organizer
+            </span>
+          </label>
+          <p className="mt-1 ml-8 text-sm text-gray-500">
+            Check this if you'll supply all necessary cleanup equipment
+          </p>
+        </div>
+
+        {/* Required Items List (only shown if equipment not provided) */}
+        {!formData.equipmentProvided && (
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Items Participants Need to Bring
+            </label>
+            <p className="text-sm text-gray-500 mb-3">
+              Add items that participants should bring (e.g., gloves, litter picker, bags, coat)
+            </p>
+            
+            {/* Add Item Input */}
+            <div className="flex gap-2 mb-3">
+              <input
+                type="text"
+                value={newItem}
+                onChange={(e) => setNewItem(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (newItem.trim() && !formData.requiredItems.includes(newItem.trim())) {
+                      setFormData(prev => ({
+                        ...prev,
+                        requiredItems: [...prev.requiredItems, newItem.trim()]
+                      }));
+                      setNewItem('');
+                    }
+                  }
+                }}
+                placeholder="e.g., Gloves, Litter picker, Bags"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  if (newItem.trim() && !formData.requiredItems.includes(newItem.trim())) {
+                    setFormData(prev => ({
+                      ...prev,
+                      requiredItems: [...prev.requiredItems, newItem.trim()]
+                    }));
+                    setNewItem('');
+                  }
+                }}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+              >
+                Add
+              </button>
+            </div>
+
+            {/* Required Items List */}
+            {formData.requiredItems.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-gray-700">Required Items:</p>
+                <ul className="space-y-1">
+                  {formData.requiredItems.map((item, index) => (
+                    <li
+                      key={index}
+                      className="flex items-center justify-between bg-white px-3 py-2 rounded-lg border border-gray-200"
+                    >
+                      <span className="text-sm text-gray-700">• {item}</span>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setFormData(prev => ({
+                            ...prev,
+                            requiredItems: prev.requiredItems.filter((_, i) => i !== index)
+                          }));
+                        }}
+                        className="text-red-600 hover:text-red-800 text-sm font-medium"
+                      >
+                        Remove
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {formData.requiredItems.length === 0 && (
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <p className="text-sm text-blue-700">
+                  💡 Tip: Add common items like gloves, litter pickers, bags, or appropriate clothing
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {formData.equipmentProvided && (
+          <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+            <p className="text-sm text-green-700">
+              ✓ Participants will be informed that all equipment will be provided
+            </p>
+          </div>
+        )}
+      </div>
+
       {/* Location Name */}
       <div>
         <label htmlFor="locationName" className="block text-sm font-medium text-gray-700 mb-1">

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>
+  );
+}

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';

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>
+  );
+}

src/components/user/index.ts

@@ -0,0 +1 @@
+export { UserQRCode } from './UserQRCode';

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;

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>
   );
 }

src/pages/MapPage.tsx

@@ -77,13 +77,15 @@ export function MapPage() {
     const fetchEvents = async () => {
       try {
         setIsLoadingEvents(true);
-        // Fetch upcoming and completed events to show on map
+        // Fetch upcoming and completed events to show on map (exclude cancelled)
         const data = await eventService.getEvents();
-        setEvents(data);
+        // Filter out cancelled events
+        const activeEvents = data.filter(event => event.status !== 'cancelled');
+        setEvents(activeEvents);
       } catch (error) {
         console.error('Failed to fetch events:', error);
-        // Fall back to sample data on error
+        // Fall back to sample data on error (also filter cancelled)
-        setEvents(sampleEvents);
+        setEvents(sampleEvents.filter(event => event.status !== 'cancelled'));
       } finally {
         setIsLoadingEvents(false);
       }
@@ -386,42 +388,6 @@ export function MapPage() {
         })
         .catch((error) => {
           console.error('Failed to fetch hotspots:', error);
-          // Use sample hotspot data for demonstration
-          setHotspots([
-            {
-              id: 'hotspot1',
-              latitude: 53.3498,
-              longitude: -6.2603,
-              radius: 500,
-              reportCount: 15,
-              severityScore: 0.75,
-              lastReportDate: new Date('2024-01-20'),
-              calculatedAt: new Date('2024-01-21'),
-              severity: 'high',
-            },
-            {
-              id: 'hotspot2',
-              latitude: 51.8969,
-              longitude: -8.4863,
-              radius: 450,
-              reportCount: 8,
-              severityScore: 0.45,
-              lastReportDate: new Date('2024-01-19'),
-              calculatedAt: new Date('2024-01-21'),
-              severity: 'medium',
-            },
-            {
-              id: 'hotspot3',
-              latitude: 53.2707,
-              longitude: -9.0568,
-              radius: 600,
-              reportCount: 22,
-              severityScore: 0.88,
-              lastReportDate: new Date('2024-01-21'),
-              calculatedAt: new Date('2024-01-21'),
-              severity: 'critical',
-            },
-          ]);
         })
         .finally(() => {
           setIsLoadingHotspots(false);

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;

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] ? (

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';

src/types/index.ts

@@ -62,6 +62,8 @@ export interface CleanupEvent {
   participantCount: number;
   litterCollected?: number; // in kilograms
   photos?: string[];
+  equipmentProvided?: boolean; // Whether equipment is provided by organizer
+  requiredItems?: string[]; // List of items participants need to bring
   createdAt: Date;
   updatedAt: Date;
 }
@@ -76,6 +78,7 @@ export interface EventAttendee {
   contributionNote?: string;
   user: {
     id: string;
+    clerkId: string;
     username: string;
     firstName?: string;
     lastName?: string;

vite.config.js

@@ -6,6 +6,7 @@ import path from 'path'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    port: 5200,
     host: true, // Allow external access
     allowedHosts: [
       'localhost',