Stack: Next.js 15 · TypeScript · Neon Postgres + pgvector · Payload CMS 3 · Anthropic Claude · Cohere · Vercel
Engagement: Build — new product from scratch
Live: newfoodcenter-claude.vercel.app (apex cutover to newfoodcenter.com pending)
At a glance
A multilingual, AI-native weekly grocery deals platform serving Spanish-speaking Latino and Filipino households in Southern California’s Inland Empire. The product makes ethnic grocery flyers — long ignored by the big national aggregators — discoverable, searchable, and conversational. Every week, an automated pipeline reads each chain’s weekly ad and turns it into structured, searchable, multilingual deals.
Your weekly grocery deals, in your language, for the stores Flipp forgot.
The brief
The original NewFoodCenter launched in 2008 with a simple idea: aggregate every neighborhood grocery store’s weekly ad in one place. The concept was sound — but the technology of the day couldn’t read messy flyer PDFs at scale, couldn’t translate at conversational quality, and couldn’t operate near-zero-cost at small scale. The site sunset.
In 2026, three shifts made the original concept newly viable:
- Vision-capable LLMs can read any flyer image — PDF, paginated viewer, even photos — and produce clean structured data at fractions of a cent per page.
- Multilingual AI at production quality finally serves bilingual households the way they actually shop: switching between languages mid-conversation, asking in Spanish, getting answers in English.
- Modern serverless platforms make small-scale community products operationally viable without a dedicated ops team.
We rebuilt the platform from scratch on a modern stack with three differentiators in mind: ethnic-grocery focus, multilingual UX, and an AI assistant as the front door — not a flyer browser dressed up with a chatbot.
What it does
Conversational AI assistant (the hero feature)
The home page is a chat — not a search bar. Shoppers ask in plain language:
“What pork is on sale at Cardenas this week?”
“¿Dónde encuentro tortillas y carnitas para tacos esta noche?”
“What’s the cheapest seafood near 92505?”
The assistant grounds every answer in the live deals database: it pulls real items + prices, names the store, links to the flyer. No hallucination — the assistant only answers from indexed data. Multilingual by default; users can switch languages mid-conversation and the assistant follows.
Under the hood, the assistant uses a small set of tools (find-stores-near, get-current-flyer, search-items) and a hybrid retrieval pipeline: full-text search on item names, semantic search over 1024-dimension multilingual embeddings, fused into a single ranked result.
Location-aware store directory
Shoppers see only stores relevant to them. The directory clusters by chain (Cardenas, Northgate González, Vallarta, Seafood City, El Super…), filters by community tag (Latino, Filipino, Asian), and supports ZIP-based proximity sorting. Each store page shows its address, hours in three languages, current published flyer, and the items on sale this week.
The geo + community model is built to extend — adding a new metro is a data exercise, not a code change.
Automated weekly content ingestion
The hardest problem in flyer aggregation is the supply side: every grocery chain publishes its weekly ad differently, often through interactive third-party viewers that resist scraping. We built a pipeline that handles them all.
Every Monday at 6 AM Pacific, a scheduled job runs across the entire store roster. For each chain, it:
- Discovers the current week’s flyer URL — by static URL, CSS selector, or AI-driven inference for chains whose URLs change weekly.
- Fetches the flyer — direct PDF download, paginated image scrape, or headless-browser rendering for JavaScript-driven viewers.
- Extracts items — Sonnet-class vision LLM reads each flyer page and returns structured item data: name, sale price, regular price, unit, validity dates, category, confidence score.
- Loads into the database with full multilingual support, semantic embedding, and quality flagging.
- Publishes the new week’s flyer and archives the previous one.
Operators see every run in a dashboard with cost, items extracted, and confidence breakdowns. Low-confidence items route to a one-click approve/reject review queue. The whole pipeline is metered and cost-capped — a single chain’s weekly extraction runs around $0.25 in API spend.
The architecture supports the inevitable: new chains slot in with a small config block, no code changes required.
Multilingual from the foundation up
Three languages at launch — English, Spanish, Tagalog — with the platform built to add more without rework. Every page, every email, every chat reply respects the user’s language choice. Search and AI embeddings are multilingual: a Spanish query against an English item description still finds the right product, because both vectors live in the same 1024-dimension space.
The translation strategy is pragmatic: human-curated copy for marketing surfaces, AI-assisted operator translation for store-specific text, model-native multilingual responses for chat. Right tool for each surface.
Email deal alerts
Shoppers subscribe to keyword alerts (“notify me when chicken thighs drop below $1.99/lb”). A weekly digest matches new items against active alerts and sends a personalized email. RFC-compliant one-click unsubscribe, HMAC-signed tokens, full GDPR/CAN-SPAM hygiene.
Operator-grade admin
A custom admin surface at /admin/ingestion/{runs,review} gives operators visibility into the pipeline they own: cost dashboards, run history, items pending QA, error breakdowns by chain and phase. Built so a small operator can run a citywide deals platform without a dedicated ops team.
Built for scale, deployed at community scale
The infrastructure is designed for the eventual product — citywide, then regional, then national — while operating efficiently at today’s launch scale:
- Postgres with pgvector for native semantic search. Items are stored once, queryable by keyword (full-text) and meaning (vector). The same column scales from hundreds of items to millions without a schema migration.
- Serverless throughout. No always-on servers. Cron jobs run on demand. Storage is object-based (Vercel Blob). API calls bill per-token (Vercel AI Gateway, provider-agnostic).
- Per-chain isolation in the ingestion pipeline. One store’s failure doesn’t block the others. Cost caps are per-store-per-week. Failure surfaces in the dashboard, not in user-facing 500s.
- Edge-rendered public pages with ISR caching. Pages stay fresh without re-rendering on every request.
- Auth, mail, search, AI — all platform services. No bespoke infrastructure. When a service improves (cheaper models on the gateway, faster Postgres on Neon), the app inherits the improvement without code changes.
The pattern: build the small thing well so it scales gracefully into the large thing.
Tech stack highlights
| Layer | Choice | Why |
|---|---|---|
| Frontend | Next.js 15 (App Router, Turbopack) | RSC + ISR + edge rendering in one framework |
| Language | TypeScript (strict mode) | Types catch entire classes of bugs at compile time |
| Database | Neon (serverless Postgres) + pgvector | Branch-per-environment; vector search native |
| CMS | Payload CMS 3 | Type-safe, code-first, no separate admin app to maintain |
| Auth | Auth.js v5 + Google OAuth + magic-link | Modern, multi-provider, sessions in Postgres |
| i18n | next-intl | Server-rendered translations + locale routing |
| AI (chat + extraction) | Anthropic Claude Sonnet via Vercel AI Gateway | Provider-agnostic; swap models without code changes |
| AI (search embeddings) | Cohere multilingual via AI Gateway | Best-in-class multilingual vectors at 1024 dims |
| Storage | Vercel Blob | Public + private objects, pay-per-use |
| Amazon SES + Nodemailer | Reliable delivery, custom MAIL FROM, DKIM-signed | |
| Headless browser | Playwright | For JavaScript-rendered chain flyer viewers |
| Hosting | Vercel (Fluid Compute) | Cold-start-resilient serverless, full Node.js |
The stack is opinionated: AI-first, type-safe, serverless throughout, observable by default. Each piece chosen because it does one thing well and composes cleanly with the others.
By the numbers
- 3 languages at launch (English, Spanish, Tagalog) with infrastructure for any number
- 1,024-dimensional multilingual embeddings — every item searchable by meaning
- 266 items extracted from a single chain’s flyer in one weekly run
- ~$0.24 API cost per chain per weekly run (vision extraction included)
- <$200/month projected ingestion spend for the full 12-store launch roster
- 7-phase pipeline with per-phase failure isolation
- 52+ test files / 255+ unit tests covering the ingestion + auth + chat surfaces
- One operator can run the entire weekly cycle
What’s next
NewFoodCenter is in active development. On the near roadmap:
- Curated product image library with semantic matching — a growing set of brand-consistent product images, matched to items by embedding similarity, fallback to category icons.
- Per-store automated onboarding for the remaining 11 chains in the launch roster.
- Apex domain cutover from the staging URL to newfoodcenter.com.
- Citywide expansion to LA County after the Inland Empire launch settles.
Why this matters as a case study
Three patterns from this project translate directly to other client work:
- AI as the interface, not the bolt-on. The chat assistant isn’t a widget on the side — it’s the home page. Designing AI in from the start, not retrofitting it, changes how the whole product feels.
- Hyperlocal serves underserved communities profitably. The big aggregators chase scale and miss real demand. A focused platform for one community in one metro can operate at near-zero marginal cost while delivering measurably better UX for its audience.
- The hardest part of consumer AI is the supply side. Beautiful frontend, smart chat — none of it matters if the data is stale. The unsexy 90% of this build is the automated weekly ingestion pipeline. We invested there first and shipped the rest on top.