A comprehensive weather application built with React that provides real-time weather information, forecasts, interactive maps, and customizable alerts.
- Home Dashboard: Clean, intuitive interface displaying current weather conditions
- Weather Forecast: Detailed 7-day weather forecasts with hourly breakdowns
- Interactive Map: Visual weather map with radar, temperature, and precipitation overlays
- Weather Alerts: Real-time severe weather warnings and notifications
- Settings: Customizable preferences for units, locations, and alert preferences
Main dashboard showing current weather conditions and quick overview
Detailed 7-day weather forecast with hourly data
Interactive map with weather overlays and radar data
Real-time weather alerts and severe weather warnings
Customizable settings for units, locations, and preferences
This project was bootstrapped with Create React App.
- Node.js (v14 or higher)
- npm or yarn package manager
- Clone the repository
git clone https://github.com/JayanaGunaweera01/Weather-Reporter.git
cd Weather-Reporter- Install dependencies
npm install- Create a
.envfile in the root directory and add your API keys:
REACT_APP_WEATHER_API_KEY=your_weather_api_key_here
REACT_APP_MAP_API_KEY=your_map_api_key_here- Start the development server
npm run devRuns the app in development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
- React - Frontend framework
- Create React App - Build tool and development environment
- Weather API - Real-time weather data
- Map Integration - Interactive weather maps
- Responsive Design - Mobile-friendly interface
This application integrates with various weather APIs to provide:
- Current weather conditions
- Extended forecasts
- Weather alerts and warnings
- Radar and satellite imagery
- Historical weather data
The Weather Reporter is fully responsive and works seamlessly across:
- Desktop computers
- Tablets
- Mobile phones
- Various screen sizes and orientations
- Temperature: Celsius/Fahrenheit
- Wind Speed: mph/km/h/m/s
- Pressure: hPa/inHg/mmHg
- Visibility: miles/kilometers
- GPS-based location detection
- Manual location search and selection
- Multiple saved locations
- Location-based weather alerts
- Current temperature and conditions
- "Feels like" temperature
- Humidity and wind information
- UV index and visibility
- Sunrise/sunset times
- Hourly forecast for next 24 hours
- Daily forecast for next 7 days
- Precipitation probability
- Temperature highs and lows
- Real-time radar imagery
- Temperature overlay
- Precipitation tracking
- Storm tracking capabilities
- Severe weather warnings
- Push notifications
- Customizable alert types
- Location-based alerts
npm run build- Build the project
- Deploy the
buildfolder to Netlify - Configure environment variables in Netlify dashboard
- Connect your GitHub repository to Vercel
- Configure environment variables
- Deploy automatically on push to main branch
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.