DEV Community

Cover image for Weatherify: A Weather App built with React.πŸ’™
Mohammed Farmaan.
Mohammed Farmaan.

Posted on • Updated on

Weatherify: A Weather App built with React.πŸ’™

Hey there everyone! Hope you're all doing good.

So it's been a month since I started learning React, and I can say that I'm loving it so far. And to understand it even better, I decided to follow the project-based approach.

After thinking a lot I decided to make a weather app that can have dynamic backgrounds. So finally after a lot of ups and downs, here it is:
It's called Weatherify. This app gives the current weather details of most of the cities in the world.

I've used Open Weather Map API to fetch the weather data and Pexels API to get images and dynamically set them as backgrounds.

Here are its screenshots:

Alt Text

It gets a new background image after each search:
Alt Text

So here it is guys. I've hosted it on Firebase and made it Open-Source so that it'll help someone as a beginner-friendly project.

Here's the link to the live demo:
https://weatherify-react.web.app/

Here's the link to GitHub repo:
https://github.com/zxcodes/Weatherify-Web

Open to suggestions and feedback.πŸ˜„

Top comments (18)

Collapse
 
nol166 profile image
John McCambridge

This is awesome. Nice work!

Could use some better parsing of the search term. For example, Austin TX yields no results

Collapse
 
zxcodes profile image
Mohammed Farmaan. • Edited

Thank you.πŸ˜„ Actually, it's not the parsing but the API itself. For example, if you say, Austin, TX, USA, it'll still return as "Austin." Because that's how the API returns and the App updates on the UI.

Collapse
 
nol166 profile image
John McCambridge

Oh got ya. Awesome app though!

Thread Thread
 
zxcodes profile image
Mohammed Farmaan.

Thank you.πŸ˜„

Collapse
 
dsaseymour profile image
Danny Seymour

This looks awesome! Great job!

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you!😊

Collapse
 
tifuseini369 profile image
Fuseini Iddrisu Tahiru

Nice work .. Mate

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you.πŸ€—

Collapse
 
joojodontoh profile image
JOOJO DONTOH

This is beautiful brother. The project based approach to learning is always great

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you. Yeah sure it is!πŸ˜‡

Collapse
 
kylemac1996 profile image
kylemac1996

Could you add a way to show in F too and not just C

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thanks for the suggestion. I'll definitely look into it.πŸ˜„

Collapse
 
babak271 profile image
Babak

Good job πŸ‘πŸ‘Œ

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you.πŸ€—

Collapse
 
onmywayfromwestindies profile image
tony_

Nice work πŸŽ‰πŸ”₯

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you.😊

Collapse
 
maanuanubhav999 profile image
anubhav_sharma

Great work man!

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Thank you.😊