DressCode

Inspiration

Beyond our shared passion for computer science, our team has a deep-rooted enthusiasm for fashion. One team member even plans outfits weeks, sometimes months, ahead! Discussing fashion’s role in our daily lives brought up a common challenge: deciding what to wear. While outfit selection seems straightforward, it involves considering numerous factors like the occasion, the weather, and—most crucially—how well different pieces work together. This insight inspired us to streamline the outfit-selection process. We created a digital companion that not only helps you interact with and visualize your closet but also provides tailored recommendations and feedback. Our online closet feature allows you to view, add, and organize your wardrobe seamlessly from anywhere.

What it does

DressCode is your personal style companion, designed to make outfit selection easy, intuitive, and perfectly tailored to your closet. It offers a complete virtual closet experience, allowing you to upload and organize all your clothing items by category, like tops, bottoms, shoes, and accessories. By storing these items in an online database, DressCode provides quick access to your wardrobe from anywhere, making it easy to plan outfits on the go.

But DressCode goes beyond storage—it actively assists you in choosing outfits. With our "Generate Fit" feature, you can specify the occasion and weather, and DressCode will suggest an outfit that considers your selections. You can even choose certain pieces you want to include, while our built-in LLM will suggest complementary items to complete the look. The "Ask Your Closet" feature further personalizes your experience, allowing you to interact with your wardrobe by asking questions, like how many of a specific type of item you have or if you own something similar to a new piece you’re considering.

Our app integrates with both Anthropic and NLX AI to deliver intelligent outfit recommendations based on your style preferences, while connecting the front and backend using MongoDB ensures all data stays secure and accessible only to you. This cohesive approach makes DressCode both a digital wardrobe organizer and an AI-powered stylist, helping you make fashion decisions that align with your unique style, weather, and occasion requirements.

How we built it

Creating DressCode was daunting initially due to the range of features we envisioned. To manage the scope, we broke the project down into discussions, task division, and a prioritized feature list. Once we mapped out our goals, we launched a basic Node.js project with Mantine, adding pages and buttons to navigate through them as a skeleton structure. From there, we focused on building each feature in stages:

Key Features: Login/Register When users visit DressCode, they start on the login/register page, where we securely store each entry in our MongoDB database. If someone attempts to log in with an unrecognized email, they’re prompted to register. Once registered, users can log in and out seamlessly with their credentials. To prioritize security, we hash passwords upon registration.

Your Closet Upon logging in, we use each user’s unique ID to reference their specific wardrobe items. On the "Your Closet" page, users can upload and view stored items. When uploading, users select a category (e.g., Tops, Bottoms, Shoes), give the item a name, and add an image. Each item is stored in MongoDB under the user’s ID, ensuring privacy and exclusive access to their closet.

Generate Fit This main feature generates personalized outfits based on user-input variables. Users specify the occasion and weather, then select any clothing items they want included or leave the choice to us. When they click "Generate," our Anthropic LLM processes the request to create an outfit that meets their requirements, pulling items from their closet.

Ask Your Closet Our final page features the NLX chatbot, which answers questions about the user’s closet, like "How many tops do I have?" or "Do I have anything similar to [insert image of blue baggy jeans]?" Implementing this feature required detailed testing to ensure NLX provides accurate responses, making it an intuitive assistant.

Technical Considerations Each feature required careful planning to ensure smooth interaction with our backend server, which continuously accesses MongoDB to provide context for our features. For instance, "Ask Your Closet" and "Generate Fit" involve dynamically updating prompts to give the LLM the context of what the user has available. This approach has effectively served as a lightweight implementation of Retrieval-Augmented Generation (RAG) for us.

Challenges we ran into

Creating DressCode was ambitious for our team, especially since we came in with minimal experience in web app development, no background in integrating LLMs or NLX, and limited knowledge of databases or frontend-backend connectivity. This hackathon has been packed with "firsts" for all of us, making DressCode both challenging and immensely rewarding. Here's what we tackled along the way:

Learning Mantine for a User-Friendly Interface One of our early challenges was using Mantine to craft an intuitive, visually appealing interface. We had to familiarize ourselves with various Mantine components, mastering how to store and manipulate user inputs to make the experience both functional and inviting.

Implementing MongoDB Working with MongoDB, our first-ever database, posed its own hurdles. Setting up our backend and establishing frontend-backend connections was complex at first. Once we accomplished this setup, the next step—retrieving and storing data efficiently in MongoDB—required us to navigate new ground and adapt quickly.

Integrating Anthropic LLM and NLX Our largest technical hurdle was implementing the Anthropic LLM and NLX chatbot. This was uncharted territory for us, and the setup was far from straightforward. We spent considerable time studying documentation, understanding API details, and overcoming integration issues. The challenge was not only in making these platforms work together but in ensuring a smooth user experience between backend functionality and a polished frontend interface.

