DEV Community

Cover image for Weather App
Sudhanshu Ambastha
Sudhanshu Ambastha

Posted on • Edited on

10 2 2 3 2

Weather App

🌦️ 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

My Skills
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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (4)

Collapse
 
mince profile image
Mince

Nice 🙂

Collapse
 
best_codes profile image
Best Codes

Very cool!

Collapse
 
tomasdevs profile image
Tomas Stveracek

Great project! 🌦️ Are you planning to deploy this app on a server like Vercel or Netlify? It would be awesome to see it live! 😊

Collapse
 
sudhanshuambastha profile image
Sudhanshu Ambastha • Edited

Check the deployed model at: Weather App
also added feature to fetch current user location to get latitude and longitude to show weather accordingly properly

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay