Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davestewart/vue-trello-clone
A simple Trello clone
https://github.com/davestewart/vue-trello-clone
Last synced: 30 days ago
JSON representation
A simple Trello clone
- Host: GitHub
- URL: https://github.com/davestewart/vue-trello-clone
- Owner: davestewart
- License: mit
- Created: 2018-06-11T23:40:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-01T12:19:22.000Z (over 4 years ago)
- Last Synced: 2024-08-01T12:30:43.854Z (3 months ago)
- Language: JavaScript
- Homepage: http://trello.davestewart.io
- Size: 271 KB
- Stars: 152
- Watchers: 5
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Trello Clone
A simple Trello clone in Vue, Vuex and Bulma
## Features
Trello features
- Single board
- Re-orderable lists and tasks
Task functionality
- Title, description, date
- Quick entry and full entry modal
- Icons and colors to indicate due and overdue items
- Editable tasks
UI features
- Fast keyboard interaction
- Smooth animation
State management
- Vuex state management
- Persistence
## Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
npm run unit:watch
# run all tests
npm test
```
## Quick start
Once running in the browser, you can execute the following in the console to create the above layout:
```js
function days (num) { return new Date(Date.now() + (1000 * 60 * 60 * 24 * num)) }
store.dispatch('setLists', [ { title:'To do', items:[ { title:'Washing up', date:days(-5) }, { title:'Buy new suit', description:'Need to get this in time for the wedding!', date:days(2) }, { title:'Go to wedding', description:'', date:days(10) }, { title:'Go shopping' }, { title:'Post on Twitter about Trello clone' } ] }, { title:'Doing', items:[ { title:'Take Trello screenshot' }, { title:'Publish Trello readme' } ] }, { title:'Done', items:[ { title:'Build Trello clone', description:'Use Vue, Vuex, Vue Smooth Dnd and Bulma' } ] } ])
```