Build a Trello Clone With Livewire

Get ready to master drag and drop sorting in Livewire, by building a Trello clone.

We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.

Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.

Syllabus

01. Introduction
- 01. Introduction and demo
- 02. A fresh Laravel app
- 03. Setting up boards
02. Designing the board
- 04. Styling a scrollable board
- 05. Columns and headings
- 06. Fitting cards in columns
03. Sorting stuff
- 07. Showing columns
- 08. Showing cards in columns
- 09. Sortable Eloquent models
- 10. Sorting columns
- 11. Moving cards between columns
- 12. Handling moved cards
04. Managing the board
- 13. Creating columns
- 14. Editing column titles
- 15. Creating cards
- 16. Creating modals
- 17. Building a modal wrapper
- 18. Editing cards
- 19. Adding card notes
05. Archiving
- 20. Archiving cards
- 21. Archiving columns
- 22. Showing archived items
- 23. Restoring archived items
- 24. Moving archivable things to a trait
06. Dashboard
- 25. Showing all boards
- 26. Creating a new board
07. Improvements
- 27. Linking to boards
- 28. Reviewing authorization
- 29. Scoping orderable updates
- 30. Customising sortable styles
- 31. Autofocus when updating columns