In sum, coordinating multiple platforms, navigating extensive documentation, and combining backend elements with a cohesive frontend tested our abilities—but ultimately, each challenge became an invaluable learning opportunity. We’re proud of what we achieved with DressCode and excited about how much we’ve grown through this process.

Accomplishments that we're proud of

This hackathon pushed us beyond our comfort zones in every way, and we’re proud of what we achieved—both individually and as a team. Here’s what stands out the most:

Taking the Leap to Compete Competing in a hackathon with so many talented participants was intimidating, but we pushed ourselves to dive in, test our limits, and grow through the experience. Submitting a complete project at the end was a milestone we’re incredibly proud of.

Turning “Impossible” into Possible When we started, many features seemed out of reach, yet we managed to implement them one by one. From integrating login/registration, generating custom outfits, and enabling interaction with the “Ask Your Closet” bot, to setting up an online closet with seamless upload options, each feature represents a significant achievement.

Overcoming Challenges with Innovation For each hurdle we faced, we devised creative solutions, often spending hours or days perfecting our approach. Whether it was connecting MongoDB to our app, implementing the LLM and NLX chatbot, or refining the UI, we managed to overcome each technical barrier through collaboration and perseverance.

Building a Project We’re Passionate About Most importantly, we’re proud to have built something we genuinely care about. This project reflects our passions for both fashion and technology, combining them in a way that feels meaningful and impactful to us.

The journey was full of new experiences, late nights, and breakthroughs, and we’re thrilled with the outcome of our hard work.

What we learned

This hackathon was a fast-paced journey of learning, full of insights and new skills. Here are the most valuable lessons we took away from it:

The Power of Delegation and Collaboration We learned the importance of dividing tasks and assigning each team member a specific component to develop. By breaking down the project into manageable parts, we ensured that every area—from backend functionality to UI design—received focused attention. This delegation also kept our progress steady, despite the project's complexity. Collaboration helped us leverage each other’s strengths, and combining those strengths meant we could build something far beyond what we imagined.

Iterative Development Through Trial and Error Developing DressCode was an iterative process, and each step involved a lot of trial and error. From setting up MongoDB and configuring the backend to implementing LLMs and integrating UI components, we learned that errors are simply part of the journey. Each mistake helped us learn, improve, and optimize our code, and ultimately made our project more resilient.

The Value of Mentorship and Reaching Out When we hit roadblocks, mentors and friends were invaluable resources. Asking for help, learning from others’ experiences, and seeking fresh perspectives saved us time and helped us overcome tricky challenges. This hackathon showed us the importance of reaching out and not trying to solve every issue alone.

Technical Skills with Real-World Applications As newcomers to web development, we learned how to implement a full tech stack, integrating technologies like MongoDB, Mantine, and NLX for the first time. Building an interactive closet with an LLM-based chatbot and generating personalized outfits involved understanding APIs, databases, and frontend-backend communication. Each tool we used brought us closer to creating a cohesive app, and we learned to make these systems work together in harmony.

Resilience and Innovation Under Pressure Finally, this hackathon taught us resilience. We learned to face complex issues head-on, stay calm under pressure, and find creative solutions when initial ideas fell short. Working with deadlines pushed us to be resourceful and think outside the box, ultimately giving us confidence in our ability to tackle difficult problems.

Overall, this experience taught us that teamwork, persistence, and a willingness to learn are essential ingredients to overcoming challenges and creating something meaningful. We walk away from this project not only with new technical skills but with a deeper understanding of how to learn, adapt, and grow as a team.

What's next for DressCode

We're excited to keep growing DressCode with features that make it even more personalized, insightful, and user-friendly. Here’s what’s on the horizon:

Personalized Ads Aligned with Your Style We plan to introduce an ad system that aligns with each user’s style, based on their closet and outfit choices. These ads would only showcase clothing and accessories that fit your tastes, helping you find pieces that genuinely match your aesthetic.

Outfit Memory Database for Enhanced Recommendations We envision adding a new database where users can save and rate outfits they’ve worn and loved. By training our Anthropics integration on this database, we can tailor outfit suggestions even more precisely to each user's favorite styles, colors, and combinations.

Affiliate Links for Clothing Recommendations When using the "Ask Your Closet" feature to search for similar items or new clothing ideas, we want to include affiliate links to trusted fashion retailers. This would provide a seamless shopping experience by connecting users directly to clothing pieces that match what they’re looking for, helping them find items they love while supporting DressCode’s growth.

These enhancements aim to make DressCode a go-to personal stylist, providing not just outfit suggestions but an all-encompassing style experience!