Coding With AI - Planning To Production

Explore how AI enables quick prototyping with tools like V0, Bolt, and Lovable to validate concepts and test user experience—without writing code—before building production apps.

Learn to craft precise, information-rich prompts and use markdown documents to guide AI from planning to production, detailing features, tech stack, UI/UX, data handling, and error management.

Craft a prompt to generate a landing page with clod.ai using HTML, CSS, and JavaScript, detailing sections like hero, features, pricing, and a developer-focused design.

Prototype a markdown note taking app in React with a split editor, live markdown preview, auto save to local storage, and search plus dark mode.

Analyze generated prototype code to critique file and component structure, state management, dependencies, and security, noting over-engineering, error handling, and server vs client rendering considerations in Next.js and React.

Iterating on a prototype notes app, this lecture adds a delete confirmation with a ShadCN alert dialog, live word and character counts, markdown export, and resizable editor and preview panes.

Assess prototype quality versus production readiness, recognizing technical debt from vibe coding, and learn when prototypes support quick ideas and UI mockups but not scalable, production apps.

Install cloud code via curl, authenticate in the browser, and learn context and tokens while building a Python script that fetches a Chuck Norris joke using the standard library.

Plan mode scans your project to generate a markdown plan file without editing code, and suggests features to map out like menu systems, categories, colors, and ASCII art.

Explore slash commands, config options, and the settings file in Cloud Code, and learn how to manage MCP servers, permissions, and context across personal, project, and global scopes.

Master context as AI's short-term memory and its impact on conversations and code. Use context engineering and tokens to manage knowledge across projects, with Claude and pricing examples.

Explore managing context and tokens with cloud code using slash context, slash clear, and slash compact, comparing Opus 4.5 and Sonnet models and memory reset strategies.

Cloud Code now saves remembered words to a persistent memory file in home/.cloud, preserving memory across clears via a memory.md index and a user remembered word file.

Define the problem, audience, data, and tech stack to plan a dev stash app, then document requirements, MVP features, and a scalable workflow for AI-assisted development.

Bootstrap your Next.js project manually with a CLI command, avoiding ai-driven boilerplate. Install Node.js, run npx create-next-app with source dir and features, then start the dev server and clean up.

Explore creating a persistent cloud context with a context folder and Cloud MD, loading project overview, coding standards, ai interaction, and current feature at session start.

Define documentation, rules, and context to guide AI coding and maintain a consistent codebase. Learn coding standards and AI interaction guidelines for Next.js projects and a strict feature workflow.

Master an end-to-end ai workflow from feature documentation to git branching, testing, and merging, using current-feature.md, spec files, and the slash feature command, with changelog and history tracking.

Discover AI-assisted git workflows: create a remote GitHub repo, configure remotes, make an initial commit, push to origin, and manage a Next.js project.

Prototype a non-functional dashboard UI for a SAS app, focusing on a collapsible sidebar, main grid of collections and items, and an item drawer with color-coded borders.

Install the Cloud Code VS Code extension to replace the command line interface with a cleaner user interface showing files, diffs, context, and slash commands.

This lecture guides building a dashboard UI in three phases, using spec files, AI-assisted iteration, and a workflow of branch, test, commit, and merge to main with dark mode.

Develop the dashboard phase 2 interface by implementing a collapsible sidebar with items/types links, favorites and recent collections, a user avatar, and a mobile drawer to ensure responsive navigation.

Phase three of the dashboard ui layout builds the main area with recent collections, pinned items, 10 recent items, and four stat cards using ShadCN components and Tailwind.

Set up Neon PostgreSQL cloud database, create production and development branches, acquire separate connection strings, use sql editor and backup features, then install Prisma to interact with PostgreSQL.

Set up Prisma 7 with Neon Postgres to interact with your database using TypeScript methods, gaining type safety, auto-completion, migrations, and Prisma Studio.

Run the initial migration to create tables from models, seed system item types, and verify connectivity with Prisma Studio and migration status, while managing dot env and dev-prod sync.

Learn to seed a development database with Prisma, including users, types, and multiple collections (React patterns, AI workflows, DevOps, terminal commands, design resources), using bcrypt for password hashing.

Replace mock data with actual NEON database data using Prisma by fetching collections in the server component and displaying six recent dashboard cards.

Fetch pinned and recent items from the NEON database to populate the dashboard, replacing mock data with real data, and derive item card visuals from item type while displaying tags.

Demonstrates migrating the dashboard from mock data to live database data by building a stats card and a sidebar with colored indicators, linked items, and a view all collections feature.

This lecture explains how to deploy a site with CI/CD to Vercel, keeping development and production schemas in sync via Prisma migrations, and handling drift with migrate deploy.

