SunShield

SunShield ☀️ : Keeping you cool and protected under the sun!

Inspiration 💡

SunShield was born from a pressing need to address sun safety and hydration during rising global temperatures. As climate change accelerates weather extremes, our goal is to help users navigate these conditions with ease and confidence. The project was inspired by the desire to provide a practical solution for sun protection and hydration management, ensuring that individuals can enjoy outdoor activities safely.

What It Does 🎯

SunShield is a comprehensive web app that offers personalized, sustainable sunscreen recommendations based on your skin type (dry, oily, combination, sensitive dry, sensitive oily, sensitive combination) and the current UV index of your location. Recommendations are tailored to ensure optimal protection and sustainable brands. It also offers location-based services: users can manually input their location or enable auto-detection to receive localized sun safety advice. Additionally, real-time weather alerts like notifications for severe weather conditions such as heatwaves, floods, and storms to help users prepare and respond appropriately are provided. Notifications also include hourly hydration reminders, which prompt to keep users hydrated throughout the day, promoting overall well-being. Sunscreen reapplication reminders are also included to give gentle reminders every two hours to reapply sunscreen, ensuring constant protection. Lastly, users are also notified of weather-based tips, which provide dynamic advice on staying cool and safe based on current weather conditions, including sustainable practices and cooling strategies.

Features 💻

User Profile Customization: Users can create profiles based on their skin type and preferences, receiving tailored recommendations and alerts.
Interactive Map Integration: Displays local UV index and weather conditions, allowing users to easily understand their sun exposure risk.
Real-Time Data Synchronization: Integrates with external weather APIs to deliver up-to-date information and notifications.

What We Learned ✏️

Developing SunShield has been a valuable learning experience. We learned how to implement an advanced notification system by implementing a system for delivering real-time alerts and reminders, requiring integration with external APIs and user device notifications. We also learned to design an intuitive, dynamic user interface that balances functionality with user experience, accommodating various screen sizes and user needs. We learned to implement cross-browser compatibility, ensuring that the app operates smoothly across different browsers and optimizing performance.

How We Built It 🛠

SunShield was constructed using HTML, CSS, and JavaScript, with the following components:

Notification System: Developed using JavaScript to handle real-time alerts for severe weather and hydration reminders. Initial test intervals are set shorter for hackathon demonstration purposes but will be adjusted in the final version.
Interactive Features: Utilized JavaScript to fetch and display real-time weather data, including UV index and severe weather alerts, enhancing user engagement.
Design and Development: Employed HTML and CSS to create a responsive and user-friendly design, ensuring that the app is visually appealing.
Demo Code: Test code was used to showcase strong weather alerts during the demo video, but has now been removed for the final build.

Challenges We Faced 🚨

Accuracy and Timeliness of Notifications: Ensuring that weather alerts, hydration reminders, and sunscreen reapplication notifications were accurate and delivered in real-time was crucial. Any delays or inaccuracies could reduce the app’s effectiveness in keeping users safe. Solution: We integrated a reliable external weather API and set up automatic updates at regular intervals to ensure users received the most current information. By implementing efficient background scripts, we minimized latency and ensured that notifications were delivered exactly when needed. Additionally, testing in multiple regions helped us ensure global functionality.
Creating a Clean, Intuitive User Interface: Designing a user interface that incorporated multiple features while remaining simple and intuitive was difficult. With personalized recommendations, weather updates, and reminders, the app needed to avoid overwhelming users with too much information at once. Solution: We used user-centered design principles, conducting rounds of testing and feedback to iteratively improve the interface. By employing a minimalist design with clear icons, concise instructions, and a streamlined layout, we successfully balanced functionality with simplicity. Each section of the app is intuitive, with easy navigation ensuring that users can quickly find what they need.
Integrating Personalized Recommendations: Creating a system that could provide personalized sunscreen and weather tips based on a user's skin type, location, and current UV index required careful coordination of different data inputs. Solution: We developed a logic-based recommendation engine in JavaScript, allowing for seamless integration between user inputs (skin type, location) and real-time data (UV index, weather). By dynamically adjusting the recommendations based on changing weather conditions, we ensured that users received timely and accurate advice. Testing with different user profiles helped refine the algorithm.

What's Next For SunShield 🚀

Looking ahead, we aim to transform SunShield into a mobile app, expanding its reach and accessibility. Future enhancements will focus on refining the user experience, incorporating user feedback, and exploring additional features such as integration with wearable devices to provide real-time alerts and recommendations based on physical activity and environmental conditions. Additionally, we could include personalized health insights, offering users tailored health tips and insights based on their sun exposure and hydration patterns.