BaristaVoice

• 

  Page after a few orders

• 

  Loaded page

Inspiration

In a high-volume morning coffee rush, every second counts. Traditional point-of-sale (POS) systems force baristas to spend valuable time tapping complex modifiers like "oat milk flat white" or "extra hot vanilla latte" into slow, rigid touchscreen menus. This manual bottleneck slows down queue lines and causes human entry errors. Furthermore, café managers have zero visibility over raw ingredient depletion or unexpected milk spillage until they suddenly run out of a crucial item mid-rush.

I was inspired to build BaristaVoice to fix this. My goal was to blend the hands-free speed of localised voice dictation with an analytical back-of-house tracking tool, helping small business café operations protect their speed, order accuracy, and profit margins.

What it does

BaristaVoice is a fully responsive, voice-controlled Kitchen Display System (KDS) featuring integrated real-time inventory telemetry.

• Hands-Free Capturing: Baristas tap a single primary mic action button and dictate customer orders naturally into their device.
• Instant Queue Routing: The app processes the incoming text stream and immediately generates an active, dismissible kitchen ticket card on the screen.
• Live Material Telemetry: The moment a drink is parsed, BaristaVoice calculates the underlying recipe and dynamically subtracts the precise weights and volumes (grams of espresso beans, milliliters of whole milk or oat milk) from a live visual dashboard.
• Hardware Warning Indicators: If any specific ingredient inventory level drops beneath a critical operating threshold, the telemetry system triggers automated visual alarm flags to prevent menu outages.

How I built it

To keep the application lightning-fast and ready to deploy on any low-cost tablet device, I intentionally bypassed heavy frameworks and external cloud servers. I structured BaristaVoice using a clean, three-pillar architecture:

1. Pillar 1 - The Voice Capture Engine: Built using the native HTML5 browser Web Speech API. This handles local microphone audio processing with zero external API costs.
2. Pillar 2 - The Recipe & Parser Logic: Written in pure, vanilla JavaScript. It cleans text strings, handles isolating plant-based modifier flags, and maps the results against a relational menu recipe dictionary.
3. Pillar 3 - The Live UI State: Built with structured Semantic HTML and custom flexbox layouts in an external stylesheet. This manages the responsive 50/50 side-by-side split screen dashboard, updates active DOM queue cards, and drives smooth, automated resource progress bar width transitions.

Challenges I ran into

My biggest challenge was handling asynchronous browser speech telemetry streams. Initially, the Web Speech API would send multiple intermediate text chunks as a phrase was spoken. This caused our parsing engine to double-match keywords and trigger duplicate tickets (such as loading two dairy lattes alongside an oat latte for a single command).

I solved this logic bug by writing a dedicated string-cleaning pipeline that filters out plant-milk modifiers first and introduces a strict processing lock-flag. The system now engages a temporary engine freeze the moment a valid menu pattern is detected, ensuring exactly one clean kitchen ticket is printed per dictation session.

Accomplishments that I'm proud of

• 100% Native Codebase: I built a fully functional, highly responsive automation tool using nothing but standard JavaScript, semantic HTML, and CSS. No npm install, no heavy dependencies, and no bloated compilation requirements.
• Fluid UI Transitions: I managed to get the custom progress bars to drain smoothly using CSS cubic-bezier transition curves, making the stock tracking look premium, fluid, and production-ready.
• Bug Resolution: Ironing out string-matching overlaps to completely separate an "oat latte" from a "standard latte" without breaking our dictionary lookup loops.

What wI learned

I learned a great deal about the lifecycle of the browser's audio capture APIs, specifically how to handle final vs. interim streaming results. I also gained a deep practical understanding of managing system state entirely on the client side, showing how simple mathematical objects can drive immediate visual feedback in a UI layout without relying on heavy backend databases.

What's next for BaristaVoice

• Advanced Multi-Language Speech Parsing: Upgrading from local browser tools to dedicated models like OpenAI's Whisper API to parse complex accents and multi-item orders flawlessly.
• IoT Weight Integration: Connecting our inventory tracking functions directly to physical Bluetooth-enabled scale sensors placed beneath the espresso hopper and pitcher-rinsing grates.
• Predictive AI Restocking Analytics: Using local historical sales records to forecast when a shop will hit critical stock depletion thresholds based on time-of-day and weather trends.

Built With

• css
• html
• javascript