Aura: The Ultimate Outfit Designer

Mukesh Sabapathi — Sun, 07 Jun 2026 19:27:23 +0000

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:

Upload a photo (or skip) → Aura analyzes your face shape, hair, skin tone
Set your color season (Summer/Winter/Spring/Autumn) — not sure? Aura will guide you
Browse by occasion — Casual, Work, Formal, Date, Party
Toggle sources — filter which platforms to pull from (Pinterest, Instagram, TikTok, Unsplash)
Save outfits — build your personal collection
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

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

🔗 Links

Live Demo: https://deeraj25.github.io/aura
Source Code: github.com/Deeraj25/aura
My GitHub: @pylearne

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

DEV Community: Mukesh Sabapathi