Trello Clone with Rails & Vue.js

In this series, we'll build a clone of Trello using modern Javascript using Vue.js and a backend in Ruby on Rails with realtime activity using ActionCable. This is a great intermediate level series showcasing how to approach using Ruby on Rails with modern Javascript and how these frameworks can talk to each other.

8 Lessons | 1h 52m | Intermediate

Rails & Vue.js Trello Clone - Part 1

Nov 29, 2017

Set up Rails models, scaffolds, and webpacker with Vue.js to start rendering our views

33

Rails & Vue.js Trello Clone - Part 2

Dec 05, 2017 Pro

Adding new cards to our Vue app, persisting them in Rails, and re-rendering our UI

21

Rails & Vue.js Trello Clone - Part 3

Dec 12, 2017 Pro

Implement the Vue.Draggable plugin to add drag and drop support to our Vue.js application and sync the changes to the server

9

Rails & Vue.js Trello Clone - Part 4

Dec 19, 2017 Pro

This episode we handle drag and drop of cards in their own column and also between columns in our boards

11

Vue.js Trello Clone in Rails - Part 5

Dec 27, 2017

Improve the design of our Vue.js & Rails clone of Trello by making lists more visually distinct and setting up horizontal scrolling

3

Vue.js Trello Clone in Rails - Part 6

Jan 02, 2018 Pro

Refactoring our trello clone into sub-components and introducing a global datastore to really clean up our code

0

Vue.js Trello Clone in Rails - Part 7

Jan 08, 2018 Pro

In this episode, we add card component, editing of cards, and the ability to create new lists

12

Vue.js Trello Clone in Rails - Part 8

Jan 15, 2018 Pro

Adding Vuex as our Data Store gives us the ability to add realtime updates to our trello clone across browsers using ActionCable

24