https://github.com/ajsalemo/weather

A weather application build with React, Node, Leaflet and Material UI
https://github.com/ajsalemo/weather

axios dotenv html jsx leaflet material-design material-ui moment nodejs openweathermap-api react redux redux-form redux-persist spa weather-api

Last synced: about 2 months ago
JSON representation

A weather application build with React, Node, Leaflet and Material UI

• Host: GitHub
• URL: https://github.com/ajsalemo/weather
• Owner: Ajsalemo
• Created: 2018-12-20T04:52:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T04:29:07.000Z (almost 2 years ago)
• Last Synced: 2023-03-03T22:14:07.018Z (almost 2 years ago)
• Topics: axios, dotenv, html, jsx, leaflet, material-design, material-ui, moment, nodejs, openweathermap-api, react, redux, redux-form, redux-persist, spa, weather-api
• Language: JavaScript
• Homepage: https://reactjs-weather-application.netlify.app/
• Size: 2.99 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# React Weather Application

[React Weather Application](https://reactjs-weather-application.netlify.app/ "React Weather Application")

A mobile friendly app that gives you the current local weather as well as the option to search any place you'd like.

## User Flow

This application is designed to prompt you for your location upon initial load - upon accepting, it will display your current, hourly, five day forecast and a map location with radar layers consisting of cloud and precipitation.

If declined, it will display a default city with its related information. This still gives the user the option to search for another location. 

![](https://i.imgur.com/4nZENbj.png)

### Search

Weather data is obtained through [Openweathermaps API](https://openweathermap.org/ "Openweathermaps API"). For now the only option to search is by location name - ex, "Charlotte, US". The API's query is set up by "City, Country". 

### Location

The footer contains a location icon showing whether or not your location is enabled for the site. Blue is enabled, red is disabled. This can be changed in your Chrome settings.

![](https://i.imgur.com/1HCIV6P.png)

### Technology

This was built using React, Redux, Node, Material-UI, Axios and React-Leaflet. Also including some additional NPM packages.