I built this project to teach myself how to use React hooks and to work on understanding how to create better UI.
- The UI was created with Material-UI
- The charts are made with Recharts.
- The weather icons were created by Lance Snider.
Upon launch, the app will ask for your permission to use your browser's geolocation coordinates to automatically fetch relevant weather data. If denied, you'll be presented with a simple search bar.
I used the MapBox API to retrieve the coordinates of any search location.
A really cool byproduct of this is that MapBox handles misspelled words and finds the location of a place that most closely resembles what you might be looking for.
Once MapBox gets the coordinate information, I send that info to the Dark Sky API to retrieve weather info.
I used Recharts to display all the weather data.
I've barely scratched the surface with understanding and utilizing all the advanced features of Material UI. In particular, I would like to dive deeper into theming and heavier component customizations. This app began with MUI's dashboard template and I built it up from there.
The UI is completely responsive and works across all screen sizes.