React geolocation weather app

React geolocation weather app
0

Hi i just built a geolocation weather app based on your location which shows the forecasted weather and current weather
u can also search for countries for weathers u want to look up. Please tell me what u think ! (The forecast weather nav are clickable as well )
https://react-weatherappjohn.netlify.com/

The app seems to work well and the code appears to be very well organised.

A couple of things I’d mention: the scaled up weather icon on the page isn’t high enough resolution (I’d consider converting it to a svg icon before scaling it up), and the background image is perhaps too dark. Lastly, printing out the country name seems a bit incongruous to me as the user will want to see the local weather not “national” weather, if you see what I mean.

Other than that I’m quite impressed by your app.
Iain

Agreed with @blogscot - the national weather is a bit vague, and with geolocation, you should be able to narrow down my lat/lng in order to focus on my direct weather depending on the API you’re using to make the forecast.

There are other things which you could improve on with this app. I’m viewing on a desktop with Chrome as my browser. The height of the app is nearly fit to the page, but the last day’s forecast is what ruins it. Similarly, on mobile, there’s the extra day ruins the format at the bottom of the page.

In terms of the dark background, you could add something in the state which, depending on the weather, changes the background. You could include making it a bit opaque to make the foreground stand out.

Otherwise, the project works as expected. It gets my weather based on my geolocation, although somewhat vague, and when I click on a day, the Main Component will change its day and icon associated with that day. It’s tricky to get those things working and you’ve done a great job! Just keep on working to fine tune your work

Thank you so much for your insightful feedback :smiley: . I agree with the points for improvement that you have suggested especially with the changes of background.

The idea of national weather came about for traveling to different countries and allowing the user to view the time and weather for the country they travel to.Since i am raised in Singapore which is a small country I didn’t expect that it became vague as a user point of view where there are different cities and time zones in larger countries. I have taken account for what you say and i’m looking to improve the app by narrowing it down to cities or your lat/long which is what you have suggested :smile:

As for the extra day portion in the navbar you mention, I have used CSS grids on the navbar to implicitly handle the columns for different devices for me. Since the forecast shows 5 days in a 2 by 2 column on a mobile device it is actually difficult for me to fix the last column if I make the last column wider as the icon image will be pixelated esp on a larger device. The only other way around it is to include another extra day for a 6 by 2 columns. I have also tried having 5 rows and 1 column wide but I felt it won’t be a good user experience since the user needs to scroll more to change the main weather content especially the last day which I felt that is unideal for user experience.

Once again thank you for your feedback :smiley:

My pleasure! One last thing - when the page is loading, there is nothing that let’s the user know that it’s searching the API. Post a message or a loading icon when the API is loading the information to the site, and keep up the great work