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.
