DEV Community

Cover image for Weather App with React & TypeScript
Ehsan Azizi
Ehsan Azizi

Posted on • Edited on

Weather App with React & TypeScript

A weather application built with React that shows the weather forecast for any city or place around the world by consuming OpenWeatherMap API.

Screenshot

Back in April I made the application mockup in Adobe XD but didn't have the time and motivation to actually develop the app until a few weeks ago that I decided since this can be a good project for my portfolio, I have to make this and I started working on it.
Today I am so excited to say that I finished developing this app and making it live, obviously, some polishments need to be done but for now, I wanted to share it with you.

As always let me know what you think about it I am glad to hear from you, also consider giving the project a star on GitHub.

💎 Features

  • Weather forecast for any city or place
  • Extended 7 days forecast
  • Find user location weather by utilizing GeolocationAPI
  • One-click Celcius to Fahrenheit conversion and vice versa
  • Dark Mode

💻 Tech Stack:

  • React
  • Redux
  • Typescript
  • StyledComponents

🌐 App:
https://esnz-reactweather.netlify.app

👩‍💻 Github Repo:
https://github.com/esnz/react-weather-app

Top comments (9)

Collapse
 
jgbijlsma profile image
Joost Bijlsma

I think the celcius and farenheit switch is inversed. When it has celcius selected it says 88 degrees (which is almost boiling), and at farenheit it says 31, which is what is its in C where I live right now

Collapse
 
ehsan profile image
Ehsan Azizi

Thanks for pointing out the issue, now it's fixed

Collapse
 
jayofficial01 profile image
JayOfficial01

hi ahsan hope you are doing fine ahsan i have downloaded your source code and added .env file to the root folder but it is giving error.. although I have genereated my weathe api key but the project is not working. can you help me plx

Collapse
 
ehsan profile image
Ehsan Azizi

Hi, could you please reach out by creating an issue on GitHub?

Collapse
 
jayofficial01 profile image
JayOfficial01

I have fixed it thank you. bss wo process.env.weatherapi wali dynamic hata kar mainay static api key day di hai and it is working now... althought it's a great project I wish you can teach me to doing coding like this ... :D

Collapse
 
harveyhalwin profile image
Heinek Halwin

Wow.. This looks so good

Collapse
 
ehsan profile image
Ehsan Azizi

Thanks a lot!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Very cool nice and clean design.

Collapse
 
ehsan profile image
Ehsan Azizi

Thank you so much Andrew.