The Complete AI Coding Course (2025) - Cursor, Claude Code

Discover basic coding fundamentals to prompt and work with AI for web development, debug common web app issues, and learn AI-generated function types to build apps quickly.

Explore the basics of HTML, CSS, and JavaScript as the structure, styling, and interactive features of web pages, and see how they form the foundation for AI-enabled React and Next.js.

Learn the html structure, including doctype, html, head, and body, and how nested tags like title, h1, div, p, img, and a build a web page with seo basics.

Explore how css changes web visuals by applying properties and values to specific html tags or the whole page, controlling fonts, colors, sizes, margins, and layouts and variations.

JavaScript adds interactivity to web pages, handling front end and back end behavior with content updates and events. Prefer external scripts for maintainability; frameworks like Next.js and React simplify coding.

Master variables in JavaScript with let and const, and explore arrays, functions, if-else logic, and objects through practical examples like a like counter and FAQ toggle.

Explore the updated ai-driven saas tech stack for 2025, including TypeScript, React, Tailwind, Next.js, Vercel deployment, and Supabase, designed for beginners and compatible with front-end builders and Stripe for payments.

Explore how TypeScript, a safer subset of JavaScript, works in Next.js projects, with type annotations and the compiler converting TypeScript to JavaScript.

Discover how React, a front end library, simplifies HTML, CSS, and JavaScript workflows. Learn core concepts, debugging, and how to leverage AI to generate and understand code.

Master modern React development by understanding components, props, state, and basic hooks, and learn to build reusable header, footer, and hero components with a separate components folder in Next.js apps.

Learn how props pass data between React components to create dynamic, reusable templates, illustrated with a recipe card example where the same component renders pancakes and pizza with different content.

State is the third major core of modern React development, handling data that changes within components and updating the UI, as shown by a like button, counter, and form.

Master React hooks overview, focusing on useState and useEffect to manage state and side effects, including data loading on mount and automatic actions, with client component requirements.

Explore how react events enable interactive components in react development with Onchange, onClick, and Onsubmit. Use them with state to update text and submit form data in ai-generated front-end code.

Explore how Next.js structures applications as a full stack framework that combines everything learned previously with React, tying together concepts and simplifying HTML development.

Learn how to structure a Next.js project using the app folder, with page.tsx as each page, and create routes like pricing and basic plan through nested folders.

Discover how Next.js routing maps URL paths to page.tsx files in the app folder, including nested pricing and about routes and dynamic pages with slug parameters.

Explore the Next.js structure with a components folder for reusable elements and an app folder for pages. Learn imports, exports, and editing header, hero, and footer components.

Explore the default Next.js file structure, including the layouts file, globals.css, app folder, and page TSX files, plus Tailwind CSS and dependencies like React and TypeScript.

Learn how front end and back end communicate via APIs using HTTP requests and endpoints, with Supabase authentication and data, plus third-party APIs like OpenAI.

Learn to write http requests with async and await in JavaScript to connect the front end and back end, handle data as a promise, and wait for server responses.

Discover how http requests target api endpoints in Next.js using route.ts files. Identify get, post, put/patch, and delete methods and their use across recipes, nutrition, and calories endpoints.

Learn the end-to-end api workflow from a button-triggered http request in the front end, through api routes to backend processing and database updates using async/await and fetch.

Learn how Next.js connects the front end to the back end with API routes, proper /api endpoints, and HTTP methods for data operations, including async calls and await functions.

Identify and fix common ai coding errors by verifying use client at the top, correct import paths, install missing dependencies, align file structure, and fix syntax issues with ai-assisted debugging.

Learn to diagnose and fix errors by copying the full message, using AI to explain it simply, and debugging front-end and back-end issues with console logs and UI error states.

Identify where the error originates in your application—terminal or browser console—and collect the error message with file paths, then implement fixes step by step and test after each change.

Learn git as a version control tool to track changes, commit updates, and collaborate, illustrated with a Next.js project, initial commits, hello world edits, and GitHub essentials.

Explore git as version control to revert changes via commits and collaborate on a Next.js project from blank to hello world, while learning GitHub publishing and git ignore.

Download and install Node.js from its official site, then run npm commands in your terminal to view and edit web apps and run scripts.

Design a stack SaaS with a CRUD app, structure the database with AI, use Supabase for auth and storage, leverage Next.js API routes for back-end features, and deploy with Vercel.

Build a recipe sharing platform with full create, read, update, and delete functionality, enabling users to share, view, and interact with recipes in a social SaaS-style app.

Create a PRD for a Next.js and Supabase recipe sharing app, detailing features like sign up, log in, recipe upload and browse, search and filtering, and a step-by-step implementation guide.

Create a Next.js project inside the Cursor projects folder with npx create next app at latest, using Next.js 15, TypeScript, ESLint, and Tailwind CSS for a recipe sharing platform.

Discover how cursor rules guide AI prompts in a Next.js with TypeScript project, covering app router, React, and Supabase, with emphasis on request analysis and solution planning.

Open the cursor composer, create the project, and build a simple landing page with a header, hero, and placeholder recipes; run npm run dev to view localhost.

