Complete Guide to Cursor For Non-Coders (Vibe Coding 101)

106 topics
2h 28m 17s

Topics

  • 00:00:00 - Introduction: Building AI Apps Without Code Using Cursor

  • 00:00:29 - Video Structure Overview: Basics, Landing Page, AI App

  • 00:00:51 - Part 1 Preview: Cursor Basics and AI Image Generator Demo

  • 00:01:34 - Part 2 Preview: Building and Deploying a Landing Page

  • 00:02:04 - Part 3 Preview: Building an AI App for Research Reports

  • 00:03:18 - Recap of Apps Built and Overview of GitHub/Vercel for Non-Coders

  • 00:03:42 - Introduction to the Cursor Tool and Download Instructions

  • 00:03:55 - Comparison: Cursor vs. Web-Based AI Coding Tools (Bolt)

  • 00:04:45 - How to Start a New Project in Cursor Interface

  • 00:05:10 - Guide: Creating a New Project from Scratch in Cursor

  • 00:06:08 - Explaining Cursor's Composer Agent Mode Capabilities

  • 00:06:27 - Demo: Using Agent to Explain 'Codebase' by Creating a File

  • 00:07:16 - Demo: File and Folder Management with the Agent

  • 00:07:57 - Demo: Editing File Content Using the Agent

  • 00:08:44 - Demo: Changing File Formats with the Agent (TXT to MD)

  • 00:09:20 - Using Cursor for General Writing and Editing Tasks

  • 00:09:30 - Demo: Using Cursor's Chat Feature for Targeted Edits

  • 00:10:46 - Example Project: Generating a Simple Bouncing Balls Animation

  • 00:13:09 - Running Generated Code Locally Using the Agent

  • 00:14:06 - Iterating on the Animation Project with Agent Prompts

  • 00:15:55 - Refining Prompts for Better Animation Physics

  • 00:16:36 - Mention of Whisper Flow for Voice Input

  • 00:17:12 - Demo: Successful Animation Iteration with Realistic Physics

  • 00:18:07 - Pivoting Project: Creating a Retro Landing Page Instead

  • 00:19:26 - Adding Interactivity to the Retro Landing Page

  • 00:20:26 - Introduction to Cloning GitHub Repositories in Cursor

  • 00:20:41 - Explaining GitHub Basics for Non-Coders

  • 00:21:16 - Demo: Saving a Local Cursor Project to a New GitHub Repo

  • 00:22:51 - Demo: Cloning a GitHub Repo into Cursor

  • 00:24:02 - Introducing a Reusable Next.js Project Template on GitHub

  • 00:24:44 - Demo: Cloning the Provided Next.js Template

  • 00:25:25 - Running the Cloned Next.js Template Locally

  • 00:27:03 - Basic Text Editing within the Template Files

  • 00:28:07 - New Project Goal: Building an AI Image Generation App

  • 00:28:41 - Using Visual Sketches to Guide AI UI Generation

  • 00:30:05 - Prompting the Agent to Build the Image Generator UI

  • 00:31:41 - Iterating on UI: Adding Loading States for Images

  • 00:32:12 - Explaining the Importance of Cursor's Restore Feature

  • 00:33:55 - Planning API Integration for AI Image Generation

  • 00:35:03 - Explaining APIs Using an Agent-Generated Analogy

  • 00:36:47 - Requirements for Integrating APIs: Keys, Docs, Explanation

  • 00:37:23 - Researching Image Generation APIs Using Perplexity

  • 00:39:59 - Obtaining API Keys from Provider (FAL Example)

  • 00:40:38 - Prompting Agent to Implement the Chosen API (FAL)

  • 00:41:35 - Security Best Practice: Moving API Keys to env.local File

  • 00:43:07 - Debugging API Implementation Errors with Agent Help

  • 00:43:40 - Using Official API Documentation and Playground for Debugging

  • 00:46:30 - Tip: Restarting Local Server After Environment Variable Changes

  • 00:47:14 - Demo: Successful Image Generation After API Debugging

  • 00:48:16 - Adding Features: Image Download and Copy Buttons

  • 00:49:25 - Debugging UI Errors After Adding New Features

  • 00:51:05 - Recap Part 1: Summary of Cursor Basics and Initial Projects

  • 00:53:27 - Overview of Remaining Video: Static Designs and Full App Build

  • 00:54:35 - Part 2 Focus: Creating Static Designs with Cursor

  • 00:55:32 - Finding Animation Libraries on GitHub via Perplexity

  • 00:58:21 - Cloning Animation Library Repo (anime.js) into Cursor

  • 01:00:04 - Running Examples from the Cloned Animation Library Locally

  • 01:01:20 - Setting Up YOLO Mode for Automatic Command Acceptance

  • 01:02:40 - Viewing Examples from the Animation Library (anime.js)

  • 01:03:01 - New Design Project: Recreating a Landing Page with anime.js

  • 01:03:41 - Prompting Agent to Create Landing Page Using Screenshot and Library

  • 01:05:56 - Iterating on Landing Page Design and Animations

  • 01:15:16 - Adding New Sections: Testimonials Section

  • 01:16:44 - Adding Visual Separators Between Sections

  • 01:17:12 - Adding Section Titles and Footer to Landing Page

  • 01:18:22 - Saving Landing Page Project to GitHub

  • 01:20:31 - Introduction to Deploying Websites Using Vercel

  • 01:21:40 - Debugging Vercel Deployment Issues with Agent Help

  • 01:22:15 - Deploying Project Using Vercel Command Line Interface (CLI)

  • 01:24:38 - Setting Up a Custom Domain via Namecheap

  • 01:25:48 - Connecting Custom Domain to Vercel Deployment

  • 01:26:38 - Configuring DNS Records (A and CNAME) on Namecheap

  • 01:27:40 - Demo: Landing Page Live on Custom Domain (agentmate.com)

  • 01:28:01 - Recap Part 2: Landing Page Creation and Deployment Summary

  • 01:31:21 - Part 3 Introduction: Building a Full App with Database and Auth

  • 01:32:52 - Defining the App's Problem: Adding Visuals to Text Reports

  • 01:34:27 - Exploring Chart Generation Ideas Using Mermaid Diagrams

  • 01:35:10 - Planning the App Build Process in Steps

  • 01:35:16 - Starting App Build by Cloning Next.js Template

  • 01:38:01 - Prompting Agent for Initial App UI (Markdown Input, Sign-in)

  • 01:38:51 - Setting Up Backend: Creating a Firebase Project

  • 01:40:23 - Getting Firebase Configuration Keys for Web App

  • 01:41:32 - Adding Firebase Keys Securely to Project (env.local)

  • 01:42:23 - Enabling Required Firebase Services (Firestore, Storage, Auth)

  • 01:44:01 - Running App Locally with Firebase Configuration

  • 01:44:36 - Testing Google Sign-in and Basic UI Functionality

  • 01:48:36 - Switching to Mermaid Diagrams for Visualizations

  • 01:50:40 - Implementing AI-Powered Mermaid Diagram Generation (Claude API)

  • 01:51:47 - Setting Up Claude API Integration (Docs, Keys)

  • 01:54:12 - Testing and Debugging AI Diagram Generation Feature

  • 01:56:12 - Adding Features: View Full Screen and Edit Diagram Buttons

  • 01:57:54 - Implementing AI Chat Interface for Editing Mermaid Diagrams

  • 02:02:08 - Improving Rendered Markdown Formatting and Styling

  • 02:02:51 - Refining UI Layout to Single Column Design

  • 02:03:40 - Improving UI Elements: Buttons and Loading States

  • 02:06:31 - Implementing Save Report Functionality to Firebase Database

  • 02:09:17 - Debugging Issue: Ensuring Diagrams are Saved with Reports

  • 02:12:18 - Adding Feature: Export Report to PDF

  • 02:13:34 - Final App Demo: Showcasing All Features

  • 02:14:47 - Testing Multi-User Support and Data Isolation

  • 02:15:46 - Saving Final App Code to a Private GitHub Repository

  • 02:17:01 - Deploying the Full App to Vercel

  • 02:18:30 - Configuring Environment Variables on Vercel for API Keys

  • 02:20:40 - Authorizing Deployed Domain in Firebase for Google Sign-in

  • 02:21:56 - Testing the Live Deployed Application on Vercel Domain

  • 02:26:16 - Final Recap, Conclusion, and Community Promotion