Deploys the project to Vercel with CI/CD, runs Prisma migrate deploy before next build, and migrates the production database using Neon, including seeding system types and a demo user.

Learn how cloud code skills and custom slash commands work together, including migrating from legacy .cloud/commands to the skills folder, and building practical commands like list components to streamline workflow.

Master slash feature commands to manage feature work from planning to production. Load specs, start implementation, review, and complete features with commands like feature load, feature start, and feature complete.

Create the feature command using markdown driven skill files inside a new feature folder. Define a skill md with actions like load, start, review, and complete to guide feature development.

Test the slash feature command by creating a spec file to add a pro badge to the sidebar and files and images with ShadCN UI component, and deploy via Vercel.

Use the cleanup command to scan for code housekeeping tasks, with check or run modes, listing issues like unused imports, console logs, and orphan files for selective fixes.

Discover sub-agents in cloud code, specialized AI assistants with separate context windows that handle task-specific explorations, code reviews, and UI improvements while keeping main and sub contexts isolated.

Create a code scanner sub-agent to audit a Next.js codebase for security, performance, and code quality, reporting only actual issues with actionable fixes and ignoring not-yet-implemented items like missing authentication.

Learn to use the code-scanner subagent to audit a Next.js with Prisma project, identify quick wins like database indexes and loading states, and apply safe migrations.

Understand the model context protocol (MCP), an open standard that lets AI models securely connect to external data, databases, and tools via local or remote MCP servers, such as Neon.

Install and authenticate Neon MCP in your project using cloud code, set a project scope, and configure dev and production branches to securely query Neon collections with MCP tools.

Install Context 7 MCP to access up-to-date docs for Next.js, React, Prisma, and more via an API key. Use Context 7 to explore Prisma 7 features and breaking changes.

Install and configure Playwright in the MCP server to enable browser-based UI testing, use Cloud Code to add the tool, update mcp.json, and verify by listing courses on Traversee Media.

Implement NextAuth phase 1 with Prisma adapter and GitHub OAuth, set up edge-compatible config, environment variables, and API routes to protect the dashboard and redirect unauthenticated users to sign in.

Introduce phase two of NextAuth by adding the credentials provider for registration, bcrypt password hashing, and a registration API route with test flows.

Phase 3 of next auth implements sign-in, register, and sign-out UI, shows GitHub avatar or initials in the sidebar, and covers server and client components with toast testing.

Create a production GitHub OAuth app using the Vercel domain, update .env production with a new client ID, key, and auth secret, redeploy, and verify GitHub login in production.

Set up email verification using resend, configure API keys and environment variables, create verification endpoints and pages, and block unverified sign-ins while testing with onboarding at resend.dev.

Toggle email verification with a new environment variable to skip verification during testing, update registration and sign-in flows, and prepare production integration with resend domain later.

Implement forgot password using the existing verification token model, add password reset tokens with one-hour expiration, and create API routes and server-rendered forgot and reset password pages with client forms.

Design and implement a user profile page showing user info and usage stats, with change password and delete account features, guarded by route protection and avatar logic.

Audit authentication code with NextAuth 5, focusing on areas NextAuth doesn't auto-handle, including email verification, password reset, and profile security, using an auth auditor sub-agent and markdown audit docs.

Implement rate limiting using Upstash's serverless Redis, configure a devstash-rate-limit database, set environment variables in .env and production on Vercel, and redeploy to prepare for the rate limiting feature.

Apply rate limiting to authentication endpoints using Upstash Redis, protecting login, register, forgot password, reset password, and resend verification by combining IP and email, returning 429 on exceed.

Fixes a GitHub login redirection by shifting from client-side to server-side sign-in via a server action in NextAuth v5, using redirect instead of a callback URL.

Develop documentation research skills by documenting item types and a unified CRUD architecture, using slash research to generate outputs in the docs folder and guide server-side data flows.

implement a two-column, responsive item listing view with item cards featuring a left border color by item type and a dynamic route for items by type.

Integrate unit testing with VTest targeting server actions and utilities, including setup, config, and a sample date utility test. Update docs and workflows to enforce passing tests.

Learn to implement a responsive item drawer that fetches minimal card data server-side and retrieves full item details via a client api route using Prisma and an auth check.

Enable inline edit in the item drawer by switching to edit mode, turning title, description, and tags into inputs, and saving via a server action with zod validation.

Implement delete item functionality using a server action with ownership checks and a Prisma query in lib db items. Show ShadCN UI confirmation with a success toast, and add tests.

Create a new item via a modal dialog, selecting type and entering fields (title, tags; content and language for snippets and commands; content for prompts and notes; url for links).

Execute end-to-end CRUD testing using the Playwright MCP to log in, create a snippet, update its title, and delete it, validating the full lifecycle within a demo environment.