/weather-forecast

Single page app that displays 5 day forecast. Responsive to mobile, tablet, and desktop

Primary LanguageJavaScript

Weather Forecast App

Live Site - Make sure you are using http not https (OpenWeatherMap's free API service does not support SSL)

Summary

The Weather Forecast app is a single page app that utilizes the OpenWeatherMap API from http://openweathermap.org/api to extract weather data and display a 5 day forecast. It also uses the autocomplete service from the Google Places API to extract the coordinates that will be used to make the call to the OpenWeatherMap API.

Languages

  • JavaScript
  • HTML5/CSS3
  • SASS

Frameworks and Technologies

  • Node.js
  • Express
  • React and Flux
  • Bootstrap (v3)
  • d3.js
  • Webpack
  • jQuery

Vendor Technologies

  • FontAwesome

Third-party APIs

  • OpenWeatherMap API
  • Google Places API

App features

  • Gets the current location weather with a one click button
  • Google Place API's autocomplete feature allows you to search for any city in the world
  • Queries and processes OpenWeatherMap API's data into a five day forecast
  • Mobile, tablet, and desktop responsive courtesy of Bootstrap features

Trade-off decisions

  • I wanted to implement an auto complete feature that will allow the user to easily search for a location. At first I looked into loading the provided JSON file of city data into MongoDB. From there I would set up a simple controller/action/model structure that would query the database and get a list of matches. However, I noticed that state is not one of the data elements that's captured in the provided JSON file. Since being able to search by city AND state was a requirement, I tossed this approach and decided to implement Google Place's Autocomplete feature. With these services I was easily able to provide an autocomplete feature that satisfied the requirement and provided coordinates to be used to make a request to OpenWeatherMap's API.

Challenges

  • Due to some attributes of the data provided by OpenWeatherMap's free API service (3-hour time slots, number of data elements can vary depending on time of request), I was required to create several functions that parsed and processed the raw data into a daily forecasts. Check out forecast.js for how I was able to do this. The code is commented and will shed some light on my thought process.