← Back to Portfolio

Featured Project

Skinstric AI Demographics Experience

A polished AI-inspired demographic experience featuring animated onboarding flows, camera permissions, responsive layouts, image upload states, and high-fidelity frontend interactions built to mirror a production design reference.

Next.jsReactTypeScriptResponsive UI
Skinstric AI Demographics Experience

Case Study

01

The Problem

Recreate a polished AI-powered demographic analysis experience that matched a professional reference design while supporting camera access, image upload, loading states, and responsive layouts.

02

My Approach

I built the project with Next.js, React, and TypeScript, breaking the experience into reusable pages and components. I focused on matching the reference layout closely, refining animation timing, improving mobile responsiveness, and making the camera and upload flows feel smooth and intentional.

03

Challenges

  • Replacing the selfie route and language with a cleaner camera-based flow.
  • Handling browser camera permissions and fallback warning states.
  • Matching the diamond-based layout, connector lines, hover states, and spacing from the reference design.
  • Improving lower-resolution responsiveness without breaking the desktop layout.
  • Creating loading and skeleton states so the experience felt more production-ready.
04

Results

  • Delivered a high-fidelity frontend experience that closely matched the project reference.
  • Improved my ability to translate a visual design into responsive production UI.
  • Built stronger confidence with Next.js routing, component structure, and deployment on Vercel.
  • Created a portfolio-ready project that demonstrates polished frontend execution, animation, and UX detail.