Practice of React with a Project getting weather data

I make this App to practice React. The APP search for cities and retrieve weather data from the chosen city using OpenCage API and DarkSky API.
Firstly, I wanted to to use React only, so when arriving to the problem of passing information(state) between components at the same level I tried React Context. Things didn’t go well and I tried REDUX instead, library that sorted my problem.
My vote for REDUX: it is a bit harder initally, but the arquitecture is clearer, so components access the state from whichever level they are.

Hey Miguel,

nice to meet you! :wave:

Great work so far!

My ideas:

  • I would love to see units or even small explanations; e.g. I don’t know what Humidity 0.85 or Visibility 13.37 stands for.

  • a Back button would be user-friendly; when I go back manually, the old data shows up

  • an autofocus on the input element would be great

  • when opening the app, there is the empty result box showing up; I think hiding it on the initial view makes sense

  • a loading indicator while fetching the data would be cool

  • when I decrease the width of my browser, the content gets cut off; this is important for people who read your page on a smartphone:

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

Thank you for your feedback. Very kind.
I will sort all the issues an further and I will try to improve the styling. (I focused more in funcionality and neglected styling and all related to marketing purposes in general)
Regarding the last point about how responsive is the web, I checked in my browser Chrome and it works fine wichever size I put the browser.
On the other hand, I checked in my smartphone, a Huawei MYA-L41 and resizes fine. The view of the list of cities is correct.
I use sematic framework for styling.
May I ask wich mobil phone are you using?
Thank you

1 Like

I tested it on my notebook on Chromium.
Under 300px width it gets cut off.

I think the best idea is to get some other people who test this for you.


I addressed all the issues and I made a version 2 of the App:

Regarding the last point (about how responsive it is) I checked in a Samsung and I downloaded Chromium as well to check in that browser .I found all those checks fine. I will test mores times anyway.
I would like to do a version 3, with a styling more attractive. Might be the draw of a clock in the top of the page, updating every second with some photos of the chosen city. Will see.

Thank you,

Great work! :+1:

Then probably this is a problem on my site, e.g. caused by my adblocker.

I reshaped the project with a more attractive User Interface.
In the way I learn and applied CSS Grid, I made a function to toogle the measure of temperature between Celsius and Fahrenheit, pretty much as in Google.
I add up photos of the chosen city to decorate a bit the page with the weather details and I think the layout of the mobil is some better.
The code is:

1 Like