Lyfth.me

AI-Powered Personal Fashion Stylist

Comment

Lyfth.me — AI-Powered Personal Fashion Stylist

Inspiration

The fashion industry has long struggled with a fundamental problem: personalization at scale. While AI has revolutionized recommendations in music and movies, fashion remains largely one-size-fits-all. People waste hours scrolling through products that don't suit their body type, style preferences, or lifestyle.

We were inspired to build Lyfth.me — an AI-powered personal stylist that democratizes fashion expertise, making personalized style accessible to everyone, not just those who can afford a real stylist.

What It Does

Lyfth.me is a mobile-first web application that analyzes users' body types and style preferences to deliver hyper-personalized fashion recommendations. The app:

  • Guides users through an 8-question style quiz covering gender expression, age, style vibes, occasions, colour preferences, fit, and budget
  • Collects 3 body photos (front, side, back) with pose guidance for body type analysis
  • Simulates AI processing to generate a comprehensive style profile with body type classification and seasonal colour palette
  • Delivers a curated discovery feed of 40+ fashion products with "Why this works for you" explanations
  • Enables wishlist management with total cost calculation and outfit grouping
  • Implements service worker caching for lightning-fast repeat visits

How We Built It

We architected Lyfth.me using a modern React + TypeScript stack with shadcn/ui components and Tailwind CSS for a premium editorial aesthetic.

Frontend Architecture

Layer Technology
State management Zustand with localStorage persistence
Routing React Router (11 screens)
Progressive loading Intersection Observer API
Caching Service Workers (cache-first, 7-day expiry)

Backend & Data

  • Supabase for authentication, PostgreSQL database, and image storage
  • Custom image compression using the Canvas API — uploads converted to WEBP format (max 1 MB)
  • Row Level Security (RLS) policies for user data protection
  • Mock AI analysis with hardcoded style profiles, ready for ML integration

Design System

  • Colour palette: warm gold #C9A84C + deep navy #1A1A2E
  • Typography: Playfair Display (serif headings) + DM Sans (body)
  • 24px grid system, 20px border radius, 300ms transitions
  • Mobile-first, optimized for portrait screens

Performance Model

Our caching strategy reduces repeat-visit load times by approximately 90%. The cache hit rate is defined as:

$$\text{Cache Hit Rate} = \frac{\text{Cached Requests}}{\text{Total Requests}} \times 100\%$$

With our implementation, we achieved approximately 75% cache hit rate after the first visit, using two separate cache namespaces: lyfth-v1-images and lyfth-v1-static.

Challenges We Ran Into

Image Performance

Loading 40+ high-resolution product images caused slow initial render times. We solved this with:

  • loading="lazy" attributes on all product images
  • Progressive rendering — 12 items initially, +8 on each scroll trigger
  • Fade-in transitions to mask loading states and maintain perceived performance

Service Worker Complexity

Implementing cache-first strategies while keeping data fresh required careful design. We created separate caches for images and static assets, with automatic size management to prevent storage bloat from growing unbounded.

Type Safety in the Quiz Flow

TypeScript surfaced errors on dynamic key access within the quiz state object. We resolved this with explicit type assertions:

question.key as keyof QuizAnswers

This maintained full type safety while supporting dynamic question rendering across all 8 quiz steps.

Authentication Flow

Adapting Supabase's email-based auth to a username-only login required simulating email addresses (username@lyfth.me) and disabling email verification — a pragmatic hack for the hackathon context, with a proper auth flow planned for production.

Mobile-First Adaptation

The original spec was designed for React Native. We adapted it to a web-based mobile-responsive experience using Tailwind's responsive utilities and container queries — maintaining the premium native feel without requiring app store distribution.

Accomplishments We're Proud Of

  • Complete user journey — all 11 screens built with seamless navigation, from splash to product detail
  • Premium design system — editorial-quality aesthetics with custom colour tokens and typography
  • Performance excellence — 90% faster repeat visits through intelligent service worker caching
  • Real product data — 40+ real fashion images integrated via image search API (zero placeholders)
  • Production-ready code — zero lint errors, full TypeScript coverage, proper error handling throughout
  • User control — cache management UI showing real-time storage status with one-tap clearing

What We Learned

Technical Insights

  • Service Workers are powerful but demand careful lifecycle management and version control — stale cache bugs are silent and painful
  • Progressive loading dramatically improves perceived performance even when total load time is similar
  • Zustand's simplicity makes it ideal for small-to-medium apps vs. Redux's boilerplate overhead
  • Image optimization (lazy loading + compression + caching) is the single highest-impact performance win available

Design Lessons

  • Mobile-first design forces prioritization of core features and produces a cleaner information hierarchy
  • Skeleton loaders outperform spinners for maintaining user engagement during async operations
  • Subtle animations — 300ms transitions, fade-ins — create a premium feel without ever becoming a distraction

Product Strategy

  • Onboarding friction (8 questions + 3 photos) is acceptable when the value proposition is communicated clearly upfront
  • "Why this works for you" explanations are not a nice-to-have — they build trust in AI-generated recommendations
  • A wishlist with a live cost calculator transforms passive browsing into actionable, intentional shopping

What's Next for Lyfth.me

Short-term — MVP+

  • Real AI integration — replace mock analysis with computer vision models for body type classification and colour palette extraction
  • Affiliate integration — connect Shop Now buttons to real e-commerce platforms (Amazon, Shopify partners)
  • Social sharing — style profile cards shareable to Instagram and Pinterest with custom Open Graph images
  • Push notifications — alert users when new products match their saved style profile

Medium-term — Growth

  • Predictive prefetching — use browsing patterns to preload likely-next products in the service worker background
  • Virtual try-on — AR overlay to visualize products on the user's own body using their uploaded photos
  • Outfit builder — drag-and-drop interface to compose complete looks from recommended pieces
  • Community features — follow other users, share outfits, discover style inspiration

Long-term — Scale

  • Brand partnerships — direct integrations with fashion labels for exclusive curated recommendations
  • Personal stylist chat — AI chatbot for real-time style advice and product questions
  • Premium tier — unlimited style refreshes, priority access to new arrivals, and advanced analytics
  • Sustainability scoring — rate every product on ethical sourcing and environmental impact

Technical Roadmap

  • Migrate to Next.js for server-side rendering and better SEO
  • Implement GraphQL for more efficient and flexible data fetching
  • Add Sentry for error tracking and real-time performance monitoring
  • Build native mobile apps in React Native for App Store and Google Play distribution

The future of fashion is personal, accessible, and AI-powered. Lyfth.me is just the beginning.

Built With

Share this project:

Updates