Inspiration

Our idea came from a friend who was about to study abroad but had tinea versicolor on his back. He struggled to apply medication properly because he couldn't see the affected areas. This made us wonder: what if technology could guide him through the process?

What it does

DermaCare uses computer vision to detect affected areas on the back, track the user's index finger, and provide real-time voice guidance for medication application. It also provides medication reminders, schedules, and treatment progress tracking.

How we built it

We started with the idea, mapped out the user flow, and built a front-end prototype first. We then developed the backend, database, and computer vision features with the help of Claude. The prototype uses React, Tailwind CSS, MediaPipe, WebRTC, Canvas API, Web Speech API, and LocalStorage.

Challenges we ran into

The biggest challenge was making computer vision work reliably in real-world conditions, especially detecting skin areas under different lighting and accurately tracking finger movement. We also had to design the guidance flow to feel intuitive for users.

Accomplishments that we're proud of

We're proud that we turned a simple real-life problem into a working web prototype with an end-to-end treatment flow, from detecting affected areas to guiding application and tracking completion.

What we learned

We learned a lot about browser-based computer vision, MediaPipe, real-time camera processing, and how to design effective prompts and workflows when working with AI coding tools.

What's next for DermaCare

We plan to build dermatologist-validated datasets and trained AI models for more accurate lesion detection, support more skin conditions and body areas, and add personalized treatment plans and deeper progress analytics.