The Problem
If you're a runner, you know the daily struggle: when should I run, and what should I wear? Most weather apps just show you numbers, temperature, humidity, wind speed, but they don't actually help you make a decision. I found myself juggling all these variables in my head, which led to uncertainty and sometimes uncomfortable or even unsafe runs.
How I Built the Solution
WeatherToRun is a web app that helps runners quickly check conditions and find the best time to go. Instead of just showing raw weather data, the app analyzes and interprets conditions to give you tailored running advice.
At the heart of the app is a scoring system that combines multiple weather factors, temperature, wind, humidity, and UV index, into a simple 1-100 score. This score, along with color-coded "Bad," "OK," or "Good" ratings, lets runners make quick, informed decisions.
Some of the features:
- Smart Scoring: Turns complex weather data into an easy-to-understand score.
- Personalized Recommendations: Suggests what to wear based on the weather and lets you set your own temperature tolerance ("More layers" or "Less layers").
- Modern Tech: Built with Next.js and Tailwind CSS for a fast, accessible experience on any device.
- Progressive Web App (PWA): Implemented service workers for caching, allowing the app to be installed on mobile devices like a native app.
The app is designed to be intuitive, so runners can feel confident planning their perfect run.
From Sketch to UI
Before writing any code, I started with low-fidelity sketches to explore the core layout and information hierarchy. This process helped solidify the user flow, ensuring that the most important information—the run score and recommended gear—was always front and center.
Initial wireframes exploring the main view, component structure, and user flow design.
PWA Implementation
One of the most valuable features I added was making WeatherToRun a Progressive Web App (PWA). This provides a native app-like experience for users.
Service Worker Strategy: I implemented a service worker that caches app assets for faster loading and better performance.
Installation Experience: The PWA can be installed on mobile devices, providing a native app-like experience with an icon on the home screen and full-screen mode.
Reflections & Key Takeaways
Building WeatherToRun taught me a lot about what makes an app genuinely helpful:
- Data Synthesis is Key: The biggest value came not from providing more data, but from processing it intelligently. Creating the scoring algorithm to weigh different weather variables was crucial for turning raw data into genuinely useful advice.
- Personalization Matters: One-size-fits-all recommendations don't work for running. Adding a simple temperature tolerance preference made the clothing recommendations much more personal and practical.
- Good Foundation is Everything: Using Next.js with a clear project structure and React Testing Library made development efficient. This organized approach helped me manage state, handle API data with TanStack Query (react-query), and ensure the app was reliable and maintainable.
- PWA Development Opens New Possibilities: Learning to implement service workers and PWA features taught me how web apps can provide native-like experiences. The caching strategy improves performance and user experience.