🌦️ Building a Weather App with React and Css 🌦️
I’m excited to share my latest project: a Weather App built with React! This project was a great opportunity for me to dive deeper into API integration, state management, and responsive design. Here’s a breakdown of what I created.
🚀 Features
-
Real-Time Weather Data: Users can search for any city to get current weather conditions, including temperature, humidity, and atmospheric pressure.
-
Air Quality Index (AQI): The app fetches and displays air quality data, providing users with essential information about pollutants like PM2.5, SO2, NO2, and O3 levels.
-
Geolocation Support: The app can automatically fetch the user’s current location weather data, making it convenient for users on the go.
-
Unit Toggle: Users can switch between Celsius and Fahrenheit with a simple button click.
-
Daily Forecast: A detailed daily weather forecast gives users insights into temperature fluctuations throughout the day.
-
Responsive Design: The app is designed to work seamlessly across devices, ensuring a smooth user experience whether on desktop or mobile.
📡 Tech Stack
Frontend: React.js
API: OpenWeatherMap for weather data and air quality data
Styling: Custom CSS for layout and design
Key Functionality:
Data Fetching: The fetchWeather function makes API calls to get current weather and air quality data. I handle loading states and errors to provide feedback to users.
Dynamic Rendering:
Depending on the state (loading, error, or data fetched), the app conditionally renders different components to keep the user informed.