Skip to content
Task Management Application using Vue.js
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/images Removed unused components, renamed plugin file name, added project im… Jun 2, 2019
public Deployed on netlify, added netlify.toml configuration for netlify dep… Jun 3, 2019
src Split up router configuration into index.js and routes.js file for ro… Jun 30, 2019
tests/unit
.DS_Store Initial commit May 4, 2019
.eslintrc.js Removed unused components, renamed plugin file name, added project im… Jun 2, 2019
.gitignore Updated .gitignore to ignore tests/coverage/** directories and files Jun 30, 2019
.travis.yml Updated jest config and travis configuration to point to correct cove… Jul 1, 2019
README.md Updated README.md with badges Jul 1, 2019
babel.config.js Removed unused components, renamed plugin file name, added project im… Jun 2, 2019
jest.config.js Updated jest config and travis configuration to point to correct cove… Jul 1, 2019
netlify.toml Deployed on netlify, added netlify.toml configuration for netlify dep… Jun 3, 2019
package-lock.json Added Travis-CI Build Configuration file with code coverage displayed… Jul 1, 2019
package.json Added Travis-CI Build Configuration file with code coverage displayed… Jul 1, 2019
postcss.config.js Updated Actions, method names, component names and event names. May 7, 2019
prettier.config.js Updated Actions, method names, component names and event names. May 7, 2019
vue.config.js cleaned vue.config.js and renamed npm command from deploy-dev to depl… May 8, 2019

README.md

Task Management Application using Vue.js

Build Status Coverage Status

This is the supporting github repository for Task Management Application articles

The app allows you to manage projects and tasks visually using board. One board represents one project. A board contains one or more lists. Each list represents the category of tasks, such as Todo, Doing and Done. You 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- to manage the project as it moves through different stages.

If you haven't read the earlier article in this series, then here is the article link Thinking in components with vue.js

Project Image

Application features

This is a multi-page application with a rich feature set implemented right from the start. Below is the feature list of this app.

Boards

Allow user to,

  • view existing boards in the dashboard
  • archive and restore the boards
  • view individual board contents
  • create a new board
  • edit existing board information

Lists

Allow user to,

  • create a new list
  • edit list name
  • archive and restore lists
  • rearrange the lists in the board using drag and drop

List Items

Allow user to,

  • create new and update existing items in the list
  • rearrange the items in the list by drag and drop
  • move tasks among the lists using drag and drop

Application Demo

One click deployment to netlify

Deploy to Netlify

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# run unit tests in watch mode
npm run test:unit

# run test coverage
npm run test:coverage

# To deploy your app on surge make sure you have surge cli
# installed globally on your machine.
# If you have it insalled already then feel free to skip this step
npm install -g surge

# Build and deploy the app on surge.sh in staging environment
# Note: Before running this command, please change the site url
# used for this command in package.json file.
npm run deploy-staging

# Build and deploy the app on surge.sh in production environment
# Note: Before running this command, please change the site url
# used for this command in package.json file.
npm run deploy
You can’t perform that action at this time.