Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: link
Link to the repo: github
Asynchronous Javascript is tough to get a handle on anyway- doing projects using the fetch API, promises and async-await in React is a whole 'nother ballgame because you need to have some control over which components are refreshing and when. Otherwise you can get some unexpected behavior.
Design
I was inspired to take this on from a blog post suggesting it among other React project ideas. I've built weather forecast mini-sites with pure Javascript and also with Node before but have to admit building one with React was the most entertaining, and the most challenging.
You really get a sense of what React is used for whenever you import a component and create a list of them with the ES6 .map() method. That's something you really can't do without a front-end framework like React.
My project used a Search component, a conditionally-rendered Error component for error handling, a Today component which serves as the main display and a ForecastDay component which is used for rendering the little div's for the 5 day forecast. I used Flexbox for that piece as well and some absolute positioning to hold the 5 day forecast in place.
APIs
This project is an excellent introduction to working with APIs and specifically things like the fetch() API. After doing some text validation and manipulation I used the Mapbox API- which is absolutely great and free (unlike Google's Maps API) to geocode the user's search and get latitude and longitude.
After getting Latitude and Longitude from Mapbox we then need to ping a weather service. I've used DarkSky before but I just found the openweathermap.org API to be incredibly robust- all the way down to including images for each weather code.
Takeaways
Probably the trickiest part of this project was handling what should be rendered while we are waiting for promises to be fulfilled, as well as what should be rendered if your search is invalid or API call doesn't work. In a standard html,css,javascript page if something doesn't render you might not notice. In React, if your component is being fed props that are defined and you try to use them, your whole application might crash.
Highly recommend this project for anyone new to React.
Top comments (4)
Hey! Know you're just trying to crank these out, but I gave your app a quick test run on my phone (Pixel 2 XL) and if you're looking for any points of improvement, I'd just say consider adding in routing so you can bookmark certain cities and navigate in general.
Also, it has me incorrectly show up as New York by default, not sure if you're aware.
Lastly, the city names weren't exactly responsive. Don't wanna give away too much personal info, but Cincinnati kinda went off the screen.
Other than that I think it's a really good day's work! Congrats and keep it up :)
Thanks very much Nate, you taking the time to comment means a lot.
Yeah- the site is not mobile responsive. The reason being that would just involve a bunch of extra CSS styling that I already know how to do and CSS isn’t the focus of my challenge even though it sadly means results are imperfect.
And yes New York is the default city. Auto-detecting location would be a fantastic addition though- any thoughts on how? I know you can request it through the browser.
Bookmarks are also an excellent idea. I’ll probably start consistently adding back ends with Node and Mongo next week :)
Love it, had meant to find a good free weather API for several personal projects, I'll give openweathermap a go.
Also, congrats on getting 10% of the way though your 100 days yesterday!
Thanks Dr Hoggett! Yes both openweathermap.org and DarkSky are good options.