Frontend Technologies¶

SvelteKit + Svelte 5¶

What: The consumer web app (client/web-app), SvelteKit 2 on Svelte 5 with TypeScript, built by Vite, deployed with the static adapter as a single-page app.

Why: Svelte compiles component work into a comparatively small client runtime, which matters for a first-time scanner on a phone, in a store, on whatever signal they have (ASR-2). The static adapter means no Node server in the service fleet. Caddy serves the SPA files and proxies /api/v1 to the gateway. The current consumer app includes scan, product, Compare, Fridge, Shopping List, History, Recipes, Health Profile and account/session routes; the brand dashboard is a separate SvelteKit application.

Tailwind CSS¶

What: Utility-first CSS framework, with clsx and tailwind-merge for conditional class composition and lucide-svelte for icons. The scan surface uses the browser's native BarcodeDetector where available and @zxing/browser as a fallback decoder.

Why: Styling lives in the component markup, so there is no parallel CSS structure to keep in sync for a frequently changing UI. A small shared class layer in src/app.css standardizes common buttons, cards, icon actions, and inputs without introducing a component-library dependency.