Other

Recipes PWA

Name: Recipes PWA
Author: tomyao

An installable, offline-capable recipe browser on TheMealDB. Favorite a dish and the whole recipe stays readable with no connection.

By tomyaoAdded 3 months ago · 1 review

Visit website

Upvote10

Source code

Why it exists

Search, browse and filter recipes by name or category, with details down to ingredients, instructions, tags and the YouTube link. Favoriting fetches the full recipe into IndexedDB on-device, so everything you saved stays readable (and removable) offline, not just a summary.

A hand-written service worker precaches the app shell with an offline fallback page, runtime caching runs stale-while-revalidate for images and network-first for searches, and a small Express proxy is the sole holder of the TheMealDB API key. React 18, Vite, TypeScript, Tailwind, TanStack Query, plus an accessibility pass: skip links, labeled forms, aria-pressed favorite buttons and visible focus rings.

1 Review

Community feedback

elena_ferrisMember review1 month ago

Tried this out with keyboard only and got stuck favouriting a dish - the heart icon isn't reachable via tab order, so I had to fall back on the mouse. Contrast on the recipe text itself is fine, dark enough against the background to read comfortably offline. The offline caching does what it says on the tin. Fix the focus states and it's a genuinely useful little tool.