Mini dev projects 2.0

A collection of personal projects that I designed and developed.

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.

For the last project (KT Book Library), I also experimented with the modern full-stack development technology, creating the back-end end points with Node.js, storing the data through MongoDB Atlas, deploying it on Heroku and using Amazon S3 to store static files.

Time

09/2017 – 09/2018

Role

Design and development (HTML, CSS, Javascript, jQuery, Vue.js, Webpack, Node.js, MongoDB, Heroku, Amazon S3)

Beat your inner monster (Live)
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
Simple note (Live)
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
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.
  • Users can log in and add/delete/edit books.
  • Users can log out.
Technology:
  • HTML
  • CSS: SCSS, Bootstrap
  • Javascript: Node.js, Vue.js, Vue-router, Vuex, Axios
  • Module bundler: Webpack
  • Database: MongoDB Atlas
  • Deployment: Heroku
  • Image storage: Amazon S3