Wasfa (وصفة)

The problem. Wasfa is built for Arabic and English from the first screen: layouts mirror correctly, search follows how Arabic dishes are written, and calorie targets adjust to the person. It is a recipes and meal-planning app with a catalogue of more than 1,100 recipe entries that guests can browse, open and cook from without an account; the planner and food diary need one.

The hard part. Three problems shaped the design. Calorie targets had to adapt to what a person really eats, so I built an energy-balance model that estimates daily expenditure from logged intake and the smoothed weight trend. Ramadan changes when people eat, which meant an offline Hijri calendar and prayer-time astronomy rather than an API call. And Arabic search needed its own normalisation, alongside an ingredient matcher that checks every recipe against a person's dietary rules.

The approach. A Vue 3.5 PWA talks to a NestJS 11 API on PostgreSQL 16 through Drizzle, and both sides share Zod contracts from one package so the client and server cannot disagree about a payload. The same web app is wrapped with Capacitor for iOS and Tauri for macOS. Accounts use TOTP two-factor sign-in, a refresh token kept in an httpOnly cookie and a strict Content Security Policy.

The outcome. The app is live on Vercel and Neon. One pnpm gate command chains typecheck, lint, RTL, i18n parity, contrast, typography, content validation, a dependency audit and a bundle-size budget; CI adds an end-to-end smoke run and a Lighthouse floor of 90. More than 2,500 web tests and 12 Playwright specs back 264 commits since July 2026.