Back to Projects

Recipes App

Recipes App is a React TypeScript PWA that browses TheMealDB via a secure Express/Vercel API proxy, with IndexedDB favorites, image caching, and offline recipe detail views.

View Live (opens in a new tab)View Code (opens in a new tab)
  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Express API
  • TanStack Query
  • IndexedDB
  • Progressive Web App

Project Gallery

Screenshots

Desktop

  • Recipes App desktop screenshot 1

Mobile

  • Recipes App mobile screenshot 1
  • Recipes App mobile screenshot 2

Case study

Problem

Recipe sites often break without Wi‑Fi, and calling a third-party food API straight from the browser leaks keys, hits CORS/rate-limit issues, and leaves favorites empty when you’re offline in the kitchen.

Solution

An installable Recipes PWA that highlights vegetarian and vegan meals, supports name search and category browse, and opens detail views with ingredients, instructions, tags, and related video. Favoriting a recipe persists the full payload (plus images and recent category snapshots) in IndexedDB so cooking steps stay readable offline.

Process

Client stack: React 18, Vite, TypeScript, Tailwind, TanStack Query, React Router, and idb. All TheMealDB traffic goes through Node/Express locally and Vercel Edge `/api/*` routes in production — Helmet, CORS, and compression on the proxy, never the MealDB key in the browser. A manual service worker, Cache Storage for images, skeleton loaders, error boundaries, theme toggle, and an offline fallback page complete the PWA experience.