siddv/cardcaptor

cardcaptor

What it is

Simple list/card manager built in Vue.

Pretty barebones at the moment. Current functionality allows users to:

• Add/remove lists
• Add/remove cards
• move cards between lists
• Sync state to localstorage (Vuex-persist)

Future functionality:

• Due dates using Moment
  • Including UI for showing overdue, due soon etc
• Ability to rename cards + lists
• Ability to add descriptions/notes to cards
• Ability to drag and drop cards
  • potentially using vue-smooth-dnd
• Actually put effort into making the UI nice to use
• Add more comprehensive test, including testing the currently untested store

How it's built

• Application

  • Vue
    • Frontend framework
  • Vuex
    • State manager
  • Vue CLI
    • Build tool
  • Bulma
    • CSS library

• Testing

  • Vue Test Utils
    • Helper library for testing Vue components
  • Chai
    • Assertion library
  • Mocha
    • Testrunner

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Folder Structure

├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public - files which don't need transformation
├── src
│   ├── App.vue - Vue entrypoint
│   ├── assets
│   │   └── css
│   │       └── cardcaptor.scss - 'Global' scss stylesheets
│   ├── components
│   │   └── [component].vue
│   ├── main.js - JS entrypoint
│   └── store
│       ├── actions.js - store actions (none currently)
│       ├── mutations.js - store mutations 
│       └── store.js - main store, configures the initial state
├── tests
│   ├── store.config.js
│   └── unit
│       └── [component].spec.js