OOTD (Outfit of the Day)

Feed Page
Top 3 OOTD Page
Shop Page
Shop Page with Try On Feature
Create a Post, Try on Saved Outfits

Inspiration

Imagine buying an outfit you think looks good online, only to find it in the back of your closet after wearing it once—forgotten, unworn, and eventually tossed out. This is the reality for countless purchases fueled by impulsive buying, contributing to the millions of tons of textile waste that end up in landfills every year.

The fast fashion industry thrives on this cycle, encouraging quick purchases without considering long-term value. We created OOTD (Outfit of the Day) to break this pattern. OOTD uses an AI-powered virtual try-on tool to help users see how clothes will look before buying, making it easier to make mindful, thoughtful decisions. It’s not just about reducing waste—it’s about discovering styles you truly love, getting outfit inspiration, and embracing sustainable fashion in a fun, engaging way.

What it does

Welcome to OOTD (Outfit of the Day), your ultimate fashion companion designed to promote mindful shopping and reduce textile waste. Our app revolutionizes the way you approach fashion by offering key features that help you make thoughtful purchasing decisions while keeping your style fresh and inspiring.

The standout feature of OOTD is the AI-Powered Virtual Try-On Tool, which allows you to see how clothes will look on you before making a purchase. This feature helps eliminate the guesswork of online shopping, reducing the likelihood of impulse buys that often end up unworn and discarded. By visualizing outfits in real time, you can make more confident, sustainable choices.

In addition to the virtual try-on, OOTD offers an Outfit Inspiration Feed where you can discover new styles, explore trending looks, and see how others are styling their clothes. This community-driven feature encourages creativity and helps you make the most out of the pieces you already own, reducing the need for constant new purchases.

Each of these features is designed to inspire conscious fashion choices, combining fun and creativity with sustainability to help you look good and feel good about what you wear.

How we built it

For the development of OOTD, we utilized a comprehensive tech stack to create an engaging, efficient, and user-friendly experience that promotes mindful shopping and sustainability.

Backend Development

Supabase - For cloud services including real-time database management, user authentication, and secure data storage.

GenAI - FshnAI API - Powers the AI-driven virtual try-on tool, enabling realistic outfit visualization for users.

Frontend Development

Next.js - For building a fast, responsive, and SEO-friendly progressive web app optimized for mobile and desktop users.

Tailwind CSS - For sleek, responsive UI design with minimal code and consistent styling.

Figma - For UI/UX design, wireframing, and prototyping to ensure an intuitive and visually appealing layout.

shadcn - For building accessible, customizable UI components with a modern design aesthetic.

Challenges we ran into

While developing OOTD, we ran into some key challenges, especially with cross-platform compatibility and team coordination. Making sure the app worked seamlessly on different browsers and devices wasn’t easy—it took a lot of responsive design tweaks, progressive enhancement strategies, and thorough cross-platform testing. On the collaboration side, juggling everyone’s conflicting schedules made it tough to stay aligned. To manage this, we relied on asynchronous communication tools, kept clear documentation, and used a strong Git workflow. These strategies helped us overcome the hurdles and build a cohesive, well-functioning app.

Accomplishments that we're proud of

We’re proud of the clean, responsive user interface that offers an intuitive and engaging experience across devices, with features like swipeable cards and seamless navigation. Our effective use of APIs, especially Next.js’s built-in API routes, enabled efficient data handling and scalability. Most importantly, our strong work ethic marked by consistent progress, problem-solving, and teamwork—helped us overcome technical challenges and bring our vision to life.

What we learned

We learned a lot about API integration, especially in securely handling API keys and making efficient requests. Using Next.js API routes allowed us to manage backend logic within the same framework as the frontend, improving performance and simplifying deployment. We gained experience in structuring API calls to handle dynamic data effectively and learned the importance of environment variables for securely storing API keys. Additionally, we worked on optimizing API requests, managing rate limits, and implementing error handling to ensure a smooth user experience even when external APIs faced issues. This helped us understand how to build secure, scalable applications that rely on external data sources.

What's next for OOTD (Outfit of the Day)

What's next is more focused on expanding its features, improving user engagement, and enhancing scalability. We plan to integrate personalized outfit recommendations using machine learning to suggest styles based on user preferences and past interactions. Adding social features like comments, likes, and user profiles will create a more community-driven experience. We also aim to introduce an in-app marketplace where users can buy, sell, or trade outfits, promoting sustainability. Enhancing the AI-powered virtual try-on feature for greater accuracy and diversity, along with improved API integrations for real-time data updates, will be key. Lastly, optimizing the app’s performance and security will ensure it can scale effectively as the user base grows.