AI Pro Shop Assistant

Noteefy is a revenue management platform serving 800+ golf courses worldwide, automating waitlists, reducing no-shows, and capturing booking demand. The AI Pro Shop Assistant is an embeddable chatbot that course operators add to their websites via a script tag, giving golfers 24/7 access to tee time bookings, waitlist enrollment, and course FAQs without involving pro shop staff.

I joined with a fixed deadline already set and defined the frontend architecture and implementation plan before writing a line of code. Then I built the widget from scratch: UI, integration layer, and embed packaging, all in a sprint-based cycle with a distributed international team.

The AI Pro Shop Assistant interface: golfers ask questions and book tee times directly in the chat.

The Constraints

The widget runs inside any golf course website with no control over the host's CSS or JavaScript environment. Hundreds of different sites, each with its own theme and stylesheet, could silently break the same widget in different ways.

Delivery had a fixed deadline from day one. Before implementation could start, the team required a frontend architecture proposal covering component structure, styling strategy, embed mechanism, and integration approach, which I drafted and presented to align everyone on the plan.

Integration against Noteefy's own backend, which manages the AI conversation engine and connects to tee sheet systems, added coordination overhead across time zones throughout the sprint.

The Build

Built the complete widget using React and Vite, with Material UI providing the component system for the chat interface and UI elements.

Style isolation came from CSS Modules scoped via Vite: hash-based class names prevented collisions between the widget and host sites, so rendering stayed correct regardless of the host theme. Delivery followed the same self-contained logic. The widget ships as a bundle injected via a JavaScript snippet clients add to their site's <head>, with no assumptions about the host's framework or toolchain.

Noteefy API integration: the widget communicates with Noteefy's backend for AI-powered responses, live tee time availability, and waitlist enrollment

The assistant is live in production across Noteefy's client network of golf courses.

AI Pro Shop Assistant live on a client golf course website

The widget embedded and live on a Noteefy client's website.

Technologies

React: widget UI and component architecture
Vite: bundler; enabled CSS Modules scoping for style isolation across host environments
Material UI: component library for the chat interface and UI elements
CSS Modules: scoped class names preventing style collisions with host site themes

Technical Highlights

CSS Modules scoped through Vite isolated widget styles from any host theme without pulling in the overhead of Shadow DOM, and the resulting bundle carried no dependency on the host site's framework, build tools, or CSS reset. Delivery ran in fixed sprints with a distributed international team spread across time zones.