Create a Supabase account and project for the cursor app to manage authentication and data. Select a nearby region, set a secure database password, and await project setup completion.

Learn how Supabase handles authentication, storage, and database for a recipe sharing app, enable email or other providers, disable email confirmation for testing, and configure local and production URLs.

Set up a database with Supabase and Next.js, define profiles and recipes tables with fields like id, username, created at, updated at, ingredients, instructions, and enable email authentication.

Set up two data tables in Supabase—profiles and recipes—define id, username, full name, created at, updated at, and enable row-level security with select, insert, and update policies.

Learn to create a recipes data table in Supabase with fields like id, createdat, user_id, title, ingredients, cooking_time, difficulty, and CRUD policies, using Cursor-generated SQL to enforce user ownership.

Confirm the profiles and recipes data tables, then install dependencies and create a Supabase client utility. Populate env.local keys and implement authentication middleware and route layout for initial Supabase integration.

Copy the project URL and API key from the dashboard, paste them into the cursor next.js app’s .env.local file, save, commit the change, and test the application.

This lecture demonstrates implementing a quick Supabase connection test on the homepage, validating the dot env setup and dev server, and confirming a successful connection before adding data or users.

Build a reusable auth form with sign-up and login pages, client-side routing, and robust validation, then test the authentication flow using Supabase authentication.

Test the sign up and login flow by creating test users, verifying redirects due to email confirmation on localhost 3000, and confirming authentication connects to the Supabase backend.

Redesign the landing page to show sign up or log in, remove the featured recipes, and connect authentication with profiles and recipes via Supabase, paving the path to the dashboard.

Create a dashboard page that redirects users to a recipe feed after login, featuring recipe cards that display uploaded recipes and open detailed views, with authentication gating.

Extend Supabase databases to enable authenticated users to update profiles (full name, bio) and their recipes, linking profiles to recipes and enabling profile creation on signup with Cursor.

Test user sign-up flows to reproduce authentication errors, then implement detailed logging and improved error handling with cursor to locate and fix database schema mismatches in a Supabase-backed app.

Sign up a new user, view a pre-populated profile in Supabase, and edit full name, username, and bio via a header-linked profile page with a reusable form component.

Implement a complete recipe workflow in the app, from adding a new recipe via the dashboard to viewing all recipes and opening a dynamic recipe detail page.

Create a recipes detail page and a single recipe view with a dynamic route, linking recipes to the user profile on the dashboard and guiding testing on the dev server.

Build a recipe detail page with creator-only edit and delete actions via a recipe actions component, using a reusable form for create and edit in Next.js, with real-time Supabase updates.

Implement a search function and basic filtering in the recipes dashboard, enabling keyword searches, category filters (lunch, breakfast, dinner), and sorting by difficulty.

Add loading states to give users feedback when pages load, using a skeleton and suspense loading state to show a pulsating outline and improve navigation.

Implement social features by creating likes and comments data tables in Supabase, updating types, and building reusable like and comment components integrated into the recipe detail page.

Troubleshooting features guide students through debugging a recipe sharing app, fixing 403 errors, ensuring likes and comments are saved to Supabase, and displaying comments only for logged-in users.

Add a saved recipes tab to display all liked recipes on your profile, wiring a saved page, header link, loading state, and middleware routing between front end and back end.

Deploy your app live by committing a final version, publishing online to connect your code with Vercel and GitHub, and configure environment variables for a successful deployment.

Explore cloud code, the powerful ai coding agent from Anthropic, prompting in the terminal to plan and generate code for complex applications with less hand-holding than cursor.

Cloud code is a terminal based ai agent code editor that writes code in the terminal, uses Cloud Opus and Cloud Sonnet, and pairs with Cursor for cooking recipes.

Explore cloud code pricing across free, pro, and max plans, compare cloud for sonnet with opus four, and learn recommendations for testing and API usage.

Install Node.js 18+ and set up cloud code inside Cursor's terminal to run and review code, then sign in or provide API keys and choose Claude's Pro plan.

Create cloud code rules with a cloud md file or initialize, establishing a basic rules template for an empty repository and guiding plan mode and simple edits.

demonstrates Claude Code’s agentic capabilities by autonomously building a Next.js calorie tracker, including project setup, HTML, CSS, and JavaScript, then running. enables adding foods, calories, and goals with cloud updates.

Enable plan mode in cloud code to generate a design plan before coding and preview a neon, minimalistic calorie tracker redesign with planned changes.

Use git versioning with cloud code: initialize a repo, connect to GitHub, and save versions after major changes. Drag in images or files to mirror designs and enable web search.

Explore Replit as a cloud-based IDE to write, test, and deploy code in the browser, with real-time collaboration, language templates, and a free account option.

Explore Replit dashboard for a React project, navigate file tree, and manage public and source folders like app.js and index.js, using the run button, console, shell, and collaboration features.

Master the cloud-based Replit shell to run apps with npm run dev, install dependencies like firebase and react-router-dom that update package.json, and manage files via the terminal.

