Taipei Typhoon Information

A Vue.js Project

  • Jade / Pug
  • Sass
  • JavaScript
  • Ajax with axios
  • Vue.js / Vue-cli
  • Google map API

Qick Summary

  • In order to implement in a "real" development workflow, I took the typhoon information guidance as a reference.
  • I have learned how to build the Vue.js project with vue-cli tools and manage npm moduls.
  • The website was built as single page, including two parts. One is information table and the other is power outage map.
  • Data in the website was implemented from government's open source with vue-axios instead of JQuery AJAX.
  • The single page application was completed by vue-router.
  • Currently, the website is available with GitPage and analzed with Google analysis.

Features

Information Table

Latest information of typhoon in Taiepi

  • Using data-binding of Vue.js framework to built a table with select form.
  • Each column can be sorted with its heading row.
  • The pagination was finished without any plugin.
  • I was much familiar with vue component's attributes and its usage.

Google Map

Google map of power outage in Taipei

  • I haved learned how to connect the google map API with ajax data.
  • Data could be filter with differect district selet form in Taipei based on data-binding of Vue.js.

Google Analysis (GA)

Website with GA

  • I have understand how to use GA on the specific website.
  • Currently, I can inspect my website with GA to analysis my users' behavior.