Dev.to · 2 min read

How I Built a Real-Time Grocery Price Comparator with React Native & Groq AI

How I Built a Real-Time Grocery Price Comparator with React Native & Groq AI

Indian quick-commerce platforms deliver groceries in 10 minutes, but catalog fragmentation and dynamic pricing mean that identical grocery baskets often differ in price by 20% or more. To solve this, I built BasketBuddy—a React Native app that compares grocery baskets across stores in real time, auto-matches catalog entities, and bridges carts directly to store checkouts. Here is an architectural breakdown of how it works and the engineering hurdles faced. 1. The Core Engineering Challenge: Catalog Entity Resolution Store catalogs rarely share standardized SKUs or naming conventions: Store A: "Amul Taaza Homogenised Toned Milk 1L" Store B: "Amul Toned Milk 1000ml pouch" Store C: "Amul Taaza Fresh Milk - 1 Litre" Standard Levenshtein distance fails because volume formatting (1L vs 1000ml) and promotional noise (Super Saver, Combo) distort similarity scores. Solution: Hybrid Deterministic + LLM Matching Deterministic Normalization: Standardizes unit tokens (ml -> l, gm -> kg). Strips common promotional stop-words. Extracts brand tokens and item weight/quantity. Sub-second LLM Fallback (via Groq): When deterministic confidence falls below threshold, an ultra-fast LLM call through @ai-sdk/groq evaluates the ambiguous title candidates in ~200–300ms to verify item equivalence. 2. Natural Language AI Mode (Recipe to Cart) Instead of searching item-by-item, users can type natural meal prompts: "Ingredients for Butter Chicken and Jeera Rice for 4 people" Using structured outputs with Groq: The prompt translates into a list of normalized grocery ingredients with realistic quantities. The auto-matcher searches available inventory across stores and maps them directly to active stock. 3. Architecture & Tech Stack Framework: React Native with Expo SDK 58 & Expo Router (typed routing) Language: TypeScript AI Integration: Vercel AI SDK (@ai-sdk/groq) Animation: React Native Reanimated (fluid price delta transitions) Store Bridges: In-app WebViews to preserve session context and export finalized baskets Testing: 560+ deterministic unit tests using jest-expo (mocked network & store layers) 4. Key Takeaways Avoid purely algorithmic matching for messy real-world retail data: Combining lightweight token extraction with an ultra-fast LLM fallback yields over 90%+ match accuracy without breaking latency budgets. Mocking third-party integrations early: Quick-commerce web structures change rapidly. Keeping store adapters strictly decoupled and mocked in unit tests saved countless hours of debugging. Links & Resources Google Play Store: Download BasketBuddy Video Walkthrough: Watch on YouTube Have you tackled entity matching across messy e-commerce catalogs? What heuristics or embedding approaches worked best for you? Let's discuss in the comments!

This is a summary aggregated from Dev.to. Read the complete article on the original site:

Read full article at Dev.to

More AI & Machine Learning News