Aura Style & Care

1. Landing Page & Input: Aura Style & Care landing page with instant image analysis input.
2. AI Diagnostics: Real-time AI skin diagnostic dashboard powered by YouCam API.
3. Styling Recommendations: Personalized color palette and apparel recommendations.

Inspiration

The inspiration behind Aura Style & Care stemmed from a simple observation: skincare diagnostics and fashion styling are almost always treated as completely separate silos. Consumers often figure out their skincare needs through apps or dermatologists, and then independently try to guess what clothing colors, cuts, or styles match their personal aesthetic and natural features.

I wanted to bridge this gap by creating an all-in-one ecosystem where health meets style; leveraging computer vision to evaluate skin wellness and immediately translating those insights into hyper-personalized apparel and color palette recommendations.

What it does

Aura Style & Care is an AI-powered platform that performs advanced skin analysis and pairs the results with a curated personal styling engine.

AI Skin Diagnostics: Processes user images to evaluate key skin metrics (such as texture, hydration, spots, and overall clarity) with high precision.

Visual Mapping & Insights: Provides clear, actionable health breakdowns and visual metrics.

Personalized Styling Engine: Translates skin undertones and features into bespoke clothing and color coordination recommendations.

Lightning-Fast Experience: Delivers full end-to-end cloud processing and responsive UI rendering in under two seconds.

How I built it

I designed Aura Style & Care for speed, scalability, and modern web standards:

Frontend & Architecture: Built using Next.js 16 (App Router) and React for optimized server-side rendering and client performance.

Styling & UI: Styled with Tailwind CSS to create a sleek, modern, dark-mode-first aesthetic.

Type Safety: Written entirely in TypeScript to ensure robust component props and clean codebase maintenance.

Core Intelligence: Integrated the Perfect Corp YouCam API suite securely through backend API route proxies to process high-accuracy skin data without exposing client secrets.

Deployment & CI/CD: Hosted globally on Vercel with automated GitHub continuous deployment.

Challenges I ran into

Building and deploying a production-ready application under tight hackathon conditions came with its hurdles:

Deployment Sync & Build Errors: Early on, my initial deployment ran into directory mapping errors when syncing my local structure with GitHub. I had to carefully restructure my workspace to ensure the Next.js app directory and config files were properly committed and recognized by Vercel.

Framework Updates & Deprecations: Navigating Next.js 16 configuration updates required me to refactor deprecated properties in next.config.ts (such as moving away from inline ESLint configuration keys) to achieve clean, warning-free builds.

API Security & Payload Management: Designing secure server-to-server proxy routes to handle image URLs and process diagnostic responses seamlessly without lagging the UI required careful asynchronous state management.

Accomplishments that I'm proud of

Successfully integrating a complex commercial-grade computer vision API (Perfect Corp YouCam) into a clean, intuitive web app.

Achieving a zero-warning, lightning-fast production build deployed live on Vercel.

Crafting a cohesive, luxury-grade user interface that treats personal care and fashion styling as an integrated holistic journey.

What I learned

Serverless Architecture Nuances: Gained deeper appreciation for how Next.js App Router handles server-side execution and API route security.

Rapid Iteration: Learned how to diagnose and resolve cloud build failures efficiently using deployment logs and Git workflows.

AI Integration Best Practices: Discovered how vital clean data parsing and error-handling wrappers are when working with third-party computer vision endpoints.