https://github.com/stevendelro/react-weather-dashboard

v2.0 A Weather Dashboard built with React Hooks, Dark Sky API, Recharts, and Material-UI.
https://github.com/stevendelro/react-weather-dashboard

axios darksky-api mapbox material-ui material-ui-react momentjs react react-hooks react-map-gl recharts styled-components uuidv4

Last synced: 8 days ago
JSON representation

v2.0 A Weather Dashboard built with React Hooks, Dark Sky API, Recharts, and Material-UI.

• Host: GitHub
• URL: https://github.com/stevendelro/react-weather-dashboard
• Owner: stevendelro
• Created: 2020-04-18T19:55:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T19:46:29.000Z (almost 2 years ago)
• Last Synced: 2024-05-27T22:04:54.355Z (6 months ago)
• Topics: axios, darksky-api, mapbox, material-ui, material-ui-react, momentjs, react, react-hooks, react-map-gl, recharts, styled-components, uuidv4
• Language: JavaScript
• Homepage: https://umbrellapp.now.sh/
• Size: 1.97 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Unbrellapp - React hooks, Recharts, Material UI

## [LIVE DEMO](https://umbrellapp.now.sh)

## Why build this app?

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](https://material-ui.com/)

* The charts are made with [Recharts](https://https://recharts.org/en-US/). 

* The weather icons were created by [Lance Snider](https://codecanyon.net/user/dxc).

## Key Features

### Geolocation API

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.

### Search, Map, Weather

I used the [MapBox API](https://mapbox.com) 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](https://darksky.net) to retrieve weather info.

### Charts for better Data Visualization

I used Recharts to display all the weather data.

### Responsive Design

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.