A modern, responsive Progressive Web App for real-time weather updates and air quality monitoring across the globe.
Weather4U delivers comprehensive weather information with a beautiful, intuitive interface that works seamlessly across all devices. Built with React, TypeScript, and modern web technologies.
- Real-time weather data for any city worldwide
- Comprehensive weather metrics including temperature, humidity, pressure, wind, and visibility
- Automatic location detection and manual city search
- Auto-refresh every 30 minutes for current data
- Manual refresh option for instant updates
- Intelligent caching for optimal performance
- Real-time Air Quality Index (AQI) data
- Detailed pollutant breakdown (PM2.5, PM10, O3, NO2, SO2, CO)
- Color-coded quality indicators and health recommendations
- Dark/Light/System Theme: Automatic theme switching based on user preference
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Progressive Web App: Install on any device for native app-like experience
- Smooth Animations: Beautiful starlight animations and transitions
- iOS Optimized: Enhanced experience for iOS Safari and PWA installation
- Multi-language Support: English, Spanish, Portuguese, French
- Dynamic Translations: All content adapts to selected language
- Localized Date/Time: Format adapts to language preferences
- Imperial/Metric Units: Toggle between measurement systems with persistence
- Theme Persistence: Your preferences are saved across sessions
- Location Memory: Remembers your last searched location
- Clean Architecture: Domain-driven design with clear separation of concerns
- TypeScript: Full type safety and enhanced developer experience
- Performance Optimized: Lazy loading, code splitting, and efficient state management
- Error Handling: Robust error boundaries and graceful fallbacks
- Node.js (v16 or higher)
- npm or yarn package manager
- OpenWeatherMap API key (free at openweathermap.org)
-
Clone the repository
git clone https://github.com/RodoAgusSM/Web_Weather_4_U.git cd Web_Weather_4_U/Weather_4_U -
Install dependencies
npm install # or yarn install -
Set up environment variables
Create a
.envfile in the root directory:REACT_APP_WEATHER_API_KEY=your_openweathermap_api_key_here
-
Start development server
npm start # or yarn start -
Open your browser Navigate to
http://localhost:3000and enjoy real-time weather updates!
npm run build
# or
yarn buildWeather4U follows Clean Architecture principles:
src/
├── application/ # Use cases and business logic
├── domain/ # Entities and domain models
├── infrastructure/ # External services and data sources
├── presentation/ # React components and UI logic
├── shared/ # Common utilities and types
├── styles/ # Global styles and themes
└── translations/ # Internationalization files
- Frontend: React 18, TypeScript, Styled Components
- State Management: React Context API with custom hooks
- API Integration: OpenWeatherMap API
- Styling: CSS-in-JS with styled-components
- Internationalization: react-i18next
- Build Tool: Create React App with custom configurations
Contributions are welcome! This project is actively maintained and open to improvements.
- Follow the existing code style and architecture patterns
- Write meaningful commit messages
- Test your changes across different devices and browsers
- Update documentation when adding new features
All Rights Reserved
This project is the intellectual property of Rodolfo Agustín Silva Messano, Software Engineer from Montevideo, Uruguay.
Unauthorized copying, modification, distribution, or use of this software is strictly prohibited without explicit written permission from the author.
Rodolfo Agustín Silva Messano
Software Engineer | Montevideo, Uruguay
- 🌐 Portfolio: github.com/RodoAgusSM
- 💼 LinkedIn: https://www.linkedin.com/in/rodolfosilvamessano/
- 📧 Email: [email protected]
Made with ❤️ in Uruguay
Weather4U - Your gateway to global weather information