In this episode, we're starting to display cards within each of our columns—kind of like the classic Trello or Kanban board setup. We kick things off by setting up a new Card model and taking care of all the necessary database migrations. This includes adding a relation to the user, linking each card to its column, and including fields for a card's title, some optional notes, and an order field to keep track of their position within the column.
After the migrations, we go ahead and add some fake cards in the database, just to see everything in action. For now, we keep things simple by adding a few cards to the first column, each with its own order.
Next up, we wire up the relationships in our models, so columns know about their cards. Then, over in our Livewire column component, we make sure the cards are passed down correctly, wired up for Livewire reactivity, and rendered inside each column on the UI. The result: we see our cards displaying under the correct columns!
By the end of this episode, we've got a solid basic structure for nesting cards in columns. In the next episode, things will get even more dynamic as we tackle the ordering of columns and cards.