Task management app with vue.js

by Vue.js Examples

Task Management App

About The Project

  1. This app allows users to manage projects and tasks visually using the board. One board represents one project and contains one or more lists.
  2. User can drag-n-drop to change the order of lists, the order of tasks inside the list, and also move task from one list to another as well.

Application Features

Allow user to,

  • create a new list

  • edit list name

  • delete list

  • rearrange the lists in the board using drag and drop

  • create new tasks

  • edit task

  • delete task

  • rearrange the tasks in the list by drag and drop

What I learned

  • Using a virtual DOM can reduces rendering costs and simplify the process of connecting UI and logic.
  • How to use Vuex as a state management method (VueX serves as a centralized store for all the components with rules ensuring their state can only be mutated in a predictable way).

(back to top)

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

(back to top)

Contact

Taesok Kwon – @twitter_handle – linkedIn account

Project Link: https://task-management-app-snowy.vercel.app/

(back to top)

GitHub

View Github