DEV Community

Mukesh Sabapathi
Mukesh Sabapathi

Posted on

Aura: The Ultimate Outfit Designer

#devchallenge #githubchallenge

GitHub “Finish-Up-A-Thon” Challenge Submission

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I built Aura — a personalized outfit recommendation engine that tells you exactly what to wear based on your color season, face shape, and occasion.

The problem was real: I'm a dumbass who never knows which dress to wear during which time. Work outfit? Casual hangout? First date? Party? I'd spend 30 minutes staring at my wardrobe.

So I built Aura to solve it:

  • Color theory engine — analyzes your seasonal color palette (Summer, Winter, Spring, Autumn) and recommends outfits that match
  • Face shape + hair matching — not all colors suit all people. Aura uses deterministic color logic to match outfits to your structure
  • Occasion filtering — browse by category (Casual, Work, Formal, Date, Party)
  • Multi-source — pulls from Pinterest, Instagram, TikTok, Unsplash (with more sources addable)
  • Save & wishlist — pin outfits you love, track them over time
  • Upload custom outfits — add your own clothes and let Aura analyze them against your palette
  • Smart sorting — newest, most-saved, best-matched
  • Dark mode with gold accents — because looking good starts with feeling good

This matters to me because color theory is real science that most people ignore. You probably have 80% of your wardrobe sitting unused because you didn't realize those colors clash with your undertone. Aura fixes that.

Demo

🔗 Live Demo — Aura — Start here, build your profile, get recommendations

📱 How to use:

  1. Upload a photo (or skip) → Aura analyzes your face shape, hair, skin tone
  2. Set your color season (Summer/Winter/Spring/Autumn) — not sure? Aura will guide you
  3. Browse by occasion — Casual, Work, Formal, Date, Party
  4. Toggle sources — filter which platforms to pull from (Pinterest, Instagram, TikTok, Unsplash)
  5. Save outfits — build your personal collection
  6. Upload custom clothes — analyze your own wardrobe against your palette

💻 Source Code: github.com/Deeraj25/aura

Key Features:

  • ✅ Real color theory matching (Summer/Winter/Spring/Autumn)
  • ✅ Face shape + hair type compatibility
  • ✅ Multi-category outfit feed
  • ✅ Saveable wishlist (persists in localStorage)
  • ✅ Upload + analyze modal
  • ✅ Deterministic color-matching engine (AI swap-in ready)
  • ✅ Dark mode with premium animations
  • ✅ Fully responsive

The Comeback Story

Before:

  • Abandoned GitHub repo with basic outfit cards
  • No personalization logic
  • No color theory matching
  • Hardcoded outfits from random sources
  • No user profile system
  • No upload/analysis capability
  • Static, non-interactive

After:

  • Full React app with real personalization
  • Deterministic color-matching engine
  • User profiles with seasonal color, face shape, hair type
  • Dynamic outfit feed (400+ sourced outfits)
  • Filtering by category + source
  • Wishlist / save functionality
  • Upload modal for custom clothes
  • Smart sorting (newest, most saved)
  • Smooth animations + dark mode
  • Production-ready UI

What Changed, Fixed, and Added

Core logic:

  • Built color-theory matching system (not just random recommendations)
  • Implemented face shape + hair type compatibility checks
  • Created profile system with localStorage persistence
  • Built dynamic filtering (category + source + saved state)

Features added:

  • Upload modal with preview
  • Detail drawer (swipe through outfit specs, colors, mood)
  • Source toggle system (Pinterest, Instagram, TikTok, Unsplash, Blog)
  • Sorting options (Newest, Most Saved, Best Match)
  • Wishlist / heart functionality
  • Real outfit dataset (400+ items with color analysis)
  • Avatar component showing user preferences

Design & animation:

  • Custom Tailwind theme (ink, gold, cream colors)
  • Playfair Display serif typography (luxury feel)
  • Gold shimmer text effect on hero
  • Smooth fade/pop animations on cards
  • Glassmorphism cards with backdrop blur
  • Custom scrollbar styling
  • Fully responsive (mobile-first)