Explore the standard react file structure in replit, including root directory, public and source folders, and organizing components, utilities, and env files for reliable AI and human readability.

Initialize a git repository in your repl to enable version control and snapshot your code. Stage and commit changes to the main branch, and back up with GitHub if desired.

Build a macro tracking app with React and Firebase, implementing user authentication and modular components, guided by cloud AI to structure files on Replit.

Learn to scaffold a macro tracking app by creating a source/components folder with login, register, dashboard, food log, and macro goals components, plus firebase.js and auth context, and update app.jsx.

Create a Firebase project and web app, install Firebase, and enter api key, project id, storage bucket, and app id into Firebase.js. Initialize the app and test the Firebase connection.

Learn to troubleshoot Firebase by enabling Firestore and email/password authentication in the console, install dependencies, inspect console errors, adjust Firestore rules, and initialize Firebase authorization in app.jsx.

Build and integrate a login component with Firebase authentication, wire it to the auth provider, and plan a register component with routing updates for cloud-backed user management.

Build and test the register component to sign up users in the Replit app, verify data in Firestore's users collection, and integrate the route with the login component.

Implement a logout feature in the dashboard by updating the auth context, creating a dashboard with a logout button, and wiring a protected route in App.jsx.

After finalizing authentication, this lecture builds a React dashboard for logging foods and viewing daily entries, integrating the food log and macro goals with data fetching.

Extend the dashboard to add macro goals and food logs with inputs for calories, proteins, carbs, and fats, and ensure updates save to Firestore for each user.

Beautify the auth landing page by applying global app.css styles, updating the login and register components, and ensuring consistent styling across App.jsx and related files.

Design and refine the auth page by updating email and password and confirm password field colors, aligning input boxes, applying app.css changes, and testing login and registration flows across accounts.

Create a modern dashboard design by styling the dashboard with app.css to match the authentication page, featuring macro goals, current goals, and food log sections, including today’s food log.

Explore integrating a third-party nutrition API to auto-populate food macros (calories, protein, carbs, fats) via a nutrition search component, updating the food log and dashboard.

Master troubleshooting by checking Replit and browser consoles for errors, then copy messages to cloud; ensure backend changes in Firebase and Firestore, with authentication enabled and rules verified.

Learn to build advanced apps with v0 by Vercel and Cursor using Next.js, embracing local development and back-end capabilities with Postgres or Firestore.

Install Node.js and npm to run commands in a local terminal, set up a project folder, and create a Next.js app with TypeScript, Tailwind, and a src directory.

Explore Cursor AI, an offline VSCode fork with built-in AI, downloaded locally to edit multi-file code, refine project structure, and build a Next.js app using a local folder view.

Explore planning front-end UI with Figma or sketches, then use V0 to design, code, and preview a Next.js React front end before cursor integration.

Organize a Trello-styled landing page by using cloud to split page.tsx into components: header, hero, features, call to action, and footer, for reusable elements in a Next.js TypeScript app router.

Start using cursor to manage a next.js project, explore the cursor explorer, terminal, and composer, and learn how cursor updates your local package.json and global.css with AI-generated code.

Master cursor tips for efficient code generation. Learn to read and apply changes one by one, run the app after each fix, and troubleshoot with cloud and browser, with backups.

Create a sleek macro tracking app front end using v0 and cursor, building a Next.js landing page with login, dashboard, food logging, macro goals, and charts for progress.

Set up user authentication in a Next.js app with next-auth for login and registration. Develop with in-memory sessions now, then migrate to Postgres or Firestore for persistence.

Implement next-auth authentication by building the app/api/auth/nextauth folder structure, adding a register component, and using an in-memory auth flow to validate the setup.

Create the next auth configuration file, implement the next auth API route, register form, and registration page, then verify file structure and test the register component on the landing page.

Learn how to debug next auth flows by fixing a syntax error, ensuring registration signs in and redirects to the dashboard, and using console logs to trace authentication issues.

Create a functional food logging dashboard that lets users register, sign in, add new foods, and track daily macro goals and progress.

Learn to install PostgreSQL as an external database on macOS, remember the setup password, and verify with psql -U postgres on port 5432.

Connect the macro tracking app to a PostgreSQL database using terminal commands, prisma setup, and env files. Replace in-memory data with external database and implement bcrypt password hashing.

Create a React Native project by making a dedicated folder, installing expo app dependencies with npm, and launching on iOS or Android simulators using expo and the metro bundler.

Edit the index.ts to display hello world, run npm run ios, and use the iOS simulator or expo go to scan the QR code for real-time updates.

Develop an animal and insect identifier app in React Native that lets users upload images, view species info, and prototype API calls before integrating Google Cloud Vision.

Implement the Google Gemini API to identify uploaded images and generate descriptive text, configuring the API key and integrating it into the app via Gemini config and index.tsx.

Test the updated api after the index file was updated by uploading an image to confirm Google Gemini outputs succulent species description. Ensure habitat, diet, and lifespan fields update correctly.

Troubleshoot updating species info in the app by capturing a screenshot, copying to clipboard, pasting to cloud, and validating habitat, diet, and lifespan after updating index.ts.