A modern, responsive weather application designed specifically for outdoor enthusiasts. Get quick weather conditions and smart activity recommendations tailored for your outdoor adventures.
Deployed on vercel : https://assignment-virid-tau.vercel.app/
Video Demonstration : https://www.loom.com/share/f0b629870bde4345af268ffaefcc8bde
This project was developed with strategic assistance from AI (ChatGPT) to demonstrate modern development practices. Link : https://chatgpt.com/share/690313fd-c47c-8006-9101-13cd4aaeddf0
This application is specifically designed for outdoor enthusiasts who need quick, actionable weather information before heading out for activities. Unlike generic weather apps, Weather Now provides tailored recommendations and outdoor-focused metrics.
- Geocoding: https://geocoding-api.open-meteo.com/v1/search
- Weather Data: https://api.open-meteo.com/v1/forecast
- Current Conditions - Real-time temperature, "feels like" temperature, and weather conditions
- Quick Assessment - Outdoor readiness score at a glance
- Detailed Metrics - Wind speed, humidity, precipitation, and wind direction
- Smart Activity Recommendations - Suggestions based on current weather conditions
- Outdoor Readiness Score - Instant assessment of whether conditions are suitable for outdoor activities
- Safety-First Design - Emphasis on wind, precipitation, and temperature factors that matter for outdoor safety
- Dark/Light Mode - Automatic theme switching based on system preferences
- Fully Responsive - Optimized for desktop, tablet, and mobile devices
- Fast & Lightweight - Quick loading times and smooth interactions
- Error Handling - Graceful error states with user-friendly messages
- Frontend Framework: React 18.2.0
- Styling: Tailwind CSS 3.3.0
- Icons: Emojis (no external dependencies)
- Weather API: Open-Meteo API (free, no authentication required)
- Deployment: Compatible with Netlify, Vercel, or any static hosting
src/
├── components/
│ ├── ActivityRecommendations.jsx # Smart outdoor activity suggestions
│ ├── ErrorMessage.jsx # User-friendly error display
│ ├── LoadingSpinner.jsx # Loading state indicator
│ ├── QuickGlanceCard.jsx # Outdoor readiness assessment
│ ├── SearchBar.jsx # City search functionality
│ ├── ThemeToggle.jsx # Dark/light mode switch
│ ├── WeatherCard.jsx # Main weather display
│ └── WeatherDetails.jsx # Detailed weather metrics
├── hooks/
│ ├── useTheme.js # Theme management hook
│ └── useWeather.js # Weather data fetching hook
├── App.jsx # Main application component
└── index.css # Global styles and Tailwind imports