Fitd | Devpost

Inspiration

We wanted to know what kind of fashion works where. Scrolling through Fashion Week coverage, we kept noticing how differently the same season plays out by city — and wanted a way to explore that geographically instead of just reading about it.

What it does

Fitd turns fashion discovery into something you spin, not scroll. An interactive 3D globe lets you click real cities — New York, London, Paris, Lagos, Nairobi, Tokyo, Shanghai, Sydney, Rio de Janeiro — and pull up real Fashion Week photos for that city, with a year selector going back to 2015. Click a desert, rainforest, savanna, marine, or wetland region instead, and get AI-generated clothing safety advice for that environment. Alongside the globe, a personal AI closet lets you photograph your own wardrobe (auto-tagged by Gemini), ask an AI stylist to build an outfit from what you actually own, get your fit rated, or check if your outfit is biome-appropriate. Live styling sessions run over Vonage Video.

How we built it

Vanilla JS frontend (no framework, no build step) with a from-scratch Three.js globe — a real satellite Earth texture overlaid with a canvas-drawn grid and biome regions. Node/Express backend calling Gemini for wardrobe tagging, stylist reasoning, and outfit rating, and Serper.dev for live Fashion Week image search (after learning mid-hackathon that Google's Custom Search API is closed to new customers and Bing's Search API line was fully retired in 2025). Vonage Video API powers live sessions. Each visitor's wardrobe lives in their own browser's localStorage rather than shared server state, so the whole thing works for many hackathon attendees hitting the same deployed URL at once. Deployed on Google Cloud Run with a GitHub-triggered Cloud Build pipeline for continuous deployment, built collaboratively by a two-person team pushing to the same live branch throughout the day.

Challenges we ran into

We hit two dead-end APIs before landing on Serper for real fashion images. A CORS-blocked external image host silently broke the globe's rendering (half the sphere rendered solid black) until we traced it to a missing Access-Control-Allow-Origin header. A sign error in our UV-to-latitude math meant biome click detection was quietly inverted. And a CSS specificity bug made a new lightbox always visible regardless of its hidden attribute — our own custom display rule was beating the browser's default. Merging two people's concurrent changes to the same core file, live, all day, was its own challenge.

Accomplishments that we're proud of

We pivoted the entire product direction mid-hackathon — from a plain wardrobe app to an interactive geo-fashion globe — without losing a single working feature along the way. We're proud of shipping real, live Fashion Week photography by city and year (not mocked data), a hand-built Three.js globe with genuine biome-based safety advice, and a two-person team continuously deploying to one shared live URL without stepping on each other's work.

What we learned

Verify a vendor API is actually available before you design around it — two of our planned data sources turned out to be dead ends we only caught by checking primary sources. Keeping the server stateless and letting the browser own its own data (localStorage) made a multi-user hackathon demo trivial instead of a scaling problem. And small bugs — a flipped sign, a CSS specificity fight — can silently break a feature in ways that look completely fine in the code; always verify visually.

What's next for Fitd

A live "Style Check": stand in front of your camera over Vonage Video while Gemini scores your outfit against real runway looks from whatever city and year you're browsing. Beyond that: more cities, deeper trend data, and real accounts so your wardrobe follows you across devices instead of living in one browser.