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.
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
Case Study
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.
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.
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.