Project 28: Find My Pet (PWA)

📋 Project Brief

Build a Progressive Web App (PWA) for reporting and finding lost pets. This mobile-first app works offline via Service Workers, uses the Camera API for photos, and integrates maps for location marking.

✅ Feature Requirements

Feature 1: Service Workers (Offline Support)

Acceptance Criteria:

• App loads and displays cached data even without internet
• New reports are queued in IndexedDB and synced when connectivity returns
• Cache strategy: Network-first for API data, Cache-first for static assets
• A banner shows "You're offline — changes will sync when connected"

Feature 2: Camera API

Acceptance Criteria:

• Users can take a photo directly in the app using getUserMedia
• Photo can be cropped/resized before submitting
• Fallback: file upload input for devices without camera access
• Compress images to < 500KB before storing

Feature 3: Push Notifications

Acceptance Criteria:

• Users can opt-in to notifications for their area
• When a new pet is reported nearby, they receive a push notification
• Notifications include the pet's photo and last seen location
• "Nearby" defined as within a configurable radius

Feature 4: Map Integration

Acceptance Criteria:

• Use Leaflet.js (open-source) for displaying a map
• Lost pets shown as markers with photo thumbnails
• Users can drop a pin to mark where they last saw a pet
• Clicking a marker opens a detail card

Feature 5: Install Prompt

Acceptance Criteria:

• A custom "Install App" banner appears (using the beforeinstallprompt event)
• The banner is dismissable and doesn't show again for 7 days
• A Web App Manifest configures: app name, icons, theme color, start URL
• The app opens in standalone mode after installation

🧪 Testing Checklist

• Test offline mode: disconnect network → app still loads and displays cached data
• Test camera capture and image compression
• Test map marker placement and detail card
• Test install prompt behavior
• Lighthouse PWA audit: all checks pass