👋 Introduction

This week's Build with Ben is a continuation of the Build with Ben (#20): Trello Clone with Nuxt 3 (Beta) (Part 1), where we pick up and continue building a Trello clone!

📋 Outline

For this session, here's what you can expect to learn about with the respective timestamps in the video:

• 00:00:00 - Introduction
• 00:01:03 - Background on the App
• 00:04:43 - What is tig?
• 00:08:42 - Cleaning Up the UI a Bit
• 00:22:00 - Adding ability to move cards between columns
• 00:39:50 - When does it make sense to use a global CSS file?
• 00:43:30 - Continuing Work on BaseCard Component
• 00:45:07 - Add ability to migrate cards from column to column
• 00:58:23 - Exploring Drag and Drop Functionality with Vue Draggable
• 01:03:38 - Hacking Together a MVP Drag and Drop
• 01:20:38 - Final Thoughts

⭐ Highlights

1. Tig is one of my favorite tools for enhancing the git CLI experience. Highly recommended!
2. Vue Draggable ended up being a wash as far as being able to get up and running quickly, but we were able to utilize VueUse's useDraggable to make a very rudimentary prototype. Keyword: rudimentary. 😅

📚 Resources

Here are all the resources mentioned in the video:

• GitHub Repo
• Nuxt 3
• Trello
• Vue Draggable
• VueUse (useDraggable)
• Build with Ben (#23): VueUse + Vue 3
• Tig CLI Tool
• Learn with Jason - Build Your Own Drag and Drop

🤔 Final Thoughts

For my one major takeaway from this experience, when things don't work, bring it down another level to find a path forward. The reason this is critical is because this means you'll make progress, which often yields opportunities for growth and learning. So while my drag and drop is 99.999% far from production ready, it was still a lot of fun!

And if you'd like to attend live for Build with Ben, be sure to check out the schedule here at https://www.bencodezen.io/schedule. Thanks for reading!