Weather Dashboard

Description

The Weather Dashboard is a responsive web application that provides real-time weather forecasts for multiple cities. It uses the OpenWeatherMap API to fetch weather data, including current temperature, weather conditions, high and low temperatures, and a 3-day forecast. Users can add and remove cities, and view a graphical representation of temperature trends for a selected city.

Tech Stack

This project is built using the following technologies:

• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for styling the app.
• Chart.js: A library for creating beautiful, responsive charts.
• Lucide Icons: A collection of SVG icons for React.
• OpenWeatherMap API: Provides real-time weather data for cities around the world.
• Visual Studio Code (VSCode) for development
• GitHub: For version control and collaboration.
• Vercel: For hosting and deployment.

Features

• Search for cities: Add a city by typing its name and view weather data.
• Weather data display: See the current temperature, weather conditions, and high/low temperatures.
• 3-day forecast: View the weather forecast for the next 3 days.
• Temperature trend chart: See a graphical representation of high and low temperatures over the next few days.
• City removal: Remove cities from the list.
• Responsive Design: The app is fully responsive and works on both desktop and mobile devices.
• Error Handling: Handles errors gracefully when a city is not found or an issue occurs during the API request.

Setup Instructions

Prerequisites

Ensure that you have the following installed on your system:

• Node.js (version 14 or higher)
• npm (Node package manager)

Installation

1. Clone this repository: Open a terminal and run the following command:

   git clone https://github.com/0akram/weather-dashboard.git

2. Navigate to the project folder:

   cd weather-dashboard

3. Install dependencies: Run the following command to install the required npm packages:

   npm install

4. Run the application: After the installation is complete, run the app:

   npm start

5. Open your browser and go to http://localhost:3000 to view the Weather Dashboard.

Deployment

The app is deployed on Vercel, and you can access the live demo here:

• Live Demo