Outfitle - Smart Virtual Wardrobe

You still think you don't have anything to wear?

Comment

Inspiration

Outfitle is inspired by one of our team member's daily frustration, a feeling that many can relate to. Each day brings the question of what to wear and the realization of how much we overlook in our own closets. Instead of buying another piece, Outfitle encourages users to look first into their virtual wardrobe, helping them make the most of what they already own before spending within their budget.

What it does

Outfitle is a wardrobe assistant that helps manage clothing inventory and simplifies outfit choices. Users can get AI outfit recommendations based on weather and events. Set a budget, visualize new and existing pieces, and receive donation reminders for clothes not worn in overtime.

How we built it

Outfitle was built on React as framework. For styling, we used Tailwind CSS together with shadcn/ui to create clean, accessible components. Animations were handled through Framer Motiontransitions, while Lucide React provided a cohesive icon system. We implemented React Router DOM for client-side navigation, Recharts for visualizing data and trends, and React Quill for a rich text editing experience. Additional libraries like date-fns and React Hook Form supported efficient date handling and form management, with React Leaflet integrated for map features when needed.

For data and API integration, we used the Fetch API to connect with backend functions and external services, including InvokeLLM for AI-powered outfit recommendations and the Google Calendar API to align wardrobe planning with user schedules.

On the backend, Outfitle runs on a PostgreSQL database with automatic REST API generation from defined entities. The serverless runtime Deno Deploy powers our backend functions, enabling fast and lightweight execution. Authentication and calendar synchronization are handled through Google OAuth ensuring a secure and seamless user experience.

Challenges we ran into

  1. Simplifying and prioritizing the complex features that the team initially had from the application idea
  2. Lack of Technical Background – None of us had hackathon experience.
  3. ⁠API Integration Issues – The Google Calendar API didn’t work as expected, leading us to create a new in-app event feature for users instead.

Accomplishments that we're proud of

  1. Developed a working prototype of Outfitle despite having little to no knowledge of developing.
  2. We gathered user experiences that helped us along the way in building the application.
  3. We assessed the ESG&SDG score to ensure the sustainability of the application.
  4. We reached out to mentors and other hackers for support

What we learned

  1. In terms of Hackathon, the importance of working on the base project first and then later on adding the complexities thanks to the Mentors
  2. The current AIs (gemini, claude, chatgpt) are powerful assistants that help accelerate users in developing their ideas from scratch.
  3. Understand how to collaborate with people from different backgrounds and cultures
  4. Different AI Chat assistants have different specialty. ChatGPT was better in general tasks but Gemini gave better natural responses. Claude was the best in generating code while making Base44 as the base of the application.

What's next for Outfitle

  1. Campus Collaboration & Expansion – Partner with universities in Vancouver such as UBC and SFU, then expand to the U.S. through student communities.
  2. Outsourcing – Outsource technical development to Asian countries to achieve a better balance between cost and profit.
  3. Continuous Improvement – Maintain and update the app’s features over the long term to ensure a smooth and evolving user experience.

Github Link:

https://github.com/Patrick-Salazar/Outfitle

Share this project:

Updates

Submission history