Weather & Global News Dashboard

This is a React-based web application that provides weather information and global news. It fetches the weather for a specific location and displays the current weather, hourly forecast, and weather details. Additionally, it provides the latest global news from various sources via the GNews API.

https://forecast360.netlify.app/

Features

• Weather Information:

  • Displays current weather details (temperature, humidity, etc.)
  • Shows the hourly forecast
  • Weather details such as wind speed, pressure, etc.

• Global News:

  • Fetches and displays the latest global news from reliable sources.
  • News topics include politics, business, technology, entertainment, and more.

• Responsive Design:

  • Fully responsive layout optimized for both desktop and mobile devices.

• User Location:

  • Automatically detects the user's location (latitude and longitude) to fetch weather data.

Tech Stack

• Frontend: React, Tailwind CSS, Shadcn UI, React-Leaflet for map integration
• API:
  • OpenWeatherMap API for weather data
  • GNews API for fetching global news
• State Management: React hooks (useState, useEffect)

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/RailDevX8/Forecast360.git
   cd weather-global-news-dashboard

2. Install the dependencies:

   npm install

3. Create a .env file in the root directory of the project and add your API keys for OpenWeatherMap and GNews:

   REACT_APP_OPENWEATHER_API_KEY=your_openweathermap_api_key
   REACT_APP_GNEWS_API_KEY=your_gnews_api_key
   

4. Start the development server:

   npm start

5. Visit http://localhost:5173 in your browser to view the application.

API Keys

OpenWeatherMap API

To use the OpenWeatherMap API, you need to sign up at OpenWeatherMap and get your API key. Use it in the .env file as REACT_APP_OPENWEATHER_API_KEY.

GNews API

To fetch global news, you need a GNews API key. You can get it by signing up at GNews. Use it in the .env file as REACT_APP_GNEWS_API_KEY.

Screenshots

• Dashboard View: The dashboard shows current weather, hourly forecast, and global news updates.

Contributing

If you want to contribute to the project, feel free to fork the repository, make changes, and create a pull request. Please ensure that your code follows the project’s style guide and passes all tests.

License

This project is open source and available under the MIT License.

Acknowledgements

• OpenWeatherMap for providing the weather data.
• GNews for providing global news data.
• React for building the user interface.
• Tailwind CSS for styling the application.
• Shadcn UI for modern UI components.