About La Mode Collective

Inspiration

One day, a teammate woke up feeling too lazy to put together an outfit and wanted an easy way to avoid outfit repetition. That’s when the idea struck: a website that could assemble outfits for you from your own closet!

What It Does

When users visit La Mode Collective, they’re greeted by a landing page featuring the app's name, an 'About Us' section, and an avatar icon for login options. Once logged in, users access a digital closet with the following interactive features:

• Add Clothes: Upload photos of clothing items to build a personalized virtual closet.
• Outfit Generation: The center of the screen displays outfits created from the user’s uploaded wardrobe, simplifying outfit planning.
• Save Outfit Pair: Users can save favorite outfits, which appear in the ‘hanger area’ for easy access.
• Hanger Area: Displays saved outfits. Users can browse all liked outfits by clicking here.
• Interactive Drawers: Three drawers on the left side of the closet offer different functionalities. Only one drawer can open at a time.
  • First Drawer: Contains the Outfit Generator, enabling users to mix and match items effortlessly.
  • Second Drawer: Features the Power Matching Quiz, a style-based quiz to help personalize outfit suggestions.
  • Third Drawer: Serves as a Wardrobe Viewer, displaying all items in the user’s virtual closet for easy browsing.

This setup creates a visually engaging digital closet experience, transforming outfit planning into an interactive, customized process.

How We Built It

Frontend: Built using Next.js (React) and Tailwind CSS.
Authentication: Managed by Firebase Authentication / Auth0.
Backend: Built on Firebase Firestore and Firebase Storage.
Deployment: Hosted on Vercel with .Tech DNS.

Challenges We Faced

• Configuring the frontend and implementing animations.
• Learning and integrating Auth0.
• Displaying interactive items from the database.

Accomplishments We’re Proud Of

• Our creative UI design and animation.
• The dedication and teamwork that allowed us to accomplish so much in a short time.

What We Learned

We learned how to kickstart and develop a project with time constraints, gaining experience in JavaScript, animations, and new technologies.

What’s Next for La Mode Collective

Looking forward, we plan to add features to make the app even more intuitive and user-focused:

• Chatbot Assistance: A chatbot to answer questions about the app’s functionality.
• Weather-Based Outfit Suggestions: A location-based weather API for climate-suited outfits.
• Power Matching Quiz: A style quiz to refine personalized suggestions, creating a Pinterest-style mood board.
• Enhanced Clothing Organization: Improved sorting and categorization options for better wardrobe management.
• Sophisticated UI Design: Consistent UI enhancements for a polished and engaging user experience.

These future additions will make La Mode Collective the ultimate tool for seamless, personalized digital wardrobe management.

Built With

• .tech
• auth0
• firebase
• firestore
• next.js
• tailwind
• vercel