AI Engineering: Advent of AI with goose Day 8

[MyrinNew]

Day 8: Vendor Directory Magic – From Unorganized Data to Emerald Glassmorphic Directory Web Application for Organization


What if you could take a chaotic, typo‑ridden vendor list and instantly transform it into a polished, emerald‑themed directory app that feels like it was built by a full design team? Day 8 was all about turning raw, unstructured data into a machine‑readable, glassmorphic, festival‑ready experience powered by clean JSON, validation scripts, and a beautifully responsive UI.





How did I do this... well I built a dazzling vendor directory that turns unstructured lists into an interactive, searchable, ultra-professional web application, complete with JSON validation, live stats, and amazing design.


Day 8: Vendor Directory Magic 🟩🥙


Tackling Vendor Chaos – The Festival Challenge


Every winter festival has one: the last-minute Excel sheet of vendors fragmented, typo-ridden, half-complete.


My Day 8 mission: Transform that chaos into a machine-readable, beautiful, accessible directory app that anyone could use—attendees, staff, vendors.


💡 Solution: The Vendor Directory AI Powered Web Application





What It Does

• Parses messy lists into clean structured JSON (dmitris-sanity-saver.json)

• Validates data for missing/invalid fields (Python script FTW!)
• Creates a gorgeous, live-search web app (winter-festival-vendors.html)
• Professional, glassmorphic UI that feels worthy of a world-class festival
• Run locally with Node or Python - no config, just open and go!
• Clean JSON from messy data. Machine-readable format. Silly filename. Properly structured.

🛠 Tech & Tools

• HTML5 & Vanilla JS (dynamic filtering, no frameworks needed)
• CSS3: Glassmorphism (backdrop-blur), emerald/dark theme, smooth animations
• Font Awesome: Professional icons everywhere
• Inter Font: Sleek, readable typography
• Python: verify_json.py for rock-solid data validation
• Node.js: Simple server.js for serving in a snap

🎨 Design Highlights

• Dark emerald + teal highlight theme for instant "wow"
• Glassmorphic cards with depth, hover effects, and blurred backgrounds
• Responsive grid/flex layout (desktop, mobile, tablet all look stellar)
• Stats dashboard on top: see vendor totals, cuisine breakdown, location heatmap (if data allows)
• Accessible tab order, focus styles, and color contrasts
• Professional touches: real iconography, print-friendly, no external dependencies

My Experience: Building the Dream Directory

• Started with a batch of scattered vendor notes and CSV exports
• Used Goose and a few prompts to auto-structure into JSON (the "sanity saver")
• Ran the Python validator - caught missing cuisine and typos, so much easier than manual checks!
• Built out the web UI: made search buttery fast and filtering a breeze (no extra NPM build tools)
• Played with color palettes until the site looked as good as it worked
• Tested on phone, tablet, laptop, always flawless, thanks to pure CSS3 magic

Who Benefits?

• Festival attendees: Quick search for food, location, cuisine, venue map
• Staff & volunteers: No more sorting out vendor chaos at the info desk
• Vendors: See themselves in a professional light; more foot traffic guaranteed!
• Anyone reusing it: School fairs, farmers markets, conferences, art shows—you name it!

Lessons Learned

• Glassmorphism + dark themes = instant modern feel
• Structured data unlocks ALL the goodies: responsive UI, stats, accessibility
• You don’t need frameworks for high-quality results
• Data validation is simple but critical-1 bad entry can break the experience
• Always design for fast search/filter - attendees will LOVE it

How To Use

1. Gather vendor data (any format)
2. Convert using Goose prompts or script to dmitris-sanity-saver.json
3. Validate with python verify_json.py
4. Open winter-festival-vendors.html (locally or via server)
5. Enjoy, share, and even print your directory!

Powered By

• goose by Block
• Pure Python & JavaScript logic
• My AI and UI obsession 😆 I absolutely love it!

Final Thoughts

Turning an unorganized vendor list into an interactive, beautifully designed web experience with stats, search, and style felt like a true upgrade for the festival. Day 8 highlighted the real-world power of thoughtful data transformation paired with modern, AI‑powered accessible design. It proved that when clean data, intentional UX, and a touch of AI magic come together, even the messiest vendor list can become a stunning, professional directory that elevates the entire event.


Day 8: Complete. Directory: Beautiful. Crowd: Happy!


This post is part of my Advent of AI journey - AI Engineering: Advent of AI with goose Day 8 of AI engineering challenges.


Follow along for more AI adventures with Eri!




More...