← All case studies
Full-stack PWAConsumerNext.js + SupabaseBuilt & shipped

Tally — grocery planning & spend intelligence

Plan, scan, and see planned vs actual — a real app, shipped.

Proof that Khula doesn't stop at slides or prototypes. Tally is a production-grade Progressive Web App with real authentication, data, offline support and continuous delivery — built end to end.

Next.js 16 · React 19Front end
Supabase + RLSSecure backend
Offline-first PWAWorks in-store
Free tiersNo server costs

The problem

South African households plan a grocery list, then watch the trolley total drift past the budget — with no simple way to see planned versus actual spend while they shop. The gap between the plan and the till is where money quietly leaks.

What Khula built

A mobile-first Progressive Web App that follows the real shopping journey: prepare a list, scan packaged products in-store, enter shelf prices, watch the trolley total update live, then review planned versus actual spending afterwards. Installable, with a production service worker and an offline-first foundation so it keeps working on shaky in-store signal.

The engineering

Modern front endNext.js 16, React 19, TypeScript, Tailwind CSS 4.
Secure backendSupabase Postgres, Auth & Storage with row-level security and consent-aware telemetry.
Offline-firstDexie/IndexedDB cart, Serwist PWA caching, offline replay auditability.
In-store scanningZXing barcode scanning, with browser-native detection as a future path.
CorrectnessInteger-cent money utilities with unit tests — no floating-point money bugs.
DeliveryGitHub Actions quality workflow, Playwright smoke tests, Vercel + Supabase preview environments.
Deliberately built to start entirely within the free tiers of Vercel and Supabase — no separate servers, no Redis, no paid analytics. Lean by design.

Outcome

A working foundation slice already stands: a responsive dashboard and app navigation, full password authentication (sign-in, registration, reset, account settings) with PKCE and cookie refresh, profile and consent provisioning under row-level security, and a tested money core — the groundwork for the offline-first active cart.

Why it belongs in this portfolio

Tally is the end-to-end proof point. It shows Khula can take an everyday problem and ship real, secure, tested, deployable software — the same rigour that underpins the technical builds, applied to a consumer product.

Have something worth building properly?

From a full product like Tally to a single automation, it starts with a free 20-minute conversation.

Book a free discovery call →