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 components to minimal JavaScript instead of shipping a framework runtime, which matters for the product's defining moment: 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 — the SPA is plain files behind the gateway, calling /api/v1. The current app serves the consumer scan, product, Compare, Fridge, Health Profile, and mock-auth routes.

Tailwind CSS¶

What: Utility-first CSS framework, with clsx and tailwind-merge for conditional class composition and lucide-svelte for icons.

Why: Styling lives in the component markup, so there is no parallel CSS structure to keep in sync — the right trade-off for a solo-maintained UI that changes every cycle. A small shared class layer in src/app.css standardizes common buttons, cards, icon actions, and inputs without introducing a component-library dependency.