I Built My First Weather App Using React & OpenWeatherMap API — A Beginner’s Experience

Hi Devs 👋

I'm Aryan Neupane, and I recently started my 6-month journey to become a full-time cross-platform app developer. I’ve been sharing my learning in public, and today I’m excited to share my experience building a weather app using React and the OpenWeatherMap API.
This was my first time working with APIs — and wow, it felt like leveling up!

🧠 What I Wanted to Learn

I didn’t just want to follow a tutorial and copy-paste code. My goal was to understand how to build a real-world feature.

Here’s what I focused on:

  • Making a city-based weather search
  • Using an external API (OpenWeatherMap)
  • Handling user input
  • Managing states in React
  • Dealing with errors (like invalid cities)

⚙️ How the App Works

  1. The user types a city name
  2. When they click “Get Weather”, the app fetches data from the OpenWeatherMap API
  3. It displays temperature, weather condition, and location
  4. If something goes wrong (like an empty or wrong input), the app shows a friendly error message

📚 What I Learned

  • React Hooks — especially useState and useEffect
  • How to fetch data using the fetch() API
  • Basic async/await concepts
  • Conditionally rendering based on loading/error state
  • Reading API docs and making sense of JSON

This was also my first time feeling like I was “talking to the internet” through APIs — and it was kind of magical 😄

🖥️ Tech Stack

This might be a small project, but it taught me how to bring dynamic data into my app and make it interactive for users. I feel way more confident now to try APIs and build real apps.

If you're just starting out — trust me — it’s okay to feel confused at first. But once you see that weather data show up after your first fetch request... you’ll feel unstoppable.

🧵 Follow My Journey

I'm learning in public every day!

Come say hi on [X] https://x.com/AryanNe2060 or
[LinkedIn] https://www.linkedin.com/in/aryanneupane/ 😊

And feel free to share your projects with me too!

React #100DaysOfCode #BeginnerDev #APIs #OpenWeatherMap #LearningInPublic #WebDev