AI Engineering: Advent of AI with goose Day 8
Source: Dev.to
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 My Experience: Building the Dream Directory 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! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - 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. - 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 - 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 - 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 - 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! - 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 - Gather vendor data (any format)
- Convert using Goose prompts or script to dmitris-sanity-saver.json
- Validate with python verify_json.py
- Open winter-festival-vendors.html (locally or via server)
- Enjoy, share, and even print your directory! - goose by Block
- Pure Python & JavaScript logic
- My AI and UI obsession 😆 I absolutely love it!
