I/O highlights tracker: from export zip to glass dashboard
Transforming an AI Studio Google I/O highlights tracker into a dark glassmorphism dashboard in a single session.
An AI Studio export that generated fictional Google I/O 2025 headlines via Gemini — recon'd, rescued, and redesigned with dark glassmorphism in a single overnight session. The interesting parts: the app worked out of the box (rare), the design pivot came from "don't be boring," and the biggest bug was human — forgetting to git push after a full visual overhaul.
Timeline
Started the AI Studio recon workflow on a Google I/O highlights tracker — an app that generates fictional conference announcements via Gemini and renders them in a card grid. The export compiled clean on the first npm install && npm run build — zero TypeScript errors, zero missing deps — which is rare for AI Studio zips. But the security model was broken from birth: vite.config.ts used a define block to inline process.env.API_KEY as a string literal into the client bundle, meaning any deployed build would bake the Gemini key into publicly downloadable JavaScript. The app worked, though: 8 source files, 652 lines of TypeScript, Vite + React 19 + Tailwind 3 + @google/genai SDK. Hit the Gemini 2.5 Flash endpoint with a mega-prompt that asks the model to generate plausible I/O announcements grounded via Google Search, parse the JSON response, group by category, and render timestamped cards with status badges. Shipped a recon report and moved on to the real work.
Came back to the I/O tracker at 1 AM to finish the rescue — fix the repo, get real screenshots, make it not look like a scaffold. The plan was straightforward: update the Gemini model to stable gemini-2.5-flash, capture screenshots with dummy data fallback, clean up the README. Then the user said "don't be boring, and don't use purple," and the scope tripled. Redesigned everything with dark glassmorphism — backdrop-filter: blur(20px), rgba(255,255,255,0.04) surfaces, teal/blue/coral/amber palette, staggered card entrance animations, shimmer skeleton loading states. Deleted the dead constants.ts, fixed Tailwind content globs that were scanning node_modules (CSS dropped from 40KB to 16KB), created a proper .env.example. Captured 56 Playwright frames at 2× Retina and assembled a 2.4MB demo GIF. Everything looked great locally. Then the user came back 11 hours later and the GitHub repo still showed the old broken screenshots. The problem? Never committed and pushed. All 14 modified files sat as unstaged local changes. The single most embarrassing failure mode: it works on my machine, but I never shipped it. Fixed it, pushed it, and wrote a /learn rule so it never happens again.