Vue – side-project

I’ve decided to work on a side-project to show the possibilities of VueJs. And since sharing is caring I would like to show you some basics here – a short description and the first base design of an app. Please bear in mind that it is just a draft, not a complete project. Here are the sections for today:

  • Project description
  • Used libraries
  • Project first look

Project description

I’ve been using HIIT, a custom timer creator from the web to do my training routines. And decided to do create such a tool in VueJs to show you its’ possibilities. For now, it will be only a frontend application. With time I will add some backend to it (.NET, which I know well, or Go – totally new programming language to me, yet to be decided later). 

Design assumptions are to first create just a HIIT creator form with basic functionality (create & delete, to begin with). Then we add an update, displaying a list of existing timers. The third step is to add custom timers creation or add a bit of backend to make data persistent somewhere. Let’s now look at used libraries ?

Used libraries

Here is a list of used software and javascript libraries:

  • VueCLI
  • Typescript
  • Bootstrap 4
  • bootstrap-vue
  • vue-router
  • sass

Project first look

After basic libraries are in place, let’s begin with creating the first draft of an application. For now, it will be a single Vue component and from there I’ll refactor it to multiple components.

I know I still need to make some styling changes and add extra fields to this form – this will be done in the nearest future.

If you are interested in the entire code, you can find it in this repository.

Till next read!

PS. Basics of Vue are described in my previous article. If you missed it, you can check it out anytime – here.