Watch Us Build a Trello Clone

Lessons

1. Tour of the App

3:19

2. Building our Board

16:15

3. Opening Tasks in a Modal

To be released on April 30

4. Adding and Editing Tasks

To be released on April 30

5. Drag & Dropping Tasks

To be released on May 7

6. Dragging Columns and Tasks

To be released on May 14

7. Extracting Components

To be released on May 14

8. Creating a Mixin

To be released on May 21

9. Extracting Drag & Drop

To be released on May 21
Notify me when new lessons are available.

Tour of the App

In this first Watch Us Build lesson Gregg Pollack works alongside Damian Dulisz, a Vue Core team member, to build a Trello like clone. Damian is also known for his work on the Vue-multiselect library and Vuelidate libraries.

In this course, we will be building an application together step by step including:

  • Setting up Vuex to read & write.
  • Saving state to local storage
  • Using the browser drag and drop API
  • Refactor big components into smaller ones
  • Creating reusable components
  • Additional refactoring

We welcome you to code along with us, which you can do by cloning this repo and checking out the ‘application-start’ tag with git checkout application-start, or just downloading this startup code. We will provide you with all the code we are writing below each video, and if you get stuck the finishing code for each level is tagged appropriately.

I think you’ll find Damian’s approach to refactoring components extremely useful and implementing the browser’s drag and drop API is fun to watch. In the next lesson we will get familiar with the code base, and start hooking up our data out of Vuex.