Progressive Web App (Pwa) for a High-Traffic Wordpress Recipe Website — Mvp Build

We are a digital agency building a PWA for an established recipe website. The site already has a live user account and recipe-save system. We need to build a PWA that exposes existing site functionality to a mobile app-like experience and adds new utility features not currently available on the website.

This is Phase 1 of a two-phase project. Phase 1 (this brief) is the PWA.
Existing Tech Stack:
CMS
WordPress (self-hosted)
Recipe Plugin
WP Recipe Maker (outputs json-ld structured data)
user accounts
live on site; save recipe functionality exists
content api
wordpress rest api (/wp-json/wp/v2/)
hosting
tbc; assume standard wordpress hosting
auth
tbc; likely jwt authentication for wp-api plugin or similar

scope of work — phase 1 mvp
1. PWA Infrastructure
• Service worker setup for offline support and background sync
• Web App Manifest (installable to iOS and Android home screens)
• Push notification infrastructure (Web Push API)
• App shell architecture for near-instant load performance
• https enforcement and pwa audit pass (lighthouse score 90+)

2. User Authentication (bridge existing system)
• Connect to existing WordPress user accounts via JWT or Application Passwords
• Persistent login state across sessions
• Apple Sign-In and Google Sign-In as optional social login methods
• Secure token management and refresh logic

3. Recipe Browsing & Search
• Pull recipes from Wordpress rest api (categories, tags, search, pagination)
• category browsing matching site structure (dinner, dessert, slow cooker, air fryer, seasonal, etc.)
• Full-text search with filter support (cuisine, cook time, dietary preference)
• Recipe detail view: ingredients, steps, cook time, serving size, photos
• Serving size scaler (real-time multiplication of ingredient quantities)

4. Saved Recipe Collections
• Bridge to existing WordPress save system via API — do not duplicate, extend
• Offline caching of saved recipes (IndexedDB or Cache API)
• Collection/folder support: user-named groupings (e.g., 'Weeknight Dinners')
• Sync state between web and PWA sessions

5. Shopping List Generator
• One-tap 'Add to Shopping List' from any recipe ingredient list
• Smart quantity merging when the same ingredient appears in multiple recipes
• In-store checklist mode (tap to check off items)
• Manual item addition and removal
• Shareable list (copy to clipboard, share via native share sheet)
• Foundation for Phase 2 Instacart API integration — data model must support this

6. Cook Mode
• Full-screen, step-by-step cooking view
• Screen Wake Lock API to prevent screen dimming mid-recipe
• Per-step timer(s) with audio alert
• Voice-activated step navigation (‘Next step’, ‘Repeat’) using Web Speech API
• Large, readable typography optimised for kitchen distance viewing
• Swipe gestures for step navigation as fallback to voice

7. Push Notifications
• Opt-in push notification flow (permission request UX best practices)
• Admin-triggered broadcasts (new recipe alerts, seasonal collections)
• Scheduled notifications (e.g., Sunday meal planning prompts)
• Notification click-through to relevant recipe or feature

Out of Scope — Phase 1
The following are Phase 2 features and should NOT be included in Phase 1 scope, but the architecture must not block them:
• Weekly meal planner calendar
• Instacart / grocery API integration
• Recipe Clipper (share extension to import recipes from other websites)
• Subscription billing / paywall (RevenueCat or similar)
• Personalised recommendation engine
• Pantry / fridge mode

Requirements
• Framework: Vanilla JS, React, or Vue — please specify your preference and reasoning
• Must work on iOS Safari 16+ and Android Chrome 112+
• Lighthouse PWA score of 90+ on mobile
• Core Web Vitals passing (Lcp < 2.5s, fid < 100ms, cls < 0.1)
• Offline access must work for all saved recipes without network
• User data (saves, shopping lists) stored in separate backend — recommend Firebase or Supabase
• No modification to the existing WordPress installation is acceptable beyond installing standard plugins
• Code must be documented and handoff-ready for a second developer
• Git repository with clear commit history required
Deliverables
• Fully functional PWA deployed to a staging URL for client review
• Web App Manifest and service worker
• All 7 feature modules above, tested on iOS and Android
• Lighthouse audit report showing 90+ PWA score
• Technical documentation: API integration guide, data model, deployment instructions
• Git repository access
• 2-week post-launch bug fix support
Target timeline:
8–10 weeks from project kick-off to staging delivery
Week 1–2
Tech audit of existing WordPress setup, API mapping, project setup
Week 3–5
Core PWA infrastructure + auth bridge + recipe browsing
Week 6–7
Shopping list + Cook Mode + offline caching
Week 8–9
Push notifications + QA + performance optimisation
Week 10
Staging delivery + Lighthouse audit + handoff documentation
Milestone reviews
Expect check-ins at end of Week 2, Week 5, and Week 8