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:
The central hub where users initiate event curation, theme configuration, and guest count parameters.
Browse through curated store inventories and item selections tailored specifically to your event theme.
And
Automatically updates expenses, quantities, and item availability in real time as modifications are made.
4. Aisle Resources & Smart Navigation
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! ✨
