Stylora

Inspiration

Stylora was inspired by the everyday struggle many people face when choosing what to wear for different occasions. Most styling platforms feel generic or overwhelming, and many users simply want quick, personalized guidance. The idea was to combine AI intelligence with real shopping options so anyone can receive instant outfit suggestions that match their style and can be purchased easily through Shopee.

What it does

Stylora collects user preferences such as gender, occasion, and styling choices, then generates a complete outfit recommendation using the Anthropic Claude API. Each result includes clothing items, color palettes, style tips, and Shopee product previews so users can buy the items they do not have. The platform also stores user history through Supabase, allowing them to revisit previous looks.

How we built it

Stylora was built using the latest version of Next.js for the frontend and server-side logic. Styling was implemented entirely with SASS and SCSS to maintain full design flexibility. Supabase was used to store user profiles and outfit history. The Anthropic Claude API powers the outfit generation by analysing user inputs and producing structured, personalized recommendations. A Shopee search generator was added so each item in the outfit can be previewed and purchased directly.

Challenges we ran into

One of the major challenges was designing prompts that produced consistent and clean outputs from the AI. Ensuring that each outfit result could be interpreted by the frontend required careful formatting. Another challenge involved generating useful Shopee search links, since product titles can vary widely. Integrating SCSS into a structured Next.js environment also required thoughtful planning to maintain organization and maintainability.

Accomplishments that we're proud of

We are proud of creating a platform that feels both practical and enjoyable to use. The integration of AI-driven styling with real-world shopping options through Shopee greatly improves the user experience. We are also proud of achieving a clean and responsive UI using SASS and building a reliable backend system through Supabase. The final product successfully combines creativity, AI intelligence, and functional design.

What we learned

Throughout the Hackathon, we learned how fun and fast it can be to build creative ideas using AI-powered tools. Working with AI helped us experiment, iterate, and turn concepts into working features much quicker than expected. We also discovered how important user experience, creativity, and teamwork are when building something engaging like Stylora. Overall, the hackathon taught us that with the right tools and mindset, even small teams can bring bold ideas to life in just less than 24 hours.

What's next for Stylora

Future plans for Stylora include adding community-driven feature inspired by Pinterest where users can upload their outfit of the day and let other users to comments and spread loves. We also would like to add a more advanced outfit scoring system, generating alternative styles for the same occasion, improving color palette intelligence, and providing real-time trend analysis. As well as, planning to enhance the Shopee product previews and introduce a personalized style profile that evolves as users continue to interact with the platform.

Built With

• anthropic
• anthropic-claude-api
• claude
• javascript
• next.js
• node.js
• sass-and-scss
• scss
• supabase
• typescript
• vercel