DermaAid

Your one-stop shop for all things dermatology!

Comment

Inspiration

Skin problems affect millions worldwide, from minor irritations to life-threatening conditions like melanoma. Most people cannot identify symptoms, understand product ingredients, or know which dermatologist to consult, leading to delayed treatment and worsened conditions. Online information is fragmented, full of jargon, and often unreliable. Early detection is critical, yet accessible guidance is lacking.

What it does

DermaAid addresses this gap by providing a single, accessible platform for education, early screening, and actionable guidance, aligning with the EdHealth theme: “Web Apps That Teach & Heal.” Ingredient Analyser: Detects harmful product components via OpenAI API.

How we built it

We built DermaAid using ReactJS for a fast, interactive frontend. AI features include OpenAI API for symptom guidance and a TensorFlow model, converted to TensorFlow JS, for client-side melanoma detection. We integrated a product ingredient analyzer, a dermatologist locator, and a skin conditions database, all within a user-friendly interface.

Challenges we ran into

Integrating TensorFlow JS for melanoma detection into React was technically complex, especially ensuring accurate client-side performance. Coordinating OpenAI API calls alongside image analysis required careful handling to avoid latency and rate-limit issues. Designing a UI that balances interactivity, accessibility, and clarity for all users also presented significant challenges.

Accomplishments that we're proud of

We successfully built an all-in-one dermatology platform combining AI skin analysis, ingredient scanning, condition education, and dermatologist discovery. The integration of TensorFlow JS and OpenAI API provides actionable, personalized guidance. The mobile-first, interactive design makes the platform engaging, accessible, and educational, fulfilling both technical and user-experience goals. We managed to make it a fully-functional web app accessible from any device.

What we learned

We gained hands-on experience in AI integration, React development, and web-based machine learning. We learned to optimize client-side models, manage APIs efficiently, and design intuitive, accessible interfaces. Beyond technical skills, we understood the importance of user-centered design, balancing accuracy, usability, and engagement in a healthcare-focused web platform.

What's next for DermaAid

Supporting the detection of other types of skin-related problems, e.g. dry skin, rashes, etc. Building scalable in-house AI systems without having to rely on external API calls. Better integration with dermatologists' across the world to deliver a more seamless healthcare experience. We would also aim to make the website more responsive across other device sizes.

Built With

Share this project:

Updates