BETTER WEATHER

How To Use

Easy way without downloading

1. Click on Better Weather or go to http://kevinwu.site/Better-Weather/.
2. Type in a location and press the search button.

Want to use it by downloading/running it on localhost

1. Go to https://github.com/kevyw93/Better-Weather.
2. Click on clone and download zipfile and then unzip file.
3. Make sure javaScript is enabled.
4. Go into the right directory of the file. (If using MAC OS, you can open terminal type cd and drag file into terminal then press enter.)
5. In terminal you can type in npm install to install the packages.
6. Type in npm start and a browser should pop up with the app.
7. Type in a location! Happy using Better Weather app!

Initial Thought Process

I brainstormed on what technologies to use and decided on using React, HTML, CSS. I decided that I did not need Redux because it was a simple app where I can maintain local state on the top most component.

I wanted to model my weather app half based on how forecast is broadcast on TV and the other half on how weather.com shows it columns and rows.

I read through the openweathermap api docs to find what type of information I was suppose to render. I chose date, min-temp, max-temp, icon and description.

I created some hand-drawn wireframes and then decided to model it that way. These designs were based off of an easier to a simplistic and easy to use weather app so older people, like my parents, would have an easier time to using it.

Technologies Used

1. React - create-react-app package
2. jQuery - imported as a package (used ajax for api calls)
3. HTML5
4. CSS3
5. javaScript

Structure/Components of App

App Component

Generated by create-react-app. This component consists of my async function that calls the api function. It also chains the api call to update my local state.
My local state consist of a boolean that tells me if I am in loading stage which allows me to render a loading page. The boolean is updated to false upon fetching json data or if it failed to fetch. The local state also contains weather, current location and input value which is updated on event calls.

DailyComponent

App Component packages each day json data into strings and passes each into a daily component. This in turns allows me to render the 5 different daily components on the DOM.
DailyComponent receives, parses and renders a day of the week from App Component as well as temperature, description of the weather and icon.

Responsive Design

I used HTML5 and media queries to essentially make it website responsive for laptop/computer, tablet, and phone sizes.

Deployment

I used the packages gh-pages to help me deploy my app on github page.

Future Directions/Given More Time

TDD

If given more time I would build this app using test driven development using Jasmine specs for api methods and each class to mitigate technical debt.

Features

1. If given the monetary compensation and time I would pay for a membership with openweathermap and then expand it to allow for 16 days.

2. I would also implement a feature where on click of each day it would show an hourly break down of the day's temperature.

Style

I was also thinking about giving it a cooler feature where I would have logic that can use the humidity to style the icon transparency.

Fixes

Some fixes would be to do a little more research on mobile development or pixel sizing of phone apps/tablet apps so when I do queries it would look neater and nicer.