patrickmc21 / weathrly

Weathrly

View it live here

Description

Weathrly is a weather app built on the ReactJs framework. The motivation behind the layout was to present a user up to date weather info for any location they choose. We took forecast info for the curernt hour, the seven hour forecast, and the ten day forecast and overlayed it on vivid, high resolution images tied to the current condition to give the user a more visceral feel for the current weather conditions.

Weathrly uses the Weather Underground API to retrieve current weather conditions and presents it to the user on a React based app. The app will take new users to a welcome screen where they can enter in their location, or if they are a returning user the app will take the user to their last searched location. The search bar makes use of a prefix-trie to give the user auto-complete functionality, and the auto-complete is pre-populated with a list of 1000 cities.

To download this app, just clone down this repo and retrieve a developer key for the Weather Undergroudn API. The key must be in a file lib/key.js and named to a variable key and exported.

Static Site Layout

Installation

You must have npm installed on your machine

Clone down this repository

To install: npm install

To start: npm start

To test: npm test

weathrly's Issues

handle user-input not found

Application should handle when a user searches for a location that is not found by the API. Team should research different ways to handle unfound locations by looking around on different weather and other location searching applications and implement a solution for their project that they find intuitive.

Phase 2 lint

resolve all lint issues phase 2

Test suite

4 - Project has a running test suite that exercises the application at multiple levels (feature and unit). The test suite covers almost all aspects of the application.

3 - Project has a running test suite that tests and multiple levels but fails to cover some features. All functionality is covered by tests. The application makes some use of feature testing.

Current Weather Component

the name of the current city
the current condition
the current day
the current temperature
the expected high and expected low for the day
a summary of what the weather is going to be like that day (“Windy, chance of a few late night showers. Lows overnight in the mid 50s.)

10 day forecast

the name of the day
an image that reflects the weather
the projected high and low temperature

10 day hourly breakdown

If a user clicks on a specific day on the 10 day forecast the application should display an hourly breakdown of the forecasted weather for a 24-hour period.
For each hour it should display an image that reflects the weather
For each hour it should display the projected temperature and the hour

Phase 1 refactor

remove duplicate code, etc

App static comp creation

Phase 2 Test suite

develop test suite for phase 2 components

search component

The search component consists of an input field and a submit button that allows the user to search for a location (the location should work with both a zip code and city/state).

Once the desired location is submitted there should be a way for the user to change location information. Once the location information is changed the weather should reflect the desired location.

location persists after refresh.

welcome page

Your application should have a welcome page that greets the user. The welcome page has a search component.

LINT

app should show less than 5 eslint complaints

Accesibility

The application is fully accessible.
The application can be used without a mouse
zero axe-core violations

micro interactions

Add one or two examples of Micro-Interactions found on Dribbble or Behance in your ReadMe that inspired your design

SASS

The application is fully accessible.
The application can be used without a mouse
zero axe-core violations

7 hour forecast

the hour
an image that reflects the weather
the projected temperature

Phase 1 lint

resolve all eslint issues phase 1

Phase 2 refactor

clean up that code!

auto-complete

Add autocomplete functionality to your search input
import your completeMe into your Weathrly project. Populate it with this list of city/states. When a user starts typing in a city/state or zip code display a list of possible suggestions using your completeMe’s suggest function.

Phase 1 Tests

implement testing suite for phase 1 components