Build React, Next.js full-stack Kanban board Clone from scratch beginner to advance. Next.js 14 App router full course with MongoDB, Prisma, Tailwind css, Clerk auth.

Support Us: https://www.patreon.com/CodeScrapper

If you have any Project Contact me: https://www.fiverr.com/mehtabkazmi

🌐 In this tutorial, you'll explore prisma, tailwind css, mongodb, clerk auth and nextjs 14 to create visually appealing and scrollable kanban clone. One of the highlights of this tutorial is the integration of clerk auth and prisma.

What You'll Learn:

Nextjs 14, server actions, Prisma, dnd, Clerk auth, tailwind css, MongoDB and Nodejs.

The world of modern web development as we embark on a journey to create a feature-rich Kanban Board using cutting-edge technologies! In this step-by-step tutorial, we'll guide you through the process of building a Kanban Board clone from scratch using the powerful combination of Next.js, Tailwind CSS, Clerk Auth for authentication, and MongoDB for data storage.

Timestamps:

00:00 - Introduction

01:50 - Installation

04:25 - Header Design

16:20 - Clerk Authentication

28:20 - clerk sign-in / sign-up

38:36 - drag and drop (DnD) List setup

43:20 - Prisma and mongodb integration

46:36 - Prisma schema setup

57:25 - Get List design and integration (server side)

01:12:45 - Create List Integration

01:47:50 - Custom Hook

02:22:30 - Create List Header

02:30:05 - Drag and drop List functionality

02:37:20 - Update List Order integration

02:48:00 - Update List integration

03:07:20 - List Options

03:18:27 - Copy List integration

03:34:30 - Delete List integration

03:37:35 - Create card integration

04:01:35 - Display cards

04:12:50 - Drag and drop card between different List

By the end of this tutorial, you'll have a fully functional Kanban Board that not only showcases your newfound skills but also serves as a foundation for future web development projects. Get ready to level up your development game and join us on this exciting coding adventure!

Whether you're a beginner looking to enhance your web development skills or an experienced developer exploring the latest technologies.

Dive into the world of website development with us! Don't forget to like, subscribe, and hit the notification bell to stay updated on more tutorials that will empower you on your web development journey.