DermAlr

Inspiration

As someone who struggles with eczema, hives, and acne on a daily basis, I know how difficult it is to manage the skin condition without knowing what triggers them. I’ve been in this situation many times, and I wanted to create something that allows users to track patterns and log changes in skin and routine (such as new products) to analyze data, predict flare-ups, and provide actionable insights, not just for the user but also to share with a dermatologist. DermAlr makes it easier to map all the dots between weather, triggers, symptoms, and medication used to give users an app to take control of their skin instead of just reacting as it flares up.

What it does

DermAlr helps people with skin conditions understand what’s making their skin worse and predict when flare-ups may happen. The app takes information from the user about their location and current skin condition (severity and triggers) and analyzes whether a user’s location is impacting their skin by analyzing conditions like humidity, UV levels, pollen, and air quality. Using AI (powered by Groq’s Llama 3.3 70B model) DermAlr identifies the current risks and predicts if the severity of your skin condition will go up or down (depending on the weather and your current severity). It also offers personalized recommendations and a treatment plan, both generated by an AI that analyzes data. Users can also submit daily check-ins, which gives DermAlr more data about their skin condition and allows it to make a more thorough and accurate analysis.

Challenges we ran into

I experienced many technical difficulties when programming my app. First, I had to learn Firebase from scratch to develop the backend of my app. This was difficult for me because I didn’t have any past experience with Firebase and needed to understand how to structure the database, handle data updates, and integrate it into the Next.js frontend. Another difficulty was rendering the app so that it displays well on different devices (laptops and phones), which required me to learn the CSS framework and test it on multiple screen sizes. Lastly, I experienced performance issues, as the AI took several seconds to process the data, leaving users staring at a blank screen. To solve this, I added a loading screen with a progress bar so the AI had enough time to process the data, and the user could see the app was actively working on analysis before displaying the results.

What's next for DermAlr

If I were to create a 2.0 version of my app, I would make a few improvements. First, I would add notifications so that users can be alerted when weather conditions or pollen levels are high and can trigger flare-ups, and this gives users enough time to take preventative actions to protect their skin. Second, I would like to add medical tracking and past history, making it easy for users to access what medication they used for different skin conditions in the past, along with images of that medication and reminders for when users need to apply medicine. Third, I would add error handling, which would handle any additional errors and clean logging messages. Lastly, I would add community insights, which uses anonymous data from people in similar climates (or in the same area) to detect local triggers and give more accurate predictions for the user’s specific area.

Built With

• firebase
• groq
• next.js-15
• powered-by-groq's-ai
• pulling-live-data-from-weatherapi.com
• react-19
• secured-with-sha-256-encryption
• styled-with-tailwind-css
• tailwind
• typescript
• weatherapi