Technical depth — stack, data flow, optimization logic, and scaling roadmap
Next.js 14 (App Router)
File-based routing with server and client components. API routes colocated in app/api/. Static generation for informational pages, dynamic rendering for API endpoints.
React 18 + TypeScript
Context API for global state (CartContext, UIContext). Full type coverage across 20+ interfaces. No external state libraries — React primitives only.
Tailwind CSS
Utility-first styling with consistent design tokens. No component library dependency. CSS-only charts and visualizations.
API Routes (4 endpoints)
/api/extract (LLM), /api/match (fuzzy), /api/optimize (scoring), /api/suggest (LLM). Stateless request-response pattern.
OpenAI GPT-4o-mini
Lazy client initialization pattern. Two LLM touchpoints: extraction (structured JSON output) and suggestions (contextual recommendations). ~1,300 input / ~1,000 output tokens per pipeline run.
Mock Data Layer
42-SKU inventory with full product metadata (price, cost, margin, dietary tags, images, cross-sell/upsell links). 3 store pricing profiles with category-specific multipliers. Designed for easy swap to real data sources.
User
Pastes recipe text
API Route
/api/extract
LLM
GPT-4o-mini
Structuring
Client-side engine
SKU Matching
/api/match
Optimization
/api/optimize
UI Render
React cart view
End-to-end latency: ~3 seconds (dominated by 2 LLM calls at ~1.5s and ~1.2s). Client-side structuring, server-side matching, and optimization together add <80ms. The pipeline is sequential — each stage depends on the previous stage's output.
The optimization engine uses a multi-factor weighted scoring algorithm. Each candidate SKU receives a composite score based on four factors. The mode (Budget, Quality, Dietary) shifts the weight distribution to prioritize different outcomes.
Effective price per standard unit ($/g, $/ml, $/count) is the primary scoring factor. In budget mode, this weight increases to 55%. The algorithm selects the SKU with the lowest cost to satisfy the ingredient requirement.
Coverage ratio measures how well a package size matches the required quantity. A 500g package for a 450g need scores higher than a 1kg package. This penalizes over-purchasing and minimizes food waste.
Waste ratio inversely affects score — unused product percentage reduces desirability. Combined with coverage ratio, this creates a package-fit score. Alternatives are ranked and stored for user-initiated substitutions.
Three store profiles apply category-specific price multipliers at the SKU matching stage. BudgetMart (0.9x base), FreshPremium (1.2x base), BulkWarehouse (0.85x base) each with category overrides. Prices update instantly on store switch.
Budget Mode
Cost weight → 55%. Prefers value-tier SKUs. Maximizes savings over quality.
Quality Mode
Quality bonus → 30%. Prefers premium-tier and organic SKUs. Price becomes secondary.
Dietary Mode
Dietary tag match → 35%. Prioritizes organic, gluten-free, vegan options where available.
The architecture is designed for progressive enhancement — each layer can be upgraded independently.
Replace the 42-SKU mock catalog with a live product API (e.g., Instacart, Kroger, or a custom retail backend). The SKU matching layer is already decoupled — swap the data source and the matching algorithm works unchanged.
Connect to live price feeds instead of static multiplier profiles. The store-aware pricing system already supports per-category adjustments — extend it to accept real-time price data per SKU.
Track user preferences, dietary restrictions, brand affinities, and purchase history. Feed personalization signals into the optimization scoring to bias toward preferred brands or avoid allergens.
Aggregate cart data across users to predict ingredient demand by region, season, and recipe trend. Enable merchants to optimize inventory stocking and pricing based on predicted demand curves.
Connect the optimized cart to a real checkout flow — either in-app payment or deep-link to a grocery partner checkout. The cart data structure is already transaction-ready with SKU IDs, quantities, and line totals.