The latest articles on DEV Community by Sanket Das (@sanket_das_2004). https://dev.to/sanket_das_2004 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3033981%2Ff43bb1f5-785c-4a05-bd15-2561d476e4cc.jpg https://dev.to/sanket_das_2004 en Sanket Das Wed, 09 Apr 2025 12:32:53 +0000 https://dev.to/sanket_das_2004/building-a-weather-app-with-react-and-openweather-api-4fdc https://dev.to/sanket_das_2004/building-a-weather-app-with-react-and-openweather-api-4fdc <p>🌟 <strong>Introduction</strong><br> Have you ever wanted to know the weather of any city in the world—instantly? In this blog post, I’ll walk you through how I built a simple Weather App using React and the OpenWeather API.</p> <p>Whether you're new to APIs or React, this project is beginner-friendly and a great way to understand how frontend apps can interact with external data sources.</p> <p>🛠️ <strong>Tech Stack</strong><br> React (built with Vite for fast setup)<br> Axios for API requests<br> Tailwind CSS for styling (you can also use plain CSS)<br> OpenWeatherMap API for weather data</p> <p>🧩 <strong>What the App Does</strong><br> User enters a city name.<br> App fetches current weather data using OpenWeather API.<br> Shows temperature, humidity, weather condition, and city name.</p> <p>📸 <strong>Preview of the App</strong><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjthjokszx0n8tjngrvwe.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjthjokszx0n8tjngrvwe.png" alt="Image of the App" width="800" height="732"></a></p> <p>🚀 <strong>GitHub Repository</strong><br> 👉 <a href="https://github.com/Sanket-Kumar-Das/live-weather-tracker" rel="noopener noreferrer">https://github.com/Sanket-Kumar-Das/live-weather-tracker</a></p> <p>💡 <strong>What I Learned</strong><br> How to make API calls in React using Axios<br> How to handle state and user input<br> How to read API docs (especially OpenWeatherMap)<br> Styling a basic UI with Tailwind CSS</p> <p>🤝 <strong>Conclusion</strong><br> Building this weather app was a fun way to learn how frontend and APIs work together. I’m excited to build more projects like this and share what I learn along the way!</p> <p>Have questions or want to collaborate? Feel free to drop a comment below or connect with me here 😊</p> react javascript webdev api