Colophon
The stack
Two platforms, one database, zero excuses. Everything Ask Nonna is built with — and why.
Architecture
The website uses Next.js App Router with a hybrid rendering strategy. Product pages are statically generated at build time (SSG). The browse page is server-rendered on demand. Legal and utility pages are fully static. Only three components ship JavaScript to the browser — everything else is server-rendered HTML.
Web
The knowledge base and SEO engine
Next.js
v16Framework
App Router with static generation for product pages and server rendering for dynamic browse routes. Every product page is pre-built at deploy time.
React
v19UI Library
Server Components by default — only three components ship JavaScript to the browser. Everything else renders to pure HTML on the server.
TypeScript
v5Language
Strict mode enabled. Shared types across data layer, components, and API responses. Catches errors before they reach production.
Tailwind CSS
v4Styling
Utility-first CSS with custom design tokens. Dark mode via media query. No CSS-in-JS runtime — everything compiles to static CSS at build time.
Supabase
v2.98Backend
PostgreSQL database, Row Level Security, Edge Functions (Deno), file storage for label images, and auth via Sign in with Apple. The entire backend in one platform.
Gemini 2.5 Flash Lite
AI Engine
Reads ingredient labels, classifies every ingredient, and generates Nonna's verdict. Runs server-side via Supabase Edge Functions — your API key never touches the client. Per-scan output is also logged for the V1.1 consensus aggregation pipeline.
iOS
The scanner app — where every scan begins
SwiftUI
iOS UI
Declarative UI with 3-tab navigation, camera integration, and native sharing. Dark mode and accessibility built in.
AVFoundation
Camera & Barcode
Real-time camera capture with passive barcode detection (UPC/EAN). Macro focus for close-up label reading.
Infrastructure
Vercel
Web Hosting
Edge-optimized SSG + ISR
Supabase Cloud
Database & Auth
PostgreSQL + RLS + Edge Functions
Google Cloud
AI Services
Gemini API + Cloud Vision SafeSearch
Apple
Auth & Distribution
Sign in with Apple + App Store
Design system
Typography
Nunito
Primary typeface — headings, body, UI. Loaded via Google Fonts. Weights 400-900.
Extrabold 800 — Headings
Semibold 600 — Subheadings
Regular 400 — Body text
Semibold 600 — Labels
Color palette
Cream
#FDF8F7 / #1C1815
Accent Red
#DC2626
Verdict Green
#10B981
Verdict Yellow
#F59E0B
Verdict Red
#EF4444
Why this stack
Architectural trade-offs, explained.
Free by default
Static generation means near-zero hosting costs. Every product page is pre-built HTML. Supabase's generous free tier handles the database. A solo founder can run this at scale without burning money.
AI at the edge
Supabase Edge Functions keep API keys server-side and Gemini calls fast. The client never touches Google's API directly. Rate limiting, JWT validation, and SafeSearch moderation all happen in Deno before a single token is spent.
The flywheel
Every scan creates a static page. Google indexes it. Someone searches "are Oreos clean?" and finds it. They download the app. They scan more products. More pages. More traffic. The data compounds.
One person, full stack
Next.js + Supabase + Tailwind + SwiftUI. Four tools, two platforms, zero team. The entire knowledge base, iOS app, and AI pipeline are maintained by one person with an opinionated stack and no time to waste.