Weatherly is a React-based weather application that provides real-time weather updates and forecasts using various APIs.
- Displays current weather conditions including temperature, pressure, humidity, wind speed, wind direction, AQI, UV and weather description.
- Provides dynamic backgrounds that change based on weather conditions (e.g., sunny, rainy, cloudy), as well as time of day (e.g., day and night).
- Uses openweathermap.org APIs for Current Weather forecast
- Uses geocoding API
- Shows detailed hourly forecasts with temperature, weather icons, and wind speed.
- Offers daily forecasts for upcoming days, allowing users to plan ahead.
- Uses geolocation API to fetch weather data based on the user's current location.
- Allows users to search for weather information in different locations by entering a city name or zip code.
- Includes a map feature using the Leaflet library, enabling users to click on locations to fetch weather data.
- Displays markers and pop-ups with weather details for selected locations.
- Integrates with qweather.com API for detailed weather information, including UV index and air quality data.
- Provides icons from qWeather Icons for various weather conditions to enhance visual representation.
- Provides AQI data from api.openuv.io
- Supports dark mode and light mode toggles for personalized viewing preferences.
- Ensures uniform styling across pages to maintain consistency in user experience.
- Fetches and displays news articles related to weather using the worldnewsapi.com API, keeping users informed about weather-related news.
To install the project, follow these steps:
-
Clone the repository:
git clone https://github.com/thecrusader25225/weatherly.git
-
Navigate to the project directory:
cd weatherly
-
Install the dependencies:
npm install
-
Install Tailwind CSS:
npm install -D tailwindcss
-
Install React Icons:
npm install react-icons
-
Install qWeather Icons:
npm i qweather-icons
Create a .env
File:
Create a file named .env
at the root of your project and add the following environment variables. Replace the placeholder values with your actual API keys:
REACT_APP_API_KEY=your_qweather_api_key
REACT_APP_NEWS_API_KEY=your_newsdata_api_key
REACT_APP_QWEATHER_API_KEY=your_qweather_api_key
REACT_APP_UV_API_KEY=your_uv_api_key
-
Start the development server:
npm start
-
Open your browser and navigate to:
http://localhost:3000
Users can access Weatherly by visiting Vercel Deployment Link.
- Real-time weather updates for any location
- 24-hour weather forecast
- 5-day weather forecast
- Current location of user's real-time weather forecast
- Dark mode and light mode
- Weather updates provided for any location pointed out in integrated map
- News updates related to weather
- Detailed AQI for a location
To contribute to this project, follow these steps:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature/your-feature-name
-
Make your changes and commit them:
git commit -m 'Add some feature'
-
Push to the branch:
git push origin feature/your-feature-name
-
Create a pull request.
- Planned features include adding more interactive elements, improving data visualization, and enhancing accessibility features to cater to a broader audience.
This project is licensed under the MIT License. See the LICENSE file for details.
Thank you for exploring Weatherly! We hope you find it useful and enjoyable. If you have any questions, feedback, or would like to contribute, please don't hesitate to reach out at [email protected]. Happy coding!