️ CymbalMart Shopping Agent: Intelligent Event Planning & Budget Curation

Fri, 18 Sep 2026 09:44:43 +0000

This is a submission for the MLH x DEV Writing Challenge ✨

"Transforming chaotic party preparation into an effortless, intelligent, and real-time budgeting experience."

Introduction & Inspiration

Planning events can often feel stressful, chaotic, and hard to budget. Whether you are organizing a corporate team-building event, a children's birthday party, or an outdoor wedding, keeping track of guest counts, item inventories, and expenses usually ends up in a messy, overwhelming spreadsheet. ❌

Why Build CymbalMart?

Traditional event planners force users to manually hunt for items, calculate bulk quantities, and manually adjust expenses row-by-row when things change. I wanted to design an application that acts like a proactive co-pilot—taking natural language prompts, instantly structuring inventories, mapping items to store aisles, and recalculating the total budget dynamically.

To solve this, I built the CymbalMart Shopping Agent ✨—an intelligent, interactive party planning and shopping assistant designed to convert event requirements into curated, budget-conscious shopping lists with real-time adjustments and voice integration.

Core Features Overview

Feature Name	Description	Impact
Smart Event Curation	Instantly generates tailored shopping lists based on party type, theme, guest count, and budget constraints.	Eliminates manual planning guesswork and speeds up initial setup.
Interactive AI Assistant	Features a built-in conversational chat interface (`CymbalMart Assistant`) for on-the-fly modifications.	Allows natural, human-like adjustments during the planning phase.
Dynamic Budget Recalculation	Automatically updates and recalculates total expenses and item quantities in real time.	Keeps event planners strictly within their target budget thresholds.
Hands-Free Voice Control	Integrated voice command capabilities to navigate menus and add items without touching a keyboard.	Offers accessibility and seamless multi-tasking while planning.

Demo & Application Showcase

Here is a visual walkthrough of how the application modules are structured, designed, and executed:

1. CymbalMart Shopping Agent Dashboard

The central hub where users initiate event curation, theme configuration, and guest count parameters.

2. Interactive Shopping Mart Views

Browse through curated store inventories and item selections tailored specifically to your event theme.

And

3. Dynamic Shopping Lists & Budget Tracking

Automatically updates expenses, quantities, and item availability in real time as modifications are made.

Organizes items by store aisles and resource categories to make physical or online shopping seamless.

5. Batch Recipes & Curation

Bundle recipes and ingredients efficiently for food and beverage planning.

6. Hands-Free Voice Control

Navigate menus, add items, and adjust parameters entirely hands-free using integrated voice commands.

7. Event Planning Timeline

Keep track of milestone tasks leading up to the event date to ensure nothing gets missed.

Explore the Codebase: You can check out the full source code, component architecture, and documentation directly on the Cymbal Shopping Agent

️ Tech Stack & Architecture Deep Dive

To build a fast, responsive, and intelligent agent interface, I utilized a modern, robust tech stack engineered for high performance and smooth client-side reactivity.

⚙️ Technology Stack Breakdown

Layer / Component	Technology Used ️	Implementation Details ⚙️
Frontend Architecture	`React`, `TypeScript`, `Tailwind CSS`	Ensures a modular, component-driven UI with responsive design systems and custom interactive modals.
AI & Agent Integration	LLM Agent Frameworks, Natural Language Prompts	Powers the conversational assistant to parse loose user text and map it to structured inventory arrays.
State Management	React State hooks & TypeScript interfaces	Handles asynchronous budget recalculations instantly whenever quantities shift or items are added.

Architectural Patterns Used

Component-Driven Modular Design: The app is broken down into clean, isolated components (components/ directory) handling specific concerns like modals, chat drawers, dynamic list grids, and timeline trackers.
Deterministic State Derivation: Instead of storing duplicate calculated values (like total aggregate costs), the state relies on immutable array reducers that compute subtotals, taxes, and quantity tiers on the fly.

Working with these technologies taught me a lot about synchronizing complex state management with natural language processing pipelines, ensuring that the user experience remains lightning-fast and error-free. ⚡

Engineering Challenges & Solutions

Building an agentic shopping assistant from scratch came with unique design hurdles. Here is how I tackled them:

Challenge Faced	Solution Implemented ️
Real-Time Budget Sync	Used deeply typed TypeScript state management to listen for quantity modifications and instantly trigger recalculation hooks without lag.
Natural Language Parsing	Configured context-aware prompt templates that map unstructured user prompts into clean item and category objects.
Responsive UI Layouts	Implemented Tailwind CSS grid systems to ensure clean presentation across mobile, tablet, and desktop viewports.

Overcoming State Propagation Latency

When users interact with the CymbalMart Assistant to alter guest quantities (e.g., jumping from 20 to 50 guests), updating every dependent recipe ingredient and store aisle subtotal simultaneously could cause UI stutter. To fix this, I implemented optimized React state hooks that batch updates and memoize expensive lookup arrays using custom calculation helpers.

Future Enhancements & Roadmap

To take the CymbalMart Shopping Agent to the next level, here are a few exciting features planned for future updates:

Future Milestone	Objective & Description
Multi-Store Price Comparison	Integrate live retail APIs to compare item prices across different local supermarkets automatically.
Collaborative Shared Rooms	Enable real-time multi-user editing so families or event planning teams can manage lists simultaneously via WebSockets.
Export to PDF & Calendar	Allow users to download formal itemized budget sheets and export milestone reminders straight to Google Calendar.

Hackathon Experience

Building the CymbalMart Shopping Agent was an intense and deeply rewarding journey! Bringing an agentic AI application from a rough concept into a fully functional, interactive web app pushed me to refine my skills in React state management and UI/UX design.

The biggest highlight was successfully integrating the hands-free voice control and watching the dynamic budget recalculate instantly when interacting with the AI assistant. It really highlighted how powerful modern web technologies and AI agents can be when combined to solve everyday friction points.

Thanks for reading! If you have any feedback, questions, or want to collaborate on agentic web applications, drop a comment below. Don't forget to leave a ❤️ and share this post! ✨

Coder Legion - Recent posts tagged mlhacks