Trello is a popular project management tool that you might already be familiar with. It uses a Kanban-style board in order to keep up with the progress of different tasks. You can add new columns to the board, reorder them as you see fit, rename them, and add new tasks to them. In this course, we're going to build a much simplified version of this Trello board.
It's going to look something like this. It has the same columns in here where you can add new ones, rename existing ones, delete columns, reorder them, add new tasks, and drag tasks between different columns. While of course we won't be building out all of the awesome features of Trello, at the end of the course you will walk away with a pretty functional and nice Kanban or Trello board. The library that's going to power a lot of this functionality is called ViewDragable.
It exposes a dragable component that allows us to easily perform drag and drop functionality. You can do things like reorder items in a list, or have multiple lists and drag items between them. You can also clone items between different lists, as well as enable nice transitions between the different positions. Under the hood, ViewDragable is powered by SortableJS.
js. Both of these libraries are really very powerful and are going to make working with drag and drop a breeze. Finally, we'll utilize a couple of different composables from the popular ViewUse library to enable things like some keyboard shortcuts, being able to option drag in order to clone, tasks within our board, as well as persist our tasks and columns to local storage. Oh, and I almost forgot, we'll also be using Tailwind CSS in order to rapidly style our application.
Alright, I hope you're as excited as I am for this very hands-on and very practical course. Let's start building in the next lesson. Trello is a popular project management tool that you might already be familiar with. It uses a Kanban-style board in order to keep up with the progress of different tasks.
You can add new columns to the board, reorder them as you see fit, rename them, and add new tasks to them. In this course, we're going to build a much simplified version of this Trello board. It's going to look something like this. It has the same columns in here where you can add new ones, rename existing ones, delete columns, reorder them, add new tasks, and drag tasks between different columns.
While of course we won't be building out all of the awesome features of Trello, at the end of the course you will walk away with a pretty functional and nice Kanban or Trello board. The library that's going to power a lot of this functionality is called ViewDragable. It exposes a dragable component that allows us to easily perform drag and drop functionality. You can do things like reorder items in a list, or have multiple lists and drag items between them.
You can also clone items between different lists, as well as enable nice transitions between the different positions. Under the hood, ViewDragable is powered by SortableJS. js. Both of these libraries are really very powerful and are going to make working with drag and drop a breeze.
Finally, we'll utilize a couple of different composables from the popular ViewUse library to enable things like some keyboard shortcuts, being able to option drag in order to clone, tasks within our board, as well as persist our tasks and columns to local storage. Oh, and I almost forgot, we'll also be using Tailwind CSS in order to rapidly style our application. Alright, I hope you're as excited as I am for this very hands-on and very practical course. Let's start building in the next lesson.