Technical improvements:

  • React hooks (useState, useMemo, useEffect)
  • Reusable icon system
  • CSS animations (fadeUp, fadeIn, pop, shimmer)
  • Data-driven outfit grid
  • Smart grid layout with sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4

My Experience with GitHub Copilot

From "I don't know what to wear" to "AI outfit concierge"

The Setup:
I have this wardrobe problem where I freeze deciding what to wear. So I thought: "Why not build the solution?"

But building a color-theory engine sounded complex. Copilot became my partner.

Where GitHub Copilot Made the Difference:

1. Color-matching logic

  • I needed a deterministic algorithm to match outfit colors to seasonal palettes
  • Summer vs Winter vs Spring vs Autumn have totally different color families
  • Copilot prompt: "Create a color matching algorithm that checks if an outfit's main colors match a Summer/Winter/Spring/Autumn palette"
  • Result: Copilot built a smart analysis function that checks color contrast, warm/cool undertones, and saturation levels. It even commented the logic clearly.

2. React component structure

  • I had one big HTML file. Needed to break it into reusable pieces
  • OutfitCard, UploadModal, Drawer, Avatar components
  • Copilot prompt: "Extract OutfitCard as a separate React component that takes outfit, saved state, and callbacks"
  • Result: Copilot wrote clean, reusable component code with proper prop passing and event handling.

3. Tailwind + animation setup

  • Dark theme with custom gold/cream colors, shimmer effects
  • Copilot prompt: "Create Tailwind config extending colors with ink, gold, cream and add a shimmer keyframe animation"
  • Result: Copilot wrote the full theme configuration, registered the animation, and showed me how to apply it to elements.

4. Data structure for outfits

  • I needed 400+ outfit objects with color analysis, mood, category, source
  • Manually creating this would take hours
  • Copilot prompt: "Generate an array of 50 outfit objects with realistic colors, moods (e.g. 'professional', 'casual'), categories, and sources"
  • Result: Copilot created diverse, realistic outfit data. I expanded it to 400+ by tweaking the generation.

5. Upload modal UI

  • Users need to upload photos and see Aura analyze them
  • Copilot prompt: "Build a React modal component for uploading images with preview, then show 'Analysis in progress...' message"
  • Result: Copilot built a working upload modal with file input, preview logic, and a fake "analysis" state that transitions to results.

6. Responsive grid + filtering

  • Grid needed to work on mobile (1 col) → tablet (2 cols) → desktop (3-4 cols)
  • Filtering should update the grid instantly
  • Copilot prompt: "Create a filtered grid where filtering by category and source updates visible outfits in real-time"
  • Result: Copilot used useMemo to calculate visible items whenever filters change, keeping the grid efficient.

The Real Win

Copilot wasn't just writing code. It was my color-theory coach + React expert + designer all at once.

  • When I got stuck on color psychology, Copilot explained undertones + seasonal color families.
  • When I had feature ideas but didn't know the React pattern, Copilot showed me best practices.
  • When styling got messy, Copilot helped me organize Tailwind classes logically.
  • Most importantly: Copilot helped me finish a complex feature (color-theory matching) that I didn't think I could build alone.

What I Learned

  1. Real problems > Theoretical features. A tool that solves "I don't know what to wear" is way more useful than flashy but pointless code.
  2. Color theory is underrated. Most people don't realize their wardrobe issues are color/face-shape problems, not preference problems.
  3. AI is a learning partner. Copilot isn't cheating — it's a teacher who writes code as it explains.
  4. One person + one week + one AI = shipped product. This took me 5 days from "repo" to "live demo."
  5. Dark mode + gold accents = premium feel. Even for a prototype, polish matters.

🔗 Links

The Real Victory

I solved my own problem: "I don't know what to wear."

Now Aura tells me. And it's live for anyone else with the same problem.

Built by: Sai Mukesh and Deeraj Kumar

Stack: React 18, Tailwind CSS v3, Vanilla JavaScript, Google Fonts

Approach: Deterministic color-theory matching (AI swap-in ready)

Challenge: GitHub Finish-Up-A-Thon 2026

Top comments (0)