Mini Dev Projects 2.0
A collection of small projects that I designed and developed.
Development projects
Overview

The following projects are personal experiments on building single page applications (SPAs) with Vue.js, Vuex, Vue-router, Node.js and Webpack.

Comparing to traditional multi-page websites, SPA drastically reduces the amount of required page loads, resulting in faster and smoother interactions resembling the native mobile/desktop app experience.

Time

2017.9 - Present

Role

Visual design
Development (HTML, CSS, Javascript, jQuery, Ajax, Vue.js, Vuex, Node.js, Webpack)

Beat your inner monster

User stories:

  • Users can play a fighting game.

  • Users can attack, heal and give up.

  • Users can win the game by bringing the enemy's life chart to zero.

Technology:

  • HTML

  • CSS: Flexbox, Keyframe animation

  • Javascript: Vue.js, Vue transition

Monster game

Project screenshot

Simple Note

User stories:

  • Users can view a list of created notes.

  • Users can create new messages on notes with different colors.

  • Users can edit/delete existing notes.

Technology:

  • HTML

  • CSS: SCSS, Bootstrap

  • Javascript: Node.js, Vue.js, Masonry-layout, Autosize

  • Module bundler: Webpack

Simple Note

Project screenshot

KT Book Library

User stories:

  • Users can see my book library.

  • Users can filter and sort books in the library.

  • Users can see information of each book, including my personal highlights and notes.

Technology:

  • HTML

  • CSS: SCSS, Bootstrap

  • Javascript: Node.js, Vue.js, Vue-router, Vuex, Axios, Autoprefixer

  • Module bundler: Webpack

  • API: Google Books API

KT Book Library KT Book Library

Project screenshot