English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 44 lectures (4h 42m) | 2.09 GB
Master AI-Assisted Development by Building a Real-World Kanban Board
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 Build
You’ll create a production-ready Kanban board application featuring:
- Dark/light theme support
- Responsive, modern UI with shadcn/ui
- PostgreSQL database with Drizzle ORM
- Server-side data mutations
- Type-safe frontend and backend
- Docker containerization
What You’ll Learn
AI-Assisted Development:
- 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
Modern Web Development:
- Build with Next.js 15 and React Server Components
- Implement modern UI patterns with shadcn/ui
- Create type-safe database operations with Drizzle ORM
- Handle server-side mutations with Server Actions
- Manage application state effectively
- Structure a production-ready Next.js application
- Implement proper error handling and loading states
Work with Docker for development environments
Best Practices:
- Write maintainable and scalable code
- Implement proper TypeScript types and validation
- Handle form validation and user input
- Manage database schema and migrations
- Structure server-side logic and API endpoints
- Implement proper error handling
- Create reusable components and utilities
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.
Table of Contents
Introduction
1 Welcome and What You’ll Learn
2 Project Demo Full-Stack Kanban Board in Next.js
3 About LLMs, Embeddings, Context and Limits of AI
4 Getting Up & Running with Cursor AI
5 Course Resources & Getting Help
Cursor AI Basics
6 Using Composer
7 Using Chat and Adding Docs
8 Cursor Rules, Inline Edits, Tab Completion
Building the Project User Interface
9 Setting Up UI Library Using Composer (Dealing With Knowledge Cutoff)
10 Building the Basic Kanban UI (Cursor Removing Code!)
11 Updating the Card UI (Composer as an Agent)
12 Adding Dialog & Drop-downs (Fixing Issues Using Cursor)
13 Avatars (Code Refactor)
Backend Setting Up Docker, DB & Fetching Data
14 Restore the Project State – How to Back Off Changes
15 Setting Up the Database (Keep a Firm Hand on AI!)
16 Running the Database using Docker (and Troubleshooting)
17 Connecting to DB using Drizzle (Using Docs & Web)
18 Creating the DB Schema (Migrations)
19 Fetching Columns & Tasks using Server Components
20 Adding Loading State (Cursor Edit + Fixing Hallucinations)
Backend Building Server Actions & Spoon-Feeding Cursor
21 Creating the First Server Action (To Store Data)
22 Improving the Server Action (Dealing With Cursor Loosing Focus)
23 Cursor Needs to be Spoon-Fed!
24 Is Cursor Really Smart and Helpful Can it Learn
Reusable Cursor Instructions Notepads
25 Cursor Notepads What They Are
26 Cursor Notepads Building a Good Notepad
27 Notepad for Frontend
28 Editing Task The Form
29 Editing Task The Backend – Something is Wrong
30 Editing Task The Backend – Finding and Fixing Complex Bugs
31 Fixing Issue Manually – You Need to Understand the Code
Building Features
32 Project Checkpoint – What’s Left to Build
33 Adding Columns Dialog & Form
34 Adding Columns Visual Adjustments
35 Adding Columns Server Action
36 Edit Column Complete Feature in Under 1 Minute!
Building Things Really Quickly
37 It’s Time to Build Really Quick!
38 Deleting Tasks Would You Code it Quicker
39 Deleting Columns That’s Too Easy!
40 Deleting Columns Confirmation Dialog
41 Move Task Horizontally Generating UI
42 Move Task Horizontally The Backend
Summary and What’s Next
43 Where We Are Currently
44 What to Do Next Some Ideas for You!
Resolve the captcha to access the links!