A Vue.js/Express.js web application inspired by freeCodeCamp.org https://youtu.be/Fa4cRMaTDUI

Original Code of the tutorial: https://github.com/codyseibert/tab-tracker

by LearnCode.academy https://youtu.be/mZY1yyrlJWU

# Installation
npm i -g vue-cli
vue list
vue init webpack client
cd client
npm i && npm run dev
npm install --save axios # library doing http Request to backend

• 37:00 basics post method on client with axios
• 44:00 UI for client
• 49:35 v-model: directive to create two-way data bindings on form input, textarea, and select elements
• 50:00 properties watch & mounted
• 53:00 event listener @click and method register

# Installations
npm init -f
npm i --save -D nodemon eslint
npm install express body-parser cors morgan # Dependencies to create express applictions

• 27:30 create post request with express

• include vuetify replaced by include bootsrap-vue
• 33:20 set up ui for errors
• 38:00 style to FE, include vuetify

• npm install --save sequelize sqlite303.1.8

• Sequelize is ORM used to connecting to dbs

• sqlite is a local instans of db

• install @hapi/joi

  • https://github.com/hapijs/joi
  • https://github.com/hapijs/joi/blob/master/API.md

• add sequelize

• add config

• add routes

• 06:23 create model

• import fs module (filesystem)

• 14:30 result of sqlize

• 16:20 include Controller

• 18:45 implement Logic for registration

• 23:15 include joi (deprecated)

• 25:00 expresse middleware AuthenticationControllerPolicy

• 24:00 implement login
• 49:00 install vuex
  1. state
  2. mutations
  3. actions
• To change the state you must invoke the mutations, in order to invoke the mutations you must invoke the actions.

• 26:02 implement login on server
• 32:35 install jsonwebtoken
• 35:20 encrypt password

• add create songs services to server and to client

• 06:10 show single song on Server
• bug in tutorial: findById -> deprecated (findByPk)
• 21:45 divide Viewsong in Folder
• 41:15 Edit Song

Important Changes

1. For sequelize 4.41.0, the $or and $like have been changed to [Op.or] and [Op.like]

2. In original version, the server sends 500 after posting or deleting a bookmark. The following adjustments are needed:

    __POST__
   
    In BookmarksService on client: delete params object
    ```javascript
      post (bookmark) {
    		return Api().post('bookmarks', bookmark)
    		}
    ```
   
    __DELETE__
    Exclude User from Controller on Server
   

• 37:30 create associations
• 41:00 add bookmark controller and router
• 47:17 add bookmark ui
• 1:04:00 install on client vuex-persistedstate