January 17, 2022
Build with Ben (#25) - Trello Clone with Nuxt 3 (Beta) (Part 2) Overview
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!
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
- Tig is one of my favorite tools for enhancing the git CLI experience. Highly recommended!
- 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. 😅
Here are all the resources mentioned in the video:
- GitHub Repo
- Nuxt 3
- 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!