Budget Buddy

In Bangladesh, high schoolers, university students, and budget-conscious shoppers want to stay stylish without overspending. However, navigating bustling street markets like New Market, Gawsia, or Farmgate—or scrolling endless social media thrift shops—can be overwhelming. Sellers often quote inflated initial prices, and matching an entire outfit (t-shirt, sunglasses, sliders, or accessories) strictly under a single 500 Taka (৳500 BDT) bill requires serious bargaining skills and market insider knowledge. We built BudgetBuddy to democratize smart budget shopping—giving every student and fashion lover in Bangladesh their very own AI personal stylist and bargain advisor in their pocket. 🛍️ What it does BudgetBuddy is a zero-backend, pure client-side AI personal shopping assistant powered by Google's Gemini models: Strict ৳500 Budget Reasoning: Breaks down outfit costs line-by-line (e.g., Printed Oversize Tee ৳250 + UV Sunglasses ৳150 + Bracelet ৳100 = ৳500 Total). Conversational Banglish Persona: Speaks in warm, respectful, and relatable Banglish/Bengali ("আপনার জন্য ৫০০ টাকায় দারুণ কিছু সেরা ট্রেন্ড সাজিয়েছি!"). Local Bargaining & Market Intelligence: Provides real-world negotiation secrets and market tips for New Market, Gawsia, Elephant Road, Farmgate overbridge, Mirpur 1, and Chittagong's Territy Bazar. Interactive ৳500 Combo Planner: An interactive tool to mix-and-match fashion items, track remaining budget in real-time, and get instant AI color matching advice. Voice & Audio Controls: Native speech-to-text input (Bengali/English) and text-to-speech audio playback for hands-free market shopping. Save & Bookmark Deals: Local bookmarking to save favorite recommendations and bargaining tips. 🛠️ How we built it Frontend Core: React 19, TypeScript, and Vite for fast performance and smooth user experience. Styling & UI: Modern Elegant Dark theme styled with Tailwind CSS v4, Lucide React icons, and motion for layout transitions. AI Integration: Integrated Google’s @google/genai TypeScript SDK utilizing high-speed Gemini models (gemini-3.6-flash and gemini-flash-latest) with custom system instructions. Zero-Backend Architecture: Standardized as a pure client-side SPA with browser localStorage persistence, making it instantly deployable to Vercel or GitHub Pages without server maintenance overhead. Interactive Polish: Integrated canvas-confetti celebrations for completed budget combos and browser Web Speech APIs for voice interaction. ⚡ Challenges we ran into Model Fallbacks & API Error Prevention: Ensuring uninterrupted client-side API requests across different Gemini model aliases (gemini-3.6-flash, gemini-flash-latest) and providing helpful Bengali error messages with custom key setup guides when permissions or keys fail. Strict Budget BDT 500 Constraint: Crafting system prompts to keep the AI focused strictly on Bangladesh street market pricing and line-by-line item cost breakdowns under ৳500 BDT. Mobile-First Market Usability: Designing a dark, high-contrast, eye-safe mobile UI with single-line chip controls that works comfortably in outdoor sunlight while shopping. 🏆 Accomplishments that we're proud of True Hyper-Local AI Context: Created an AI assistant that feels like an experienced local friend from Dhaka or Chittagong rather than a generic global chatbot. Zero-Backend Client Autonomy: Built an app that runs entirely in the browser with full offline state persistence for saved deals and custom API key configuration. Polished Elegant Dark Aesthetic: Combined emerald green neon accents, glowing status indicators, and clean typography for a dark mode interface. 🎓 What we learned How to write effective system instructions for regional price reasoning, culture-specific slang, and local market knowledge. Techniques for handling Gemini model fallbacks gracefully on client-side React apps. Best practices for combining Web Speech APIs with AI responses for hands-free mobile interaction. 🔮 What's next for Budget Buddy 📸 Image-Based Outfit Matcher: Allowing users to snap a photo of a clothing rack or shirt in a market and ask BudgetBuddy if it's worth ৳300-৳500. 📍 Live GPS Market Finder: Auto-detecting the user's nearest market (e.g., Mirpur 1 vs. Chandrima) and showing instant location-based street food and fashion deals. 👥 Community Deal Sharing: Allowing users to post real ৳500 street finds and bargain victories to a shared community deal board