Vibe Coding: AI-Driven Software Development and Testing

Build and deploy a flashcards web app using an AI-powered cursor IDE. Learn step-by-step development, write specifications, test frequently, and use git for versioning in an iterative, plan-first workflow.

Develop a software specification to guide building a flashcards app, using an llm to draft a prd, ask clarifying questions, and document the specification in markdown.

Create a phased to-do list from the project specification using an LLM such as ChatGPT, store it as docs/todo.md, and review acceptance criteria to build in small increments.

Initialize the flashcards app project, set up the file structure, and create the home page with study mode, quiz mode, and stats page.

Iterate on feature development by implementing the next two features to display flash cards, test via manual checks, and commit phase two changes.

Build automated tests across the testing pyramid—from unit and integration tests to end-to-end tests using Playwright—so the app remains working as features evolve, with HTML reports.

Learn to use git version control with end-to-end tests by intentionally introducing bugs and then reverting to a previous working version using commits, reject options, and GUI tools.

Master using rules to control output with cursor, creating project-specific and global rules, and auto-testing after changes to ensure tests pass.

Refactor code by restructuring without changing behavior to improve readability, maintainability, and efficiency, using ai thinking models, adding comments, and validating with end-to-end tests.

Learn how to provide context by referencing resources with cursor, using add syntax to target files, docs, git, and chats, and link pages while asking questions about specific files.

Explore the Model Context Protocol, an open standard that exposes context and tools to LLMs via a plugin system. Connect external data sources and services to extend the agent’s capabilities.

Connect a local git repo to GitHub to back up work and enable collaboration, then create a repository, add a remote, and push changes from VS Code.

Install docker and run a GitHub MCP server, create a scoped GitHub personal access token for contents and issues, add the m.json config in Cursor, and update gitignore.

Demonstrate taking actions with the GitHub MCP integration by creating issues, troubleshooting tokens and permissions, and managing repository tasks via the MVP tool.

Learn how to deploy a locally running app to production by building a production build, then deploying with Vercel and Vercel CLI, sharing a live link for others to access.

Learn how to restart a chat session in AI-driven software development, preserve conversation context with chat history, and generate a concise summary to copy, paste, and resume work.

Understand cursor pricing, compare the pro and free plans, and learn to add custom models via API keys, with agentic mode limitations noted.

Build a kanban board with lovable using an initial prompt and an attached image, then explore chat, edit modes, privacy settings, and the code view with version history.

Create a software specification and a product requirements document with ChatGPT for a lovable project, highlighting prompt engineering and building a to-do list for a mobile-optimized interface using Supabase.

Create a new project from a prd and to-do list to build a Trello-style Kanban with React, TypeScript, and Vite, while outlining guidelines for AI-driven development.

Connect lovable with Supabase to provide a backend database for cards. Authorize lovable, create a board project, generate a database password, and complete the integration steps.

Learn how to store data in a Supabase database by creating cards and columns tables, applying sql commands, and validating data persistence in the app.

Learn to troubleshoot errors in an ai-driven development workflow by enabling drag-and-drop and reordering cards, diagnosing missing dependencies, and using logs to fix package.json issues.

Continue adding features like column management and card editing, and test the app. Prepare for refactoring as code grows, using dev mode and specification as guiding references.

Learn to extract and back up your Lovable app code by setting up a two-way GitHub integration, linking your GitHub organization, transferring the project, and managing private repositories.

Deploy the application from preview to a live domain on dot app using the publish button, and enable Supabase row level security to avoid issues before sharing.

Resolve supabase security issues by enabling rls and correcting public table columns, applying sql commands, and refreshing to verify no errors before publishing.

Explore hosting by deploying the frontend to Vercel or Netlify, with the backend on Supabase. Connect custom domains, add existing ones, or buy new ones with a paid lovable subscription.

Explore additional integrations for Lovable beyond the native options, including Stripe for payments, Make for no-code automations, and ai capabilities via OpenAI or Anthropic.

Lovable offers a beginner-friendly way to build and deploy apps with a user interface and Supabase backend, while comparing pricing, credits, and GitLab integration to access and own source code.

Install windsurf, connect your windsurf account, and set up the full IDE (VS Code extension) to work with an existing code base while exploring features.

Discover windsurf's AI-driven cascade workflow, using the VSCode-based interface, write mode, and model choices like Gemini 2.5 Pro to start a project and troubleshoot directory creation.

Initialize the windsurf project, install dependencies, and run the dev server to test to-do features and card deletion. Troubleshoot with console logs and browser console insights to verify deletion.

Windsurf previews provide a browser view to interact with your app inside windsurf, enabling quick iteration. Change title via a prompt and send console errors to the prompt for troubleshooting.

Access windsurf settings from the IDE to adjust cascade AI agent options, memories, and rules, while noting windsurf tab autocomplete operates and that models are limited to available options.

Explore windsurf rules and configure global and workspace rules to tailor AI behavior, including activation modes and comment rules, stored in the windsurf rules directory.

Discover cascade plugins in windsurf via the plugin store, using MCP, an open standard, to expose and connect tools like GitHub, Notion, and Stripe from within windsurf.

Leverage the GitHub plugin to connect the windsurf project with GitHub, enabling in-editor actions like creating issues, branches, and comments, with MCP protocol enabling powerful AI-driven integration.

Discover windsurf workflows as bookmarks for a set of actions, enabling automated git branch creation, implementation of changes, and commit and push to GitHub via a prompt or slash trigger.

Windsurf enables effortless deployment of web applications with a prompt and one click, building a production build and deploying to Netlify. Track status, view logs, and claim app on Netlify.

discover windsurf pricing updates and a simplified free plan. the free tier includes 25 monthly credits, access to premium models, optional zero data retention, and daily app deployments.

Celebrate your certificate by marking all lectures and sharing on LinkedIn, then explore next steps with AI coding tools, prompt engineering, debugging, and side projects to deepen learning.