Speculum

login_page
speculum_main_page
wardrobe_page
wardrobe_shirts_shelf

Inspiration

We wanted to make outfit planning fun, visual, and effortless. Everyone has stared at their closet thinking “I have nothing to wear”, even when it’s full. We were inspired by digital mood boards and design tools like Canva, and wanted to create something similar for fashion. It's a drag-and-drop space where users can style looks from their own wardrobe.

What it does

Speculum is a web app that lets users upload items from their wardrobe and then create custom outfits using a visual canvas. Users can drag and drop clothing items, layer pieces together, and save outfit combinations for specific days or occasions. It’s like having a virtual stylist and closet planner all in one place.

How we built it

We built Speculum using React for the frontend, ensuring a smooth and responsive drag-and-drop experience. The styling and layout were crafted with CSS for a clean, modern interface. We designed a virtual canvas where users can position and layer clothing items freely. User-uploaded wardrobe items are stored and displayed dynamically, making each experience personal. For our database, we used Firebase to store the outfits and categorized them into outfit styles. We also used Gemini to help sort the clothes users upload into their "style" and remove the backgrounds from their pictures.

Challenges we ran into

Getting the include the drag-and-drop functionality to feel natural and fluid within the canvas, handling image uploads and connecting it to Firebase, and managing state updates efficiently when users rearrange or delete items.

Accomplishments that we're proud of

We are proud of creating a fully interactive wardrobe canvas from scratch in React. We were also able to design a clear and cohesive UI. We made it look like there are actual wardrobe shelves, and when the user clicks on one, they can open the shelf.

What we learned

We deepened our understanding of React’s state management and event handling. We also learned how to work with dynamic image rendering and manage user uploads. We also had to set up a Google Cloud account that connects to Firebase, and we learned a lot about using GCP tools.

What's next for Speculum

We have many features we want to introduce. We want the shopping page to show clothes that the user can "temporarily" add to their wardrobe and try on. We can do this by integrating the Gemini Virtual Try On API.