Complete Cursor AI: Vibe Code a Full-Stack Next.js 15 App

Set up a UI library in a Next.js project using composer to install shard CDN UI components, enable dark and light mode, and verify live changes in development.

Learn to prototype a kanban UI in Next.js 15 by building a three-column board with task cards using Qazqan UI and Tailwind, iterating small changes while preserving the theme toggle.

Update the task card UI on a kanban board using React components, cursor-assisted explanations, and an agent-driven composer approach with Tailwind and Shatkin.

Show how to add a task creation and editing dialog with a form using chack'n dialog components, including title, description, and assignee fields, with zod and react-hook-form validation.

Refactor code by centralizing assignees data and introducing generated avatars, updating dialog and card components, and plan to fetch from the db later while ensuring a working build.

back off changes easily using composer's restart to revert new files and edits, then restore the project state or commit with git, shown with a MySQL docker setup.

Set up a local Postgres database with Docker using a generated docker-compose file, drizzle ORM, and auto-generated schema and migrations, while choosing essential libraries and connecting before UI work.

Set up Postgres database with docker compose and Docker Desktop, troubleshooting path issues on Mac to run docker compose up -d. Resolve port conflicts and confirm Postgres 16 is running.

Connect to the database using drizzle studio and drizzle ORM inside a Next.js app, configure the drizzle setup with a db url and env vars, and verify via drizzle studio.

Create and apply the database schema with drizzle migrations, generate and push commands, and verify tables in drizzle studio, resolving docker postgres database creation issues for the Kanban app.

Fetch columns and tasks directly with server components in Next.js 15, leveraging parallel data fetching and server-side queries to power a fast, Tailwind-styled Kanban board.

Learn to implement loading states in a Next.js 15 full-stack app by introducing an artificial delay, streaming data, and a skeleton UI for kanban columns and tasks.

Create a server action to persist new tasks, validate data with a shared Zod schema on the backend, and store results in the database so tasks appear instantly.

Implement and fix a server action to store tasks in the database with drizzle, return meaningful errors, and trigger path revalidation, while consolidating zod schemas for shared use.

Enforce a single source of truth by wiring Cursor to the database schema for validation and form generation, and iteratively align task forms, actions, and props.

Discover how to guide cursor with focused prompts and rules to build Next.js 15 server actions, enforce Zod validation, and keep the database as the single source of truth.

Create notepads to define cursor behavior for specific operations, leveraging markdown-based rules and attachments; reference notepads to tailor backend or frontend logic, such as API development guidelines.

Build a robust Next.js notepad by validating input with Zod, using a source of truth from the db schema, and server actions with Drizzle.

Explore building a notepad for frontend tasks, focusing on forms handling with react hook form, zod validation, and UI components in a Next.js app.

Reuse the existing task dialog and front-end forms to enable editing tasks, opening with current data and submitting the modified data, with no backend saving yet.

Explore the backend task editing workflow in next.js 15, implementing a server action to update tasks, validating input, and ensuring the edit form submits properly.

Debug the editing task flow from kanban board to task dialog using cursor, ensuring task ID and column ID pass and the form resets correctly with server actions.

Fix the misordered task list by sorting by the order column on the Kanban board's server actions, and learn to understand generated code while using ai.

Advance by building missing features for the Cursor AI project, adding columns, assignees, and movable tasks, and prototype quickly with notepad-based workflows.

Design the UI with a dialog and form to add a new column, including title and description, and connect to the backend via a schema and server action.

Expose the add-columns dialogue on the main page, place the add button top-right, and adjust styling for dark/light modes; the dialogue works, next is backend to add the column.

Develop and connect server actions to save a new column via a column dialog, auto-generating the next order number from the database and reusing existing schemas.

Build a complete edit column feature in a video by adding an edit form for columns, saving changes with server actions, and adding a drop-down menu in the Kanban column.

Reuse proven patterns with cursor to rapidly turn prototyping into productive app development using server actions, dialogs, and forms, avoiding the idea that one prompt builds the whole app.

Add a delete task feature quickly by adding a drop-down in the task card and creating a server action that deletes the task, revalidates the path, and runs on click.

Explore how deleting a Kanban column triggers automatic deletion of its tasks via ondelete cascade, and implement a drop-down and server action to perform the deletion immediately.

Implement a confirmation dialog to guard destructive column deletion in a Kanban app, using Shatkin UI, so the server action runs only after user confirms.

Move tasks horizontally in the kanban board by starting with the UI, then implement backend logic to detach and attach a task to a new column and recalculate the order.

Implement the backend to move tasks horizontally with a server action that places the task at the end of the target column, ensuring correct order and instant UI updates.

Recognize that feature ideas for the cursor and ai assisted editors course are endless, and focus on using ai models to work with code, then craft prompts to extend features.

Identify easy, medium, and hard future ideas to enhance your full-stack next.js app with cursor, including moving tasks, UI refinements, refactoring, assignee flow, comments, labels, and search.