Mob Recipes Archive

A searchable personal archive of recipes from mob.co.uk, built from the Recipe JSON-LD structured data the site already embeds in every recipe page (the same data Google reads for rich search results). There's no official Mob API/dump, so this project scrapes public HTML rather than any private endpoint — no login, no paywall bypass.

How it works

• scripts/scrape.mjs reads Mob's own sitemap (/sitemap.xml → *-section-recipes-*-sitemap-pN.xml) to enumerate every recipe URL, then fetches each page and pulls out its Recipe JSON-LD block (name, ingredients, steps, times, category, cuisine, image, etc). It's polite by default — limited concurrency and a delay between requests.
• .github/workflows/scrape.yml runs that script on GitHub's own runners (manually via Actions → Scrape Mob recipes → Run workflow, or weekly on a schedule) and commits the refreshed data/recipes.json back to the repo. Vercel is connected to this repo's main branch, so every commit triggers a new deployment automatically.
• The Next.js app builds a small search index (public/search-index.json) from data/recipes.json at build time and does fuzzy search + category/ cuisine filtering client-side (via Fuse.js). Full ingredients/instructions are only rendered on each recipe's own statically-generated detail page, so the homepage stays light even with thousands of recipes.
• "On your other device": while the app is on screen it tells /api/nearby every few seconds which recipe is open, and the server answers with what other devices behind the same public IP (same Wi-Fi) have open. The entries live a minute in Upstash Redis (added from the Vercel Marketplace, which sets KV_REST_API_URL and KV_REST_API_TOKEN); only a salted hash of the IP is stored. Without Redis the feature is simply off. It cannot match devices when iCloud Private Relay is on or when one device uses IPv4 and the other IPv6. Logic: lib/nearby.mjs, tests: node scripts/test-nearby.mjs.
• Sharing: a recipe page shares its own URL through the system share sheet (or copies it). A folder is stored as a read only copy in Redis for a year (POST /api/share) and opens at /s/<id>, where the receiver can save it into their own Saved. Logic: lib/share.mjs, tests: node scripts/test-share.mjs. Every share also shows a QR code; the in-app scanner (scan icon in the top bar, jsQR loaded on demand) opens recipe and folder codes inside the app and links devices from a sync code. On iPhone a link or a Camera scan always opens Safari, which has its own storage, so scanning inside the app is the way to land in the Home Screen app. Logic: lib/qr.mjs, tests: node scripts/test-qr.mjs.
• Device sync: two devices link with a 6 digit code (/api/sync/pair, codes live 10 minutes, tries are rate limited) and then share a "space" in Redis. Each device sends what changed since its last sync and gets back the merged result (/api/sync). Every value carries the time it changed and the newer one wins, value by value; removals are kept as markers so they reach the other devices. Linking first keeps a raw copy of the data under <key>:backup-sync. "Share everything" in Saved starts the same linking (a code, its QR and a sendable link), so sharing everything means staying in sync. Logic: lib/sync.mjs, tests: node scripts/test-sync.mjs.
• Browser features used for the feel of the app, each one optional (older browsers simply skip it):
  • View Transitions (React <ViewTransition>): like iPhone apps, a recipe slides in from the right and back out, tabs switch at once; from the Continue cooking chip its photo flies into the recipe page. Types live in lib/transitions.js, animations at the end of app/globals.css. Respects Reduce Motion (no animation at all).
  • Scroll driven animations: reading progress line, hero photo drift, cards rising into view, the cooking view progress bar.
  • @starting-style entry animations, Popover API plus CSS anchor positioning for ingredient amounts in method steps, content-visibility for long recipe grids, text-wrap balance/pretty.
  • Cooking view (components/cook/CookMode.jsx): one step per screen with scroll snap, Screen Wake Lock, the step remembered per recipe.
  • Haptics: navigator.vibrate where it exists (lib/haptics.js); on iPhone a clear label over each button wraps a hidden native switch, and a real finger tap on it plays the system tick (components/Haptic.jsx).
  • Dark theme from prefers-color-scheme: all colors are tokens on :root.
  • Offline Saved: components/OfflineKeeper.jsx sends the service worker the recipe pages, JSON and photos of everything in Saved and My kitchen (KEEP_OFFLINE in public/sw.js), and asks for persistent storage.
• Shopping list by supermarket aisle and "Send list" (system share sheet with plain text). Aisle rules: lib/aisles.mjs, tests: node scripts/test-aisles.mjs.

Running it yourself

npm install
npm run scrape          # full scrape — can take a while, be patient
# or, for a quick smoke test:
SCRAPE_LIMIT=20 npm run scrape

npm run dev              # http://localhost:3000
npm run build && npm start

A note on isAccessibleForFree

Some recipes are flagged isAccessibleForFree: false in their own structured data (Mob's premium/app-exclusive content), even though the full ingredients and method are present in the same public JSON-LD block used for SEO. The scraper records that flag on every recipe (isAccessibleForFree field) but doesn't filter on it — that's a judgment call left to whoever runs this for their own use.

Disclaimer

This is an unofficial, personal project for search/reference. All recipe content belongs to Mob (mob.co.uk); this repo is not affiliated with them.