SkySymphony

This is a weather app that allows users to get current weather data for any city in the world.

Table of Contents

• Demo
• Features
• Technologies Used
• Getting Started
• Available Scripts
• How It Works
• Future Improvements
• Challenges and Learnings

Demo

You can view a live demo of the project SkySymphony.

Features

• Fetch weather data for any city
• Display temperature, weather condition, humidity, and wind speed
• Responsive and clean UI design
• Automatically displays weather for London on page load

Technologies Used

• React (for building the UI)
• Vite (for fast development environment)
• JavaScript/JSX (for logic and structure)
• Axios (for fetching weather data from OpenWeatherMap API)
• CSS (for styling)

Getting Started

Follow these steps to run the project locally:

Prerequisites

Ensure that Node.js and npm are installed on your machine. If not, you can download them from here.

Installation

1. Clone the repository:

   git clone https://github.com/Jiteshiyu/SkySymphony.git
   cd SkySymphony

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:3000 to see the app in action.

Available Scripts

• npm run dev: Start the development server.
• npm run build: Build the app for production.
• npm run preview: Preview the production build locally.

How It Works

The SkySymphony Weather App uses the OpenWeatherMap API to fetch and display real-time weather data for any city.

1. Fetching Weather Data: The app uses Axios to send a GET request to the OpenWeatherMap API, retrieving data such as temperature, humidity, wind speed, and weather conditions.
2. Search Functionality: Users can type in the name of a city in the input box and click the "Get Weather" button to retrieve the weather information for that location.
3. Displaying Data: The app shows the temperature in Celsius, the weather description (e.g., clear sky), the humidity percentage, and the wind speed in meters per second.
4. Default Weather: On page load, the weather for London is automatically fetched and displayed.

Future Improvements

• Add a 5-day weather forecast.
• Implement geolocation to get weather data for the user’s current location.
• Improve the user interface with additional animations and graphics.
• Add error handling for invalid city names.

Challenges and Learnings

• API Integration: Integrating the OpenWeatherMap API was a key challenge, particularly learning how to handle asynchronous data fetching and updating the UI in real time.
• State Management: Using React's useState and useEffect hooks effectively to manage and update weather data on user input was a great learning experience.
• Responsiveness: Designing a clean and responsive user interface helped in understanding CSS layouts and how to make them adaptable to different screen sizes.

Support

If you liked the project, give it a 🌟 on the repo!

Connect with me: