Playing
01. Introduction and demo
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
So welcome to this course on building a Trello clone with LiveWire. We're going to be doing a bunch of stuff here with LiveWire, which makes everything that you can see in this demo possible.
00:09
Let's go through this board that I have already got set up called Courses, with just a bunch of stuff in to demonstrate this. And then we'll go ahead and create a fresh board and see what that looks like. So as you can see, if you've used Trello before any kind of Kanban board,
00:23
you'll know that we've got a bunch of columns and we've got a bunch of cards. Now, of course, these are sortable. So for example, if I need to sort this to move one of the cards below another one, or move it all the way to the bottom, we can do that.
00:38
What we can also do is sort the columns. So for example, if I want to move done to this side, I can do that very easily. I can put it back as well. And of course, all of this is getting persisted in the database as we drag and
00:49
drop this. So when we refresh, everything just looks the same. What we can also do is, of course, move cards from one to another column. So everything that you would expect from this type of thing.
01:02
Okay, so let's look at some of the other details that we have here. Okay, so I'm gonna go ahead and click on any of these cards. You can see that we get presented with a modal where we can edit the card title. And we can also add some notes as well.
01:15
So if I add some notes in here and hit Save, you can see that we get this little icon to show that this has notes. And of course, when we open this up, we can read them, modify them, whatever we need to do.
01:26
We can also modify card titles as well. So if I go ahead and modify this, hit Enter, that updates the card title. And of course, we can add new cards as well. So let's just add a new one in here, hit Enter or Cancel, and that's created.
01:39
We can just start to move this around as we would expect. We can also archive cards. So let's just say that we wanted to archive this one just here. When I click on this, that disappears from that list.
01:49
We can access any of our archived items from the menu just up here. Now, this will list out all of the archived items. So let's go ahead and archive another one here just to demonstrate this. And you can see that we've got two in here.
02:02
Now, when we click Put Back, that's gonna put that back into the board for us so we can reuse it. So it doesn't actually delete it, it just moves it over to a separate section. We can also archive entire columns as well, which of course gets rid of them.
02:16
And we can do the same thing here in our Archive Columns section. We can put that back if we need to revive it. Okay, let's head over to our dashboard and let's create out a new board just to see what the process of creating new columns actually looks like.
02:28
So I'm just going to say Articles in here, and let's hit Create. That creates our board for us, of course, with no columns by default, although you could set it up to add an initial column. So let's just say Writing, hit Enter, and let's do another one and just say Done.
02:44
Okay, great, so we can add cards to this now, and we can go ahead and move them cards around. There we go, that is everything that we're building. And like I said, there's a ton of stuff that goes into this.
02:54
The sorting and dragging and dropping is probably the most complex part about this. But of course, we need to think about the state within our application as well, and what we need to refresh and when. Okay, if you're new to Laravel, let's go into the next episode and
03:09
get a fresh project set up with Laravel Breeze. Otherwise, we're going to go over and start creating out some of our board migrations in the episode after that. Okay, let's go and get a Trello clone built out with Livewire.
31 episodes•2 hrs 27 mins•11 months ago
Overview
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.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!