Full Stack Trello Clone with Next.js 14, Beautiful DnD, Auth.js and Prisma

Posted on:December 4, 2023|Last Updated:March 18, 2024|Category: Production App

Introduction: The Quest for a Streamlined Project Management Solution

In my relentless pursuit of efficient project management, I find myself immersed in a sea of productivity tools like Trello, Notion, and Asana. Undoubtedly, effective project management can transform the way we work – delivering projects on time, within budget, and with minimal scope creep. Yet, I've noticed a common trend among modern project management tools. They start as elegant solutions to specific problems but, over time, succumb to the demands of a diverse user base, bloating with unnecessary features. This observation has inspired me to embark on a mission: creating my own project management tool – welcome to NextBoard.

For those unacquainted with the developer's journey, it often commences with the creation of a task manager. This miniature endeavor encompasses a myriad of essential concepts and offers a profound understanding of the chosen framework. It can range from a basic checklist with checkboxes and a delete button to a full-fledged application, complete with user accounts, multimedia integration, and more. Today, I am thrilled to unveil my latest task management masterpiece.

Let's commence at the genesis of this project. I have an unbridled affection for web animations, whether they involve canvas, framer-motion, WebGL, or any element that breathes life into a webpage. However, one type of animation had eluded my repertoire until now – Drag and Drop (DnD). DnD, in its essence, empowers users to click or tap an object, hold it, and seamlessly relocate it to a new position. As mentioned earlier, project management tools often spiral into complexity, occasionally stifling creativity. To counter this trend, I decided to infuse the time-tested Kanban board with a fresh perspective. My vision encompassed draggable columns, tasks, and rich task elements such as labels, dates, activity logs, and more. Once I had distilled the project's scope into an MVP (Minimum Viable Product), it was time to roll up my sleeves and commence the journey.

Selecting the ideal tech stack was a breeze, given my prior experience. Next.js 14, with its new server actions, emerged as the clear choice for streamlined database operations. This technology would allow us to securely execute intricate database tasks without relying on numerous API routes, translating into enhanced performance, robust security, and an enriched developer experience. It also granted me a granular approach to database interactions. This decision seamlessly led me to Prisma ORM, a dynamic choice that has recently undergone significant performance improvements, rivaling other prominent ORMs like Drizzle.

Authentication, a critical component, led me to NextAuth.js. While its adaptation to the new app router server component architecture was initially slow, a recent Beta release of Auth.js V5 offered full React server component support. This exciting development ignited my curiosity, and I eagerly anticipated putting it to the test.

The last challenge lay in selecting the perfect Drag and Drop (DnD) library. While crafting my DnD library sounded enticing, reinventing the wheel seemed unnecessary. During a long drive, I stumbled upon an insightful interview with Alex Reardon, the mind behind Asana's beautiful-dnd library. It aligned precisely with my requirements. However, as fate would have it, Alex had relinquished maintenance of the library, with many features becoming deprecated. Nevertheless, he was developing a new library, pragmatic-dnd, which held promise for the future. My search ultimately led me to dnd-kit, a contemporary solution with substantial traction. It appeared to be the obvious choice until I uncovered its limitations regarding nested drag and drop lists – a fundamental requirement for my project. My relentless quest led me to a remarkable fork of beautiful-dnd that offered impeccable performance and flawlessly met my animation and user experience criteria.

With my tech stack in place, it was time to embark on the monumental task of building NextBoard.

To be continued in part 2...

Related Projects

Experiment

Dialogue Creator

A tool for designing non-linear game dialogues with a visual node-based interface. Features include adding characters, messages, branches, and randomness.

Next.js

Tailwind

Three.js

React

ReactFlow

Production App

Full Stack Workout Tracker with Next 14, Prisma, & Clerk

Full stack workout tracking app. Browse over 800 exercises, create your own routines, record your workouts and view your data with beautiful charts. Built with Next.js 14, Clerk and OpenAI

Next.js

Tailwind

Prisma

OpenAI API

React