About the Project WeatherWise is a modern, intelligent weather application designed to provide users with personalized, contextual weather information and alerts. Beyond just showing the temperature, WeatherWise aims to integrate weather data seamlessly into the user's daily life by understanding their activities and location.
Inspiration The inspiration for WeatherWise stemmed from a common frustration: constantly checking multiple weather apps, only to find generic forecasts that didn't quite apply to my immediate needs. I wanted a weather app that felt proactive, almost like a personal assistant, telling me not just what the weather was, but how it affected me based on what I was doing or where I was going. For instance, if I'm about to leave work, I'd want to know if I need an umbrella for my walk home, or if the roads are clear for my drive. This desire for a truly smart, context-aware weather experience led to the conception of WeatherWise.
What I Learned Building WeatherWise was a comprehensive learning experience across several key technologies and concepts:
Expo and Expo Router: I deepened my understanding of the Expo managed workflow, particularly how to build cross-platform applications (web, iOS, Android) from a single codebase. Expo Router proved invaluable for managing complex navigation, especially with nested tabs and authentication flows. React Native Fundamentals: I honed my skills in React Native component development, state management, and styling using StyleSheet.create. The importance of responsive design and handling different screen sizes became very clear. Supabase Integration: Implementing user authentication and managing user profiles (including notification preferences, transportation methods, and home/work locations) provided hands-on experience with Supabase's client library, real-time capabilities, and Row Level Security (RLS). Location and Activity Detection: This was a significant learning curve. I delved into expo-location for foreground and background location tracking, and expo-task-manager for running background tasks. Developing the logic for activity detection (stationary, walking, cycling, driving, working) and geofencing (detecting when a user leaves home or arrives at work) required careful consideration of accuracy, battery usage, and permission handling. Notifications: Working with expo-notifications to schedule and manage various types of weather alerts and contextual notifications was crucial. Understanding notification permissions and how to deliver timely, relevant information was key. OpenWeatherMap API: Integrating with a third-party weather API taught me about handling API keys securely, managing rate limits, and parsing diverse data structures to extract relevant weather information. Platform Compatibility: A constant learning point was adapting features for web versus native platforms. Features like background location tracking are native-only, requiring careful use of Platform.select() and providing graceful fallbacks or alternative experiences for the web. How I Built My Project The development of WeatherWise followed an iterative approach:
Core Setup: I started by setting up the Expo Router project, defining the basic tab navigation (Weather, Alerts, Profile), and integrating Supabase for user authentication (login, signup, forgot password). Basic Weather Display: The next step was to fetch and display current weather data using the OpenWeatherMap API based on the user's current location. This involved requesting foreground location permissions and designing the WeatherCard component. User Profiles and Preferences: I extended the Supabase schema to include user profiles, allowing users to set their name, transportation method, and notification preferences. This data was then used to personalize the weather suggestions. Smart Suggestions: The WeatherService was enhanced to generate dynamic weather suggestions based on current conditions and the user's chosen transportation method. These suggestions are displayed prominently on the home screen. Activity Detection: This was a major feature. I implemented the ActivityDetectionService to analyze user movement and determine their current activity (e.g., walking, driving, working). This involved calculating speed and distance from location updates. Background Location & Contextual Notifications: I integrated expo-background-location and expo-task-manager to enable continuous location monitoring. This allowed the app to detect when a user leaves their home location or arrives at a defined work location, triggering highly contextual weather alerts via expo-notifications. Work Location Management: I built the UI and logic for users to add and manage their work locations, including defining working hours and days. This data feeds into the activity detection service to identify "working" states. Error Handling and UI/UX: Throughout the process, I focused on robust error handling, displaying messages directly in the UI rather than relying solely on alerts. I also paid attention to loading states and ensuring a smooth, intuitive user experience with clean, modern UI components and lucide-react-native icons. Challenges I Faced Several challenges emerged during development:
Background Location Permissions and Reliability: Obtaining and maintaining background location permissions on both iOS and Android proved tricky. Ensuring the background task reliably received location updates and processed them without excessive battery drain was a continuous optimization effort. Debugging background tasks without direct console access was also a hurdle. Platform Differences: The most significant challenge was adapting native-only features (like background location and certain notification behaviors) for the web platform. This required careful use of Platform.OS checks and designing alternative experiences or simply disabling features where web compatibility was not feasible. Supabase Data Synchronization: Ensuring that user profile data, especially home_location and work_locations, was correctly saved to and loaded from Supabase, and that the local state remained synchronized, required careful management of useEffect hooks and state updates. Activity Detection Accuracy: Accurately determining user activity based solely on GPS data (latitude, longitude, speed) can be challenging due to GPS inaccuracies and varying user movement patterns. Fine-tuning thresholds for stationary, walking, cycling, and driving, and implementing the "working" state based on geofencing and time, required iterative testing. Notification Timing and Relevance: Striking the right balance for notification frequency and relevance was important. Over-notifying can lead to users disabling alerts, while too few can make the feature seem useless. Implementing cooldown periods and ensuring notifications were genuinely helpful based on context was key. Environment Variable Management: Properly configuring and accessing environment variables across different platforms (especially with Expo's build process) for API keys was a minor but persistent challenge.
Built With
- expo.io
- react-native
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.