Master AI-Assisted Development by Building a Real-World Kanban Board

What you'll learn

Master Cursor AI's capabilities and limitations

Learn effective prompting techniques for code generation

Understand how to validate and verify AI-generated code

Debug and troubleshoot with AI assistance

Create reusable AI instructions using Notepads

Handle AI hallucinations and knowledge cutoff issues

Requirements

Basic understanding of React and TypeScript

Basic understanding of databases and SQL

Desire to learn AI-assisted development

Interest in modern web development practices

Description

Dive into the future of web development with this comprehensive course that teaches you how to leverage AI to build modern web applications faster and more efficiently. Through building a full-featured Kanban board application, you'll learn both practical AI-assisted development techniques and cutting-edge web development practices.This isn't just another Next.js course – it's a deep dive into how AI can transform your development workflow. You'll learn how to effectively communicate with AI tools, understand their limitations, and use them to accelerate your development process while maintaining code quality and best practices.What You'll BuildYou'll create a production-ready Kanban board application featuring:Dark/light theme supportResponsive, modern UI with shadcn/uiPostgreSQL database with Drizzle ORMServer-side data mutationsType-safe frontend and backendDocker containerizationWhat You'll LearnAI-Assisted Development:Master Cursor AI's capabilities and limitationsLearn effective prompting techniques for code generationUnderstand how to validate and verify AI-generated codeDebug and troubleshoot with AI assistanceCreate reusable AI instructions using NotepadsHandle AI hallucinations and knowledge cutoff issuesModern Web Development:Build with Next.js 15 and React Server ComponentsImplement modern UI patterns with shadcn/uiCreate type-safe database operations with Drizzle ORMHandle server-side mutations with Server ActionsManage application state effectivelyStructure a production-ready Next.js applicationImplement proper error handling and loading statesWork with Docker for development environmentsBest Practices:Write maintainable and scalable codeImplement proper TypeScript types and validationHandle form validation and user inputManage database schema and migrationsStructure server-side logic and API endpointsImplement proper error handlingCreate reusable components and utilitiesCourse Format4.5 hours of video contentHands-on project-based learningStep-by-step implementationReal-world problem solvingBest practices and patternsCommon pitfalls and solutionsWho This Course Is ForPerfect for:Professional developers wanting to leverage AI in their workflowFull-stack developers looking to master Next.js 15Developers interested in modern React patterns and best practicesEngineers who want to learn practical AI-assisted developmentTeams looking to adopt AI-assisted development practicesYou'll be successful in this course if you have:Basic understanding of React and TypeScriptFamiliarity with modern jаvascript/TypeScriptBasic understanding of databases and SQLDesire to learn AI-assisted developmentInterest in modern web development practicesNot required, but helpful:Experience with Next.jsFamiliarity with ORM conceptsUnderstanding of REST APIsBasic Docker knowledgeWhy This Course?Practical Skills: Learn by building a real-world application that you can add to your portfolio.Modern Stack: Work with the latest technologies including Next.js 15, React Server Components, and Drizzle ORM.AI Focus: Master AI-assisted development techniques that will multiply your productivity.Best Practices: Learn production-ready patterns and practices used in professional development.Comprehensive: Covers both frontend and backend development, including database design and API implementation.By the end of this course, you'll not only have built a full-featured Kanban board application, but you'll also have mastered AI-assisted development techniques that will transform your development workflow. You'll be equipped with the skills to build modern web applications faster and more efficiently, while maintaining high code quality and following best practices.Join me in exploring the future of web development, where AI becomes your pair programmer, helping you write better code faster than ever before.

Overview

Section 1: Introduction

Lecture 1 Welcome and What You'll Learn

Lecture 2 Project Demo: Full-Stack Kanban Board in Next.js

Lecture 3 About LLMs, Embeddings, Context and Limits of AI

Lecture 4 Getting Up & Running with Cursor AI

Lecture 5 Course Resources & Getting Help

Section 2: Cursor AI Basics

Lecture 6 Using Composer

Lecture 7 Using Chat and Adding Docs

Lecture 8 Cursor Rules, Inline Edits, Tab Completion

Section 3: Building the Project User Interface

Lecture 9 Setting Up UI Library Using Composer (Dealing With Knowledge Cutoff)

Lecture 10 Building the Basic Kanban UI (Cursor Removing Code!)

Lecture 11 Updating the Card UI (Composer as an Agent)

Lecture 12 Adding Dialog & Drop-downs (Fixing Issues Using Cursor)

Lecture 13 Avatars (Code Refactor)

Section 4: Backend: Setting Up Docker, DB & Fetching Data

Lecture 14 Restore the Project State - How to Back Off Changes

Lecture 15 Setting Up the Database (Keep a Firm Hand on AI!)

Lecture 16 Running the Database using Docker (and Troubleshooting)

Lecture 17 Connecting to DB using Drizzle (Using Docs & Web)

Lecture 18 Creating the DB Schema (Migrations)

Lecture 19 Fetching Columns & Tasks using Server Components

Lecture 20 Adding Loading State (Cursor Edit + Fixing Hallucinations)

Section 5: Backend: Building Server Actions & Spoon-Feeding Cursor

Lecture 21 Creating the First Server Action (To Store Data)

Lecture 22 Improving the Server Action (Dealing With Cursor Loosing Focus)

Lecture 23 Cursor Needs to be Spoon-Fed!

Lecture 24 Is Cursor Really Smart and Helpful? Can it Learn?

Section 6: Reusable Cursor Instructions: Notepads

Lecture 25 Cursor Notepads: What They Are?

Lecture 26 Cursor Notepads: Building a Good Notepad

Lecture 27 Notepad for Frontend

Lecture 28 Editing Task: The Form

Lecture 29 Editing Task: The Backend - Something is Wrong

Lecture 30 Editing Task: The Backend - Finding and Fixing Complex Bugs

Lecture 31 Fixing Issue Manually - You Need to Understand the Code

Section 7: Building Features

Lecture 32 Project Checkpoint - What's Left to Build

Lecture 33 Adding Columns: Dialog & Form

Lecture 34 Adding Columns: Visual Adjustments

Lecture 35 Adding Columns: Server Action

Lecture 36 Edit Column: Complete Feature in Under 1 Minute!

Section 8: Building Things Really Quickly

Lecture 37 It's Time to Build Really Quick!

Lecture 38 Deleting Tasks: Would You Code it Quicker?

Lecture 39 Deleting Columns: That's Too Easy!

Lecture 40 Deleting Columns: Confirmation Dialog

Lecture 41 Move Task Horizontally: Generating UI

Lecture 42 Move Task Horizontally: The Backend

Section 9: Summary and What's Next?

Lecture 43 Where We Are Currently?

Lecture 44 What to Do Next? Some Ideas for You!

Teams looking to adopt AI-assisted development practices,Engineers who want to learn practical AI-assisted development,Professional developers wanting to leverage AI in their workflow,Full-stack developers looking to master Next.js 15,Developers interested in modern React patterns and best practices