TinyKicks is an innovative e-commerce platform that combines modern web technologies with AI-powered voice search to create a seamless shopping experience. Built for the Bolt.new Hackathon, this project demonstrates the future of conversational commerce.
Observing how parents shop for their children - often while multitasking, holding babies, or in situations where traditional typing and clicking interfaces are inconvenient. I created a shopping experience that feels as natural as asking a friend for recommendations.
The vision is to build a store where parents could simply say "Show me running shoes under $50" or "Find comfortable shoes for my toddler" and get intelligent, personalized results with natural voice responses.
This project was a deep dive into several cutting-edge technologies:
- Speech Recognition: Implemented both Web Speech API and ElevenLabs for robust voice input
- Text-to-Speech: Used ElevenLabs' premium voices with Web Speech API fallback
- Natural Language Processing: Built custom parsing logic to understand shopping queries
- Vendure Integration: Connected to a live Vendure e-commerce backend
- GraphQL: Implemented type-safe GraphQL queries for products and collections
- Real-time Data: Built dynamic product search with live inventory data
- Astro Framework: Leveraged Astro's island architecture for optimal performance
- Vue.js Components: Created interactive components with Vue 3 Composition API
- Tailwind CSS + DaisyUI: Implemented responsive, accessible design system
- TypeScript: Maintained type safety across the entire application
- Modular Architecture: Organized code into clean, reusable services and components
- Error Handling: Implemented robust fallback systems for voice features
Frontend (Astro + Vue) → Voice Services → Vendure Backend
↓
ElevenLabs API
- VoiceSearchModal.vue: Full-screen voice interface with real-time feedback
- VendureVoiceService.ts: Core service handling speech-to-text, product search, and text-to-speech
- Smart Query Parsing: Extracts price ranges, categories, and keywords from natural language
- Vendure GraphQL Client: Type-safe connection to live product database
- Dynamic Product Display: Real-time product cards with live inventory status
- Category Management: Automatic category detection from Vendure collections
- Responsive Design: Mobile-first approach with touch-friendly interfaces
- Loading States: Shimmer effects and progress indicators
- Error Handling: Graceful fallbacks when voice features aren't available
- Accessibility: Screen reader support and keyboard navigation
- Astro Islands: Only hydrate interactive components
- Image Optimization: Lazy loading with Pexels integration
- Caching Strategy: Smart caching of product data and categories
// Example of natural language parsing
"Show me running shoes under $50" → {
category: "running",
maxPrice: 50,
keywords: ["shoes"]
}- Connected to live Vendure instance at
vendure.tarikrital.website - Dynamic category extraction from actual product collections
- Intelligent fallback to mock data for demonstration
- Voice-first: Primary interaction through speech
- Touch-friendly: Category buttons and visual search
- Keyboard accessible: Full keyboard navigation support
Challenge: Browser speech recognition varies across devices and environments.
Solution: Implemented dual-layer approach:
- Primary: Web Speech API (free, fast)
- Fallback: ElevenLabs Speech-to-Text (premium, reliable)
- Graceful degradation to text input
Challenge: Connecting to live Vendure backend while maintaining performance.
Solution:
- Implemented smart caching strategies
- Built type-safe GraphQL integration
- Created fallback mock data system
Challenge: Parsing diverse shopping queries accurately.
Solution:
- Built custom NLP logic for e-commerce context
- Implemented fuzzy matching for categories
- Added smart synonym detection
Challenge: Voice features work differently across browsers.
Solution:
- Comprehensive feature detection
- Multiple fallback layers
- Progressive enhancement approach
Challenge: Maintaining type safety with dynamic GraphQL responses.
Solution:
- Created comprehensive TypeScript interfaces
- Implemented proper type assertions
- Built type-safe service layer
- ✅ Voice Product Search: Natural language product discovery
- ✅ Live E-commerce Backend: Real Vendure integration
- ✅ Intelligent Responses: AI-powered product recommendations
- ✅ Responsive Design: Works on all devices
- ✅ Multi-modal Interface: Voice + touch + keyboard
- ✅ Real-time Inventory: Live stock status
- ✅ Smart Categorization: Dynamic category detection
- ✅ Error Recovery: Robust fallback systems
- ✅ Intuitive Voice UI: Clear visual feedback during voice interactions
- ✅ Loading States: Engaging shimmer effects and progress indicators
- ✅ Accessibility: Screen reader and keyboard support
- ✅ Performance: Fast loading with Astro's island architecture
- Astro 4.5.6: Modern static site generator with island architecture
- Vue 3.4.21: Reactive components with Composition API
- TypeScript: Type-safe development
- Tailwind CSS + DaisyUI: Utility-first styling with component library
- Vendure: Headless e-commerce platform
- GraphQL: Type-safe API queries
- ElevenLabs: Premium voice AI services
- GraphQL Code Generator: Automatic type generation
- Vite: Fast development server
- ESLint + Prettier: Code quality and formatting
- Umbraco Integration: Product storytelling and content management
- Advanced NLP: More sophisticated query understanding
- Voice Commerce: Complete voice-driven checkout process
- Personalization: User preference learning
- Multi-language Support: International voice commerce
TinyKicks demonstrates the potential of voice-first e-commerce, combining cutting-edge AI with practical shopping needs. The project showcases how modern web technologies can create more natural, accessible, and engaging user experiences.
The integration of real-time e-commerce data with intelligent voice interfaces opens new possibilities for how we interact with online stores, making shopping more conversational and human-centered.
Built from 🇲🇦 using Bolt.new for rapid prototyping and development.