A modern, zero-latency, voice-first shopping list manager & e-commerce catalog powered by browser-native Speech Recognition, a client-side NLP intent engine, fuzzy edit-distance matching, smart recommendation algorithms, and an authoritative Monochrome High-Contrast glassmorphic interface.
VocalCart is engineered as a zero-latency, voice-first web application built with React 18 and Vite. Speech recognition and text-to-speech feedback are handled client-side via the browser-native Web Speech API (SpeechRecognition & SpeechSynthesis), supporting real-time streaming transcripts and multilingual switching (English, Spanish, Hindi, French).
Command processing relies on a pure JavaScript NLP engine that tokenizes spoken input to extract intents (ADD, REMOVE, SEARCH, FILTER_PRICE, VIEW_CART, GET_SUGGESTIONS), numerical quantities ("two" -> 2), units (bottles, lbs), and price thresholds (under $5). The engine features a custom stem normalizer and Levenshtein edit-distance fuzzy matcher to seamlessly parse plurals and speech typos (e.g. "millks" -> "Organic Whole Milk"). Unlisted items trigger audio feedback indicating unavailability.
A custom recommendation engine provides smart substitute suggestions (e.g. Almond Milk for Whole Milk), date-aware seasonal produce alerts, and localStorage-backed purchase history tracking to alert users when essentials run low. The UI follows a strict Monochrome High-Contrast design system utilizing pure black surfaces (#141313), white glass blurs (backdrop-filter: blur(24px)), Outfit & Inter typography, a bottom-right floating microphone FAB, and animated audio waveforms.
┌──────────────────────────────────────┐
│ User Voice Input (Mic) │
└──────────────────┬───────────────────┘
│
▼
┌──────────────────────────────────────┐
│ Layer 1: Web Speech API STT │
│ (SpeechRecognition / lang switcher) │
└──────────────────┬───────────────────┘
│ (Raw Transcript Stream)
▼
┌──────────────────────────────────────┐
│ Layer 2: Local JS NLP & Stemmer │
│ - Action Keyword Intent Classifier │
│ - Quantity & Price Filter Tokenizer │
│ - Levenshtein Fuzzy Product Matcher │
└──────────────────┬───────────────────┘
│ (Structured Intent Object)
▼
┌──────────────────────────────────────────┼──────────────────────────────────────────┐
│ │ │
▼ ▼ ▼
┌───────────────────────────┐ ┌───────────────────────────┐ ┌───────────────────────────┐
│ Shopping List State │ │ Recommendation Engine │ │ Product Catalog State │
│ - Auto-Categorization │ │ - Smart Substitutes │ │ - Price Range Filtering │
│ - Quantity Steppers │ │ - Seasonal Produce │ │ - Organic Attribute Tag │
│ - LocalStorage Persist │ │ - Low-Stock History │ │ - Search Query Filter │
└────────────┬──────────────┘ └────────────┬──────────────┘ └────────────┬──────────────┘
│ │ │
└──────────────────────────────────┼──────────────────────────────────┘
│
▼
┌──────────────────────────────────────┐
│ Layer 3: Audio TTS & UI Render │
│ - SpeechSynthesis Audio Feedback │
│ - Bottom-Right Floating Mic FAB │
│ - Monochrome High-Contrast Glass │
└──────────────────────────────────────┘
- Explicit Action Keyword Enforcement: Intent detection requires explicit command verbs (
add,buy,need,remove,delete,find,search,suggest). Conversational phrases like "hello" or "testing 123" yield aGREETINGorUNKNOWNintent, preventing accidental list modifications. - Numeric & Unit Normalization: Converts verbal number words (
"one","two","a dozen") into integer quantities and extracts standard measurement units (bottles,gallons,lbs,packs). - Price Filter Extraction: Regex patterns parse monetary constraints (e.g.
"under $5","less than 10 dollars") into structured price bounds (maxPrice: 5.00).
-
Plural Normalization: Strips trailing plurals (
"ies"->"y","es"->"","s"->"") and collapses double letters ("millk"->"milk"). -
Levenshtein Similarity: Calculates string edit distance similarity (
$1 - \frac{\text{dist}}{\text{maxLen}}$ ) to match speech variations (e.g. "millks", "milks", "appels", "strawberries") to exact catalog items (Organic Whole Milk, Honeycrisp Apples, Fresh Strawberries). - Strict Store Catalog Check: If an item is not in the store database and yields a similarity score below 0.70, it is rejected with spoken feedback: "Sorry, [item] is currently not available in our store."
- Smart Substitutes: When an item like Whole Milk is added, the app highlights dietary/healthy alternatives (Almond Milk, Oat Milk) with 1-tap swap buttons.
- Date-Aware Seasonal Produce: Evaluates the current month (
new Date().getMonth()) to highlight in-season fruits and vegetables. - History-Based Reorder Warnings: Stores item timestamps in
localStorage. If an essential item like bread or milk was added over 4 days ago, prompts a low-stock alert.
- Speaking "What is in my cart?", "What's on my list?", or "Show my cart" opens the shopping drawer and generates a natural spoken audio summary: "In your cart, you have 2 Organic Whole Milk and 1 Honeycrisp Apples. Total estimated cost is $14.28."
The application strictly implements the Monochrome High-Contrast aesthetic:
- Background Surfaces: Pure Black (
#141313,#0E0E0E) for deep, glare-free dark surfaces. - Glassmorphism: White glass panels (
rgba(255, 255, 255, 0.06)fill,backdrop-filter: blur(24px)), defined by 1px stroke borders (rgba(255, 255, 255, 0.15)). - Typography: Outfit for geometric display headings and Inter for body text and data labels.
- Voice UI: Bottom-Right Floating Action Button (FAB) with animated frequency soundwaves (
animate-wave-1throughanimate-wave-5) and pulsing mic ripple rings (mic-listening).
d:\projects\unthinkable\
├── index.html # Entry HTML with Outfit & Inter Google Fonts
├── package.json # Dependencies (React 18, Vite, Lucide React, Tailwind CSS)
├── vite.config.js # Vite build configuration
├── tailwind.config.js # Tailwind v3 theme tokens & colors
├── postcss.config.js # PostCSS plugins
├── README.md # Technical assessment documentation & write-up
└── src/
├── main.jsx # React application root
├── App.jsx # Main state coordinator, NLP dispatcher & speech lifecycle
├── index.css # Monochrome High-Contrast design system tokens & animations
├── data/
│ └── productsData.js # E-Commerce grocery product catalog database
├── services/
│ ├── nlpEngine.js # NLP intent classifier, stemmer & Levenshtein matcher
│ ├── speechEngine.js # Web Speech API (STT & TTS) manager & language switcher
│ └── recommendationEngine.js # Substitutes map, seasonal matrix & purchase history
└── components/
├── Navbar.jsx # Top bar with transcript streamer, multilingual picker & TTS toggle
├── VoiceConsole.jsx # Floating Bottom-Right Mic FAB & glass toast feedback
├── ProductCatalog.jsx # Product grid, search bar, price filters & seasonal carousel
├── ShoppingListSidebar.jsx # Categorized cart drawer, quantity steppers & substitute popovers
└── QuickGuideModal.jsx # Voice command cheat-sheet popup
- Node.js (v18 or higher)
- Google Chrome, Microsoft Edge, Safari, or Brave (for Web Speech API support)
# 1. Clone the repository
git clone https://github.com/your-username/vocalcart-voice-shopping-assistant.git
cd vocalcart-voice-shopping-assistant
# 2. Install dependencies
npm install
# 3. Start local development server
npm run dev
# 4. Open in browser
# Navigate to http://localhost:3000# Build production bundle
npm run build
# Preview production build locally
npm run preview| Feature Category | Assessment Requirement | Implementation Status |
|---|---|---|
| Voice Input | Voice Command Recognition | ✅ Native SpeechRecognition API real-time listening |
| Voice Input | Varied Phrasing NLP | ✅ Intent tokenizer for add, buy, need, remove, find
|
| Voice Input | Multilingual Support | ✅ Dynamic language switcher (en-US, es-ES, hi-IN, fr-FR) |
| Smart Suggestions | History Low-Stock Alerts | ✅ localStorage timestamp tracker for items >4 days old |
| Smart Suggestions | Seasonal Recommendations | ✅ Date-aware seasonal produce carousel |
| Smart Suggestions | Dietary Substitutes | ✅ 1-tap substitute popover badges (e.g. Milk -> Almond Milk) |
| Shopping List | Add / Remove / Modify | ✅ Complete list state CRUD with spoken TTS audio responses |
| Shopping List | Auto-Categorization | ✅ Grouped categories (Produce, Dairy, Bakery, Pantry, etc.) |
| Shopping List | Quantity Management | ✅ Extracted numbers ("2") & units ("bottles") with quantity steppers |
| Voice Search | Item & Attribute Search | ✅ Voice search by product name, brand, or organic tag |
| Voice Search | Price Range Filtering | ✅ Parses "under $5" / "less than $10" and applies live filters |
| UI / UX | Minimalist High-Contrast UI | ✅ Pure black surfaces, Outfit & Inter fonts, 24px blurs, Floating Mic FAB |
Distributed under the MIT License. Built for Technical Assessment Evaluation.