Alright, let me tell you about my weekend project, this thing I’m calling “boardone.” It’s basically a super simple kanban board I whipped up. Don’t expect anything fancy, this was just me messing around and trying to learn some new stuff.
First, I decided I wanted to use a framework I haven’t really touched before. So, I picked *. I’ve dabbled, but never really built anything. So, I started by just setting up a basic Vue project with the Vue CLI. That was pretty straightforward – vue create boardone and just picked the default options. Easy peasy.
Next up, the layout. I wanted three columns: “To Do,” “In Progress,” and “Done.” I spent a while wrestling with CSS Grid to get the columns looking right. Honestly, CSS Grid still feels like black magic sometimes. I messed around with grid-template-columns and grid-gap until it didn’t look completely terrible. I probably spent way too long on this part, but hey, gotta learn somehow!
Then came the fun part: making the cards. Each card needed a title, maybe a description, and the ability to drag and drop them between columns. I used Vue components for the cards, so each one was its own little isolated world. Getting the drag and drop working was a bit of a pain. I ended up using the draggable attribute and some JavaScript to handle the data transfer. It’s not perfect, but it works (most of the time).
To manage the state (i.e., where each card is), I used Vuex. Vuex felt a little overkill for such a simple project, but I figured it’d be good practice. I created a store with actions for adding cards, moving cards, and deleting cards. The components dispatch actions to the store, and the store updates the state. Simple, right? (Okay, maybe not that simple).
I spent a good chunk of Sunday just tweaking things. Making the cards look a little nicer, adding some basic error handling (like, what happens if you try to drag a card onto itself?), and trying to make the whole thing a little more responsive. It’s definitely not production-ready, but it’s a functional little kanban board.
Honestly, the biggest takeaway for me was just getting more comfortable with * and CSS Grid. I still have a lot to learn, but at least now I have something to show for my weekend. Plus, I have a feeling this little “boardone” project will be the starting point for something bigger down the road.
If I were to do it again, I’d probably look into a more robust drag-and-drop library. The native draggable API is a bit clunky. Also, I’d spend more time on the styling. Right now, it’s pretty basic. Maybe add some colors, some animations, something to make it pop.
So yeah, that’s “boardone” in a nutshell. A simple, slightly janky, but ultimately functional kanban board built with *. Not bad for a weekend, eh?
