AuraFit

Inspiration

Shopping for clothes in Canada often means opening many different brand apps—Lululemon, Nike, Aritzia, The North Face—and searching the same thing over and over. There's no single place where you can search once and see results from many brands. We wanted to build AuraFit: one search bar, results from multiple retailers, and two extra features that are hard to find elsewhere—real customer reviews pulled from the community (e.g. Reddit) and AI try-on so you can see how an item might look on you before buying.

What we learned

We learned how to wire a React frontend to a FastAPI backend, handle CORS for local development, and design APIs that accept either file uploads or image URLs so the browser doesn't hit cross-origin limits when loading product images. We also integrated third-party APIs (SerpApi for Google Shopping, fal.ai for virtual try-on) and kept the UI simple and consistent across homepage, search results, product detail, and wishlist.

How we built it

We split the work into frontend and backend.

Frontend (React, TypeScript, Vite): a homepage with trending items, a search results page that calls our API, a product detail page (gallery, size selector, "Go to official website," wishlist, and "Try it on with AI"), an AI try-on page (upload photo + body metrics → generated try-on image), and a wishlist page backed by localStorage.
Backend (FastAPI, Python): a search endpoint that uses SerpApi to return product title, price, store, image URL, and link; and a try-on endpoint that accepts a user photo and a garment image (file or URL), calls fal.ai to generate the try-on image, and returns it along with recommended size and BMI. We fixed CORS for the dev frontend origin and let the server fetch garment images by URL so the client never has to load external product images directly.

Challenges we faced

CORS: The try-on flow initially failed because the frontend tried to fetch product images from Google's CDN; we switched to sending the image URL to the backend and having the server download the image.
Merge conflicts: After a teammate merged UI/color updates into main, we had to resolve conflict markers in HomePage.tsx and SearchResultsPage.tsx and keep both our features (wishlist link, trending section, product cards) and their new colors.
Wishlist and navigation: We added a shared wishlist (React Context + localStorage), made the heart icon on the homepage and search page link to the wishlist, and made the product detail "Add to wishlist" button toggle that global list so the whole flow stays consistent.