January 17, 2022

Build with Ben (#24): Trello Clone with Nuxt 3 (Beta) (Part 2) Overview

👋 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:

🤔 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!