https://www.espinosa-oviedo.com/tags/pwa/PWAHugoBlox Kit (https://hugoblox.com)en-usMon, 10 Jun 2024 00:00:00 +0000https://www.espinosa-oviedo.com/media/icon_hu_8204893b4697223d.pnghttps://www.espinosa-oviedo.com/tags/pwa/https://www.espinosa-oviedo.com/projects2/weather-app/Mon, 10 Jun 2024 00:00:00 +0000https://www.espinosa-oviedo.com/projects2/weather-app/<p>A fast, beautiful weather application that provides real-time weather data, forecasts, and interactive maps. Built as a Progressive Web App with offline support.</p> <h2 id="overview">Overview</h2> <p>WeatherNow started as a weekend project to learn PWA development. It evolved into a fully-featured weather app used by thousands of people daily.</p> <h2 id="features">Features</h2> <h3 id="weather-data">Weather Data</h3> <ul> <li><strong>Current Conditions</strong> - Real-time weather for any location</li> <li><strong>7-Day Forecast</strong> - Detailed daily forecasts with hourly breakdown</li> <li><strong>Weather Alerts</strong> - Severe weather notifications</li> <li><strong>Historical Data</strong> - Past weather data and trends</li> </ul> <h3 id="user-experience">User Experience</h3> <ul> <li><strong>Location Detection</strong> - Automatic location based on GPS or IP</li> <li><strong>Search</strong> - Find weather for any city worldwide</li> <li><strong>Favorites</strong> - Save frequently checked locations</li> <li><strong>Units</strong> - Toggle between metric and imperial</li> <li><strong>Dark Mode</strong> - Automatic or manual theme switching</li> </ul> <h3 id="progressive-web-app">Progressive Web App</h3> <ul> <li><strong>Offline Support</strong> - Access cached data without internet</li> <li><strong>Install</strong> - Add to home screen like a native app</li> <li><strong>Fast</strong> - Optimized for performance (Lighthouse 100)</li> <li><strong>Responsive</strong> - Perfect on any device</li> </ul> <h2 id="technical-highlights">Technical Highlights</h2> <h3 id="performance">Performance</h3> <ul> <li>Achieved <strong>100/100 Lighthouse score</strong> across all categories</li> <li>Implemented service workers for offline functionality</li> <li>Optimized bundle size: &lt; 150KB gzipped</li> <li>Lazy loading for images and components</li> <li>Prefetching for instant navigation</li> </ul> <h3 id="data-management">Data Management</h3> <ul> <li>Smart caching strategy with stale-while-revalidate</li> <li>Background sync for updated forecasts</li> <li>Efficient API usage with request batching</li> <li>Local storage for user preferences</li> </ul> <h3 id="uiux">UI/UX</h3> <ul> <li>Smooth animations with Framer Motion</li> <li>Interactive weather map with Mapbox</li> <li>Weather icons that match current conditions</li> <li>Accessible (WCAG AA compliant)</li> </ul> <h2 id="api-integration">API Integration</h2> <p>Integrated multiple weather APIs for comprehensive data:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Example: Fetching weather data </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fetchWeather</span> <span class="o">=</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">lat</span>: <span class="kt">number</span><span class="p">,</span> <span class="nx">lon</span>: <span class="kt">number</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="sb">`https://api.openweathermap.org/data/2.5/weather?lat=</span><span class="si">${</span><span class="nx">lat</span><span class="si">}</span><span class="sb">&amp;lon=</span><span class="si">${</span><span class="nx">lon</span><span class="si">}</span><span class="sb">&amp;appid=</span><span class="si">${</span><span class="nx">API_KEY</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="architecture">Architecture</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">┌─────────────┐ ┌──────────────┐ </span></span><span class="line"><span class="cl">│ React App │────▶│ OpenWeather │ </span></span><span class="line"><span class="cl">│ (Vite) │ │ API │ </span></span><span class="line"><span class="cl">└──────┬──────┘ └──────────────┘ </span></span><span class="line"><span class="cl"> │ </span></span><span class="line"><span class="cl"> │ ┌──────────────┐ </span></span><span class="line"><span class="cl"> └───────────▶│ Mapbox │ </span></span><span class="line"><span class="cl"> │ API │ </span></span><span class="line"><span class="cl"> └──────────────┘ </span></span></code></pre></div><h2 id="challenges">Challenges</h2> <h3 id="challenge-api-rate-limits">Challenge: API Rate Limits</h3> <p><strong>Solution</strong>: Implemented intelligent caching and request batching to stay within free tier limits while maintaining data freshness</p> <h3 id="challenge-offline-experience">Challenge: Offline Experience</h3> <p><strong>Solution</strong>: Service workers with cache-first strategy for UI, network-first for data with graceful fallbacks</p> <h3 id="challenge-performance-on-slow-networks">Challenge: Performance on Slow Networks</h3> <p><strong>Solution</strong>: Image optimization, code splitting, and Progressive rendering for instant perceived performance</p> <h2 id="results">Results</h2> <ul> <li>📈 <strong>Users</strong>: 5000+ monthly active users</li> <li>⚡ <strong>Performance</strong>: 100 Lighthouse score</li> <li>📱 <strong>PWA</strong>: 40% of users installed as app</li> <li>🌍 <strong>Global</strong>: Users from 50+ countries</li> <li>⭐ <strong>Rating</strong>: 4.8/5 average user rating</li> </ul> <h2 id="tech-stack">Tech Stack</h2> <p><strong>Frontend</strong></p> <ul> <li>React 18</li> <li>TypeScript</li> <li>Tailwind CSS</li> <li>Framer Motion</li> <li>Vite (build tool)</li> </ul> <p><strong>APIs</strong></p> <ul> <li>OpenWeather API</li> <li>Mapbox GL JS</li> <li>IP Geolocation API</li> </ul> <p><strong>Tools</strong></p> <ul> <li>Workbox (PWA)</li> <li>React Query (data fetching)</li> <li>Zustand (state management)</li> </ul> <p><strong>Hosting</strong></p> <ul> <li>Netlify</li> <li>Cloudflare CDN</li> </ul> <h2 id="open-source">Open Source</h2> <p>This project is open source and welcomes contributions!</p> <p><strong>License</strong>: MIT<br> <strong>GitHub</strong>: </p> <h2 id="lessons-learned">Lessons Learned</h2> <ol> <li><strong>PWAs are powerful</strong>: Service workers enable app-like experiences on the web</li> <li><strong>Performance matters</strong>: Users notice and appreciate fast apps</li> <li><strong>Caching strategy</strong>: Critical for offline support and API cost management</li> <li><strong>Simplicity wins</strong>: Started with core features, added more based on user feedback</li> </ol> <h2 id="future-plans">Future Plans</h2> <ul> <li><input disabled="" type="checkbox"> Weather widgets for websites</li> <li><input disabled="" type="checkbox"> Social features (share weather conditions)</li> <li><input disabled="" type="checkbox"> Weather photography integration</li> <li><input disabled="" type="checkbox"> Apple Watch &amp; Android Wear apps</li> <li><input disabled="" type="checkbox"> Premium features (ad-free, extended forecasts)</li> </ul> <hr> <p><strong>Status</strong>: ✅ Live &amp; Maintained<br> <strong>Try it</strong>: <br> <strong>GitHub</strong>: </p>