Build a Trello Clone With Livewire
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 2h 27m
  • Played: 0m
  • Remaining: 2h 27m
Join or sign in to track your progress

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.

Episode summary

Welcome to the course! In this first episode, we get a feel for what we'll be building—a Trello clone, powered by Livewire. We start things off with a demo of the final app, exploring a board that’s already set up so you can see the main features in action. If you’ve used Trello or Kanban boards before, you’ll recognize the flexible columns and draggable cards. We show off how you can move cards around, reorder columns, and yes—everything stays in place thanks to database persistence.

You’ll also see how to interact with the cards: clicking one opens a modal where you can edit the card title or add notes, which then get visually indicated with a little icon. Creating cards and columns is quick and easy, and of course, you can archive cards and columns if you want to clean things up. We even have a handy archive section, so you can bring archived items back whenever you need them—no permanent deletions here!

To wrap up the episode, we quickly walk through how to create a new board from scratch, add columns, and toss in some cards just to show how it all comes together. We point out that one of the trickiest parts will be handling the drag-and-drop sorting and keeping the application's state in sync, but everything is manageable. If you’ve never used Laravel before, don’t worry! In the next episode, we’ll set up a fresh Laravel project together with Laravel Breeze, and then it’s full speed ahead on building out this awesome project with Livewire.

So, buckle in—let’s build a Trello clone!

Episode discussion

No comments, yet. Be the first!