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

Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

Solutions

Support

Company

Legal

© 2023 GoRails, LLC. All rights reserved.