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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.