← Back to Projects
Skinstric.AI
Frontend Engineer
Tech: React, OpenAI Vision API, CSS, Three.js (UI flourishes), Vercel. Main issues were inference latency and robust error states for user images. I added progressive UI states, client-side checks, and smaller payloads. Result: prototype measured ~98% detection on an internal set with typical round-trip ≈1–2s on desktop.
Key Highlights
- Integrated OpenAI Vision API for advanced image analysis
- Built responsive React interface with Three.js animations
- Implemented progressive UI states for better UX
- Optimized image payloads for faster processing
- Deployed on Vercel with continuous integration
Problem
Dermatological consultations are expensive and time-consuming, making professional skin analysis inaccessible to many. Users need quick, accurate skin condition assessments without waiting for appointments or paying high consultation fees.
Solution
Developed a cutting-edge AI-powered skin analysis platform using OpenAI's Vision API. Implemented real-time image processing with progressive loading states, robust error handling, and optimized payload management for fast, accurate skin condition detection.
Technical Challenge
OpenAI Vision API had unpredictable latency spikes ranging from 500ms to 5 seconds. Large image uploads failed on mobile networks. Three.js animations caused performance issues on mid-range devices.
Technical Solution
Implemented client-side image compression using Canvas API to reduce payload by 70% before upload. Created a request timeout with retry logic and fallback analysis methods. Optimized Three.js scenes using LOD (Level of Detail) and requestAnimationFrame throttling based on device performance metrics.
Results
- Achieved 98% detection accuracy on internal test set
- Reduced round-trip time to 1-2 seconds on desktop
- Implemented comprehensive error handling for edge cases
- Created smooth user experience with progressive loading
- Successfully deployed production-ready prototype