Vetero

Vetero means weather in esperanto language and it is a responsive single page application showing a 5 day weather forecast based on OpenWeatherMap API.

Used technologies

  1. Javascript (ES6)
  2. Typescript
  3. Vue.js
  4. CSS3 + SASS
  5. Webpack 4
  6. Babel 7
  7. Jest testing framework
  8. FomanticUI

Github repository

Link to the running application

About the app

The solution was implemented with use of the Vue.js framework.

The src files were divided into:

  1. views - containing application views. In case of this application is a single Main view.
  2. components - containing all the rest of non-view components,
  3. services - containing services for communication with external APIs and other functionalities utilized by components but not being part of their interface,

The main view of the application consists of 4 child components representing 4 separate parts of the application:

  1. CitySelector - a component responsible for selection of the city for the weather forecast,
  2. CurrentWeather - the component showing a current weather in the selected city,
    3. >
  3. DayMenu - the component showing overview of the weather forecast for all the days, and allowing for selection of the specific day,
  4. Forecast - a component showing detailed weather forecast in three different manners,
    1. Hourly,
    2. Daily Summary - with use of google charts,
    3. Details - showing more details,

The application was designed to be responsive.

The CitySelector autocomplete mechanism was implemented with a 500ms debounced request to the Node.JS server filtering the city list.

Tradeoffs

  1. Styling - not much focus was put on the styling and theming. Although the application was designed to be responsive and user friendly more styling adjustments could be made,
  2. Default city - for now it is (very ugly) hardcoded to Warsaw. It should be determined based on browser's navigator API (e.g. using vue-browser-geolocation module) or IP lookup.
  3. Metrics - The application supports only Celcius metric, while Kelvin, and Fahrenheit metrics are also supported by the OpenWeatherAPI,
  4. Usage of OpenWeatherMap default weather icons - A set of custom icons should be used.

Future Work

  1. Dealing with the tradeoffs,
  2. Optimize webpack chunk splitting configuration.
  3. Internationalization - for now support only of english language, though i18n support is configured so extension to more languages should be easy,
  4. Wind direction indicator - right now it is a string representation "N | NE | E | SE | S | WS | W | NW" a visual representation would be better.
  5. The Daily Summary forecast view with charts could be made more rich including more data (e.g rain, humidity) and more chart styling.
  6. The Details forecast views could also be improved showing more rich content.

How to run the application?

Project setup yarn install

Compiles and hot-reloads for development yarn run serve

In case of node-sass error run npm rebuild node-sass --force

Compiles and minifies for production yarn run build

Run tests yarn run test

Lints and fixes files yarn run lint

Run end-to-end tests yarn run test:e2e

Run unit tests yarn run test:unit