This is a weather app project using React. It was the final project for SheCodes React, a six-week course teaching the React.js framework and how to fetch live data from API. The requirements for this project was to create an interactive weather forecast using live data.
- HTML/CSS
- JavaScript
- React
- VS Code
- Netlify
- Axios
When the user first accesses the project, they will view the current temperature and weather conditions in the initial city (Brisbane, Australia). The date and time listed, however, is set to the user's current location.
The weather app displays a search bar at the top with a submit button. The user can submit a location to access the weather temperature and conditions in that area. The API accessed is the SheCodes API, so some smaller towns may not be found.
Listed under the temperature are specific weather conditions for the specified location. These include humidity (%), wind speed (km/h), and what the weather is like (sunny, rainy, cloudy, etc.). The weather app contains a five-day forecast featuring the high/low temps for each of those days.
In this project, the temperature starts in Celsius, but the user has the option of switching between Celsius and Fahrenheit.
I started by outlining the layout of the weather app. As this was the second weather app project through SheCodes, I decided to challenge myself with a new layout so I could keep practicing different HTML/CSS coding.
After selecting a layout, I coded the main HTML and made further adjustments throughout as I added more elements. Then I started to add my CSS to the project, taking into consideration different elements I wanted to improve from last time.
Finally, I started to add the JS using the React framework. This was somewhat trickier for me, as I was still getting my head wrapped around how to organize the components (i.e., how many elements to add into each and what was the less convoluted way to import the components).
In this project, I learned that structuring the sections (components) was crucial, as it is quite easy to get confused across when working on these individually. I also learned to continually save and test/check things were working correctly. Since I'm new to React, it is very easy to code large portions and then get confused something wasn't working correctly. So by continually testing line-by-line, I could narrow down where my issues became apparent. This also made reading the debugging messages easier.
I also used a different API to the others in the workshop. (I used SheCodes API rather than Open Weather API.) This meant that the structure of my coding differed from the templates and help guides. As such, I had to do additional research to determine what information I needed to add and how to access that information.
Additionally, I challenged myself to pay closer attention to different styling elements. For example, the outline of the search input was blue. Changing its color was not something I learned in the course, so I had to search for and read additional documentation to ensure it was a color I was happy with. It was a small detail that I didn't think of in my previous Vanilla Weather App project, but it's a minor detail that made a big difference in the final presentation.
These are some of the improvements I would like to work on next time:
- I would use another API framework to practice accessing information in different formats. Although, my API was different from the guides, I did end up using the same one as my Vanilla Weather App project.
- I would add comments throughout to make reviewing easier and maintain best practices.
- As my skills grow, I would like to challenge myself further by learning how to switch all temperature information between Celsius and Fahrenheit. At the moment, only the current temperature switches between the two ranges.
React Weather App