RC
Rupert Chesman
or Space to navigate
1 / 145
Course Presentation

Vibe Coding

Build real apps with AI — no coding experience required. Describe the vibe, and let AI write the code.

ONE-DAY COURSE

Describe what you want.
AI builds it.

That's vibe coding.

The new paradigm in software creation

What You'll Learn

  • Build complete web apps using natural language — no syntax required
  • Master three AI development tools: ChatGPT, Google AI Studio, and Bolt
  • Write effective prompts that produce working, deployable applications
  • Debug, refine, and iterate on AI-generated code like a professional
  • Deploy your apps to the live web for the world to use
  • Complete a capstone project for your professional portfolio

Who This Course Is For

  • Complete beginners who've never written a line of code
  • Entrepreneurs who want to prototype ideas without hiring developers
  • Designers who want to bring their mockups to life
  • Educators who want to teach students modern app building
  • Professionals who are curious about AI-assisted development
  • Anyone who's had an app idea but didn't know where to start

One Day

Everything you need across 9 modules — from first prompt to deployed app, all in a single day

Course Structure

Nine Modules

  • Module 1 — What Is Vibe Coding?
  • Module 2 — Your AI Toolkit
  • Module 3 — Prompt Engineering
  • Module 4 — Building with ChatGPT
  • Module 5 — Google AI Studio
  • Module 6 — Bolt & Full-Stack AI
  • Module 7 — The Development Loop
  • Module 8 — Capstone Project
  • Module 9 — Pitfalls & Best Practices
Module 1

What Is Vibe Coding?

A new paradigm: describe what you want, and AI builds it for you.

01

What Is Vibe Coding?

Objectives

What You'll
Learn

  • Define vibe coding and explain how it differs from traditional programming
  • Describe the mindset shift from 'writing code' to 'directing AI'
  • Identify what vibe coding can and cannot do
  • Articulate why this approach makes software accessible to everyone
Definition

A New Way to Build Software

From typing syntax to describing ideas.

Vibe Coding Defined

  • Use natural-language prompts to generate software — no coding syntax needed
  • You describe the 'vibe' of your app: what it looks like, how it works, who it's for
  • AI agents (ChatGPT, Google AI Studio, Bolt) write the actual code
  • The term emerged in early 2025 as AI coding tools matured rapidly
  • Think of it as 'directing' software rather than 'typing' software
  • The fastest path from idea to working application ever created

The Old Way vs The New Way

  • Traditional: Learn syntax → write code → debug → learn frameworks → deploy
  • This takes months or years before you ship anything useful
  • Vibe coding: Describe your idea → AI generates code → review → refine → deploy
  • You can ship a working app in minutes, not months
  • The barrier to entry drops from 'years of study' to 'clear thinking'
  • The skill shifts from syntax mastery to clear communication

We are the architects.
AI is the builder.

You don't need to lay every brick to design a house.

The vibe coding mindset

Mindset

Think Like a Director

Your role changes from mechanic to architect.

The Architect Mindset

  • You focus on what to build — AI focuses on how to build it
  • Your job: define goals, describe user experience, set constraints
  • AI's job: generate HTML, CSS, JavaScript, databases, authentication
  • This is not 'cheating' — it's a fundamental shift in how software is made
  • Just as calculators didn't replace maths, AI doesn't replace thinking
  • The human provides creativity, judgement, and domain knowledge

What Changes, What Stays

  • Goes Away
  • Writing syntax line by line
  • Memorising function names
  • Learning framework boilerplate
  • Manual CSS styling
  • Configuring build tools
  • Stays Essential
  • Problem-solving and design thinking
  • Understanding user needs
  • Testing and quality judgement
  • Creative vision and originality
  • Ethical responsibility

What Vibe Coding Is NOT

  • Not a replacement for understanding what software does
  • Not 'magic' — AI makes mistakes, sometimes confidently
  • Not a way to avoid thinking — you still design, decide, and verify
  • Not limited to toys — people are building real businesses with it
  • Not just for tech people — it's specifically designed for non-programmers
  • Not a fad — this is how most software will be built within 5 years

The Promise of Accessibility

  • Traditional coding excludes 99% of people with great ideas
  • Vibe coding opens the door: if you can describe it, you can build it
  • Entrepreneurs can prototype without funding a dev team
  • Teachers can build educational tools for their specific classroom
  • Artists can create interactive experiences without learning JavaScript
  • The democratisation of software creation is here

Real-World Examples

  • A teacher builds a quiz app for her Year 8 class in 15 minutes
  • A small business owner creates a booking system without hiring a developer
  • A student builds a study tool that tracks their revision progress
  • A musician creates an interactive portfolio with embedded audio
  • A charity volunteer builds a donation tracker for their fundraiser
  • All of these were impossible without coding — until now
Activity

Describe Your Dream App

8 min

Think of an app you wish existed — something useful for your life or work. 1. What does it do? 2. Who uses it? 3. What does it look like? 4. What makes it useful? Write 3-4 sentences describing it as if you were explaining it to a friend. This is your first 'vibe'.

Recap

What We
Covered

  • Vibe coding = building software by describing it in natural language
  • The mindset shift: architect, not mechanic
  • AI handles syntax — you handle thinking, creativity, and judgement
  • This approach makes software creation accessible to everyone
Module 2

Your AI Toolkit

Meet the three tools that will power your development journey.

02

Your AI Toolkit

Objectives

What You'll
Learn

  • Identify the three primary AI development tools and their strengths
  • Understand when to use ChatGPT vs AI Studio vs Bolt
  • Compare free and paid tiers across platforms
  • Set up accounts and access each tool confidently
The Big Three

ChatGPT · AI Studio · Bolt

Three tools, three superpowers. Here's how they fit together.

ChatGPT — Your AI Tutor

  • Best for: learning concepts, generating code snippets, debugging errors
  • Think of it as a knowledgeable coding partner available 24/7
  • Ask it to explain any concept in plain English with examples
  • Paste in error messages and get instant debugging help
  • Generate boilerplate code, functions, and templates on demand
  • Free tier available — no credit card required to start

ChatGPT — What It Can't Do

  • Cannot create a complete, deployed app in one step
  • No live preview — you get code text, not a running application
  • No built-in hosting or deployment pipeline
  • Outputs need to be copied into a code editor or another tool
  • Has a knowledge cutoff — may not know the very latest APIs
  • Best used in combination with AI Studio or Bolt, not alone

Google AI Studio — Your App Factory

  • Best for: building complete web apps from a single prompt
  • Google's Build mode goes from idea to live app in under a minute
  • Powered by Gemini models — Google's most capable AI
  • Live preview updates as you refine your prompts in real-time
  • One-click deployment to Google Cloud Run for public hosting
  • Free to prototype — minimal cost to deploy (roughly $0.10/month)

AI Studio — Standout Features

  • Multimodal inputs: draw on the preview to guide changes
  • Voice commands: speak your refinements instead of typing
  • System instructions: set a persistent design persona or style
  • Template library: start from quiz, chart, or image generator templates
  • Automatic database and authentication when your app needs it
  • Built-in Firebase integration for backend functionality

Bolt — Your Full-Stack Workshop

  • Best for: complete apps with user accounts, databases, and rich features
  • AI-powered builder that generates full-stack code in a live editor
  • See both the running app AND the source code side by side
  • Choose your AI agent: ChatGPT 5.5, Claude, or other models
  • Built-in database, authentication, and hosting on bolt.host
  • Free tier includes ~300K tokens per day for prompting

Bolt — Standout Features

  • Integrated code editor: peek under the hood when you're ready
  • GitHub integration for version control and collaboration
  • Figma integration: import designs and convert to code
  • Choose from multiple AI models for different coding strengths
  • Instant publishing on bolt.host — shareable URLs in seconds
  • Full-stack capability: React, databases, APIs, mobile via Expo

Quick Comparison

  • Strengths
  • ChatGPT: Tutor & code snippets
  • AI Studio: Fast prototyping
  • Bolt: Full-stack apps
  • ChatGPT: Free tier generous
  • AI Studio: Free to build
  • Considerations
  • Bolt: Free tier with limits
  • ChatGPT: No live preview
  • AI Studio: Google account needed
  • Bolt: Account required
  • All three: Browser-based

Each tool has a superpower.

ChatGPT teaches. AI Studio prototypes. Bolt ships.

Use the right tool for the right job

Beyond the Big Three

Other Tools Worth Knowing

The AI coding landscape is growing fast.

Other AI Coding Tools

  • Cursor — AI-native code editor, excellent for developers moving to AI-assisted workflow
  • Claude — Anthropic's AI, strong at reasoning and long-context coding tasks
  • Replit — Browser-based IDE with AI coding assistant built in
  • GitHub Copilot — AI pair programmer that suggests code as you type
  • v0 by Vercel — AI that generates React components from descriptions
  • We focus on ChatGPT, AI Studio, and Bolt as the most beginner-friendly trio

Free vs Paid — What You Need

  • ChatGPT free tier: excellent for learning and code generation
  • Google AI Studio: free for building, minimal cost for deployment
  • Bolt free tier: ~300K tokens/day — enough for learning exercises
  • For this course, free tiers are sufficient for all exercises
  • Paid tiers unlock faster models, more tokens, and priority access
  • Recommendation: start free, upgrade only if you hit limits on your capstone
Activity

Tool Exploration

10 min

Open each tool in your browser: 1. chat.openai.com — ask ChatGPT to explain what vibe coding is 2. aistudio.google.com — explore Build mode templates 3. bolt.new — read the quickstart guide For each tool, write one sentence: what excites you most about it?

Recap

What We
Covered

  • ChatGPT is your AI tutor — learn concepts, debug errors, generate snippets
  • Google AI Studio is your app factory — prototype to deployment in minutes
  • Bolt is your full-stack workshop — complete apps with databases and hosting
  • Free tiers are sufficient for this entire course
Module 3

Prompt Engineering

The most important skill in vibe coding: telling AI exactly what you want.

03

Prompt Engineering

Objectives

What You'll
Learn

  • Write clear, specific prompts that produce working applications
  • Understand why prompt structure matters more than technical knowledge
  • Use iterative refinement to improve AI outputs step by step
  • Apply role-based prompting and system instructions effectively
Foundations

The Art of Clear Communication

Your prompt is your blueprint. Vague blueprints build wonky houses.

What Is a Prompt?

  • A prompt is a natural-language instruction you give to an AI system
  • In vibe coding, your prompt IS your code — it defines what gets built
  • The quality of your prompt directly determines the quality of your app
  • A good prompt is specific, structured, and complete
  • Think of it as a creative brief you'd give to a designer or developer
  • The better you communicate, the better the AI performs

Anatomy of a Good Prompt

  • What: clearly state what you're building (a quiz app, a calculator, a dashboard)
  • Who: describe the user (students, customers, team members)
  • How: specify functionality (buttons, inputs, data storage, calculations)
  • Look: describe the visual style (modern, minimal, dark theme, colourful)
  • Constraints: mention any limits (single page, no login required, mobile-friendly)
  • Each element reduces ambiguity and improves the AI's output dramatically

Weak vs Strong Prompts

  • Weak (Vague)
  • 'Make a website'
  • 'Build an app for school'
  • 'Create something with a database'
  • 'Make it look nice'
  • Strong (Specific)
  • 'Create a single-page HTML site with a header, a paragraph about chess, and a blue background'
  • 'Build a multiple-choice quiz app on Australian history with 10 questions and a score counter'
  • 'Create a to-do app with user login and a database that saves tasks'
  • 'Use a dark theme with rounded cards, lime green accents, and the Inter font'

Why Specificity Matters

  • Vague prompts give AI too many choices — it guesses, often poorly
  • Specific prompts constrain the output to what you actually want
  • Compare: 'Make a calculator' vs 'Build a tip calculator that splits the bill between 2-10 people'
  • The second prompt gives AI a clear target to hit
  • You don't need technical vocabulary — plain English is perfect
  • The skill is clarity of thought, not knowledge of programming jargon

The quality of your app
is directly proportional to
the quality of your prompt.

The first rule of vibe coding

Advanced Techniques

Level Up Your Prompts

From good to great: techniques that produce professional results.

Iterative Refinement

  • You don't need to get the perfect prompt on your first try
  • Start with a basic prompt → review the output → refine → repeat
  • Example: 'Make the button blue and increase the font size'
  • Or: 'Add a dark mode toggle in the top-right corner'
  • Each refinement is a conversation — the AI remembers context
  • Professional developers iterate 10-20 times on a single feature

Context and Constraints

  • Give the AI context about your audience: 'for primary school students'
  • Set constraints: 'must work on mobile', 'single page only', 'no external APIs'
  • Mention technologies if you have a preference: 'use React and Tailwind CSS'
  • Describe the tone: 'playful and colourful' vs 'professional and minimal'
  • Be explicit about what you DON'T want: 'no signup required'
  • Constraints actually help AI — they narrow the solution space

Role-Based Prompting

  • Start prompts with a role: 'Act as an expert web developer'
  • Or: 'You are a UI/UX designer who specialises in accessible interfaces'
  • Roles give the AI a perspective and quality standard to match
  • For debugging: 'Act as a senior developer reviewing this code for bugs'
  • For learning: 'Act as a coding tutor explaining to a complete beginner'
  • Roles consistently produce higher-quality, more focused outputs

System Instructions

  • In AI Studio, you can set persistent instructions that apply to every prompt
  • Example: 'Always use a retro-futurist UI style with neon colours'
  • This creates a consistent design language across your entire project
  • Think of it as setting the 'house style' before you start building
  • ChatGPT has 'Custom Instructions' for the same purpose
  • Bolt inherits context from your conversation — keep refining in the same thread

Debugging with Prompts

  • When your app has an error, copy the error message verbatim into the AI
  • Be specific: 'My JavaScript code has this error: [paste error]. How do I fix it?'
  • AI tools are excellent at interpreting error messages and suggesting fixes
  • Sometimes fixing one error reveals another — this is normal, keep iterating
  • Bolt can parse error text directly and suggest fixes automatically
  • Always test the fix — AI suggestions aren't always correct
Activity

Prompt Improvement Workshop

12 min

Take this weak prompt: 'Build me an app for recipes' Rewrite it three times, each time adding more detail: 1. Add WHAT the app does specifically 2. Add WHO uses it and HOW it looks 3. Add CONSTRAINTS and FEATURES Share your best version with the class.

Recap

What We
Covered

  • Good prompts are specific, structured, and include context
  • Iterative refinement: start simple, then layer in detail
  • Role-based prompting improves output quality significantly
  • Debug by pasting error messages directly into the AI
Module 4

Building with ChatGPT

Your AI tutor, code generator, and debugging partner.

04

Building with ChatGPT

Objectives

What You'll
Learn

  • Use ChatGPT to generate working code snippets and complete functions
  • Leverage ChatGPT as a tutor for learning programming concepts
  • Debug code by feeding error messages into ChatGPT effectively
  • Document your prompt-and-response process for learning and assessment
Coding Partner

ChatGPT as Your AI Assistant

Available 24/7, infinitely patient, and surprisingly knowledgeable.

Code Generation Basics

  • Ask ChatGPT to write complete functions: 'Write a function that calculates compound interest'
  • Generate full page layouts: 'Create an HTML page with a navigation bar and three cards'
  • Get multiple approaches: 'Show me three different ways to sort a list in Python'
  • Specify the language: 'Write this in JavaScript', 'Use Python 3', 'Use React'
  • Ask for comments: 'Add comments explaining each line'
  • Request tests: 'Write unit tests for this function'

Concept Explanation

  • Ask ChatGPT to explain any concept: 'Explain what a loop is with a simple example'
  • Adjust complexity: 'Explain it like I'm five' vs 'Give me the technical details'
  • Get analogies: 'Compare a database to something in everyday life'
  • Walk through code: 'Explain this code line by line'
  • Compare approaches: 'What's the difference between React and Vue?'
  • This makes ChatGPT the most patient tutor you'll ever have

Error Debugging Workflow

  • Step 1: Copy the exact error message from your browser or terminal
  • Step 2: Paste it into ChatGPT with context: 'I got this error in my React app'
  • Step 3: ChatGPT explains what went wrong and suggests a fix
  • Step 4: Apply the fix and test — if a new error appears, repeat
  • Step 5: Ask follow-up questions: 'Why did this happen? How do I prevent it?'
  • This process replaces hours of Stack Overflow searching

ChatGPT is the tutor who never gets tired,
never judges your questions,
and is always available at 2am.

Your 24/7 learning partner

In Practice

Making ChatGPT Work for You

Practical strategies for getting the most from your AI tutor.

Coding Exercises with ChatGPT

  • Challenge: 'Use ChatGPT to write the first 10 Fibonacci numbers in Python'
  • Then: 'Explain how the code works step by step'
  • Then: 'Rewrite it using a different approach (recursion instead of iteration)'
  • This three-step process — generate, explain, refine — builds real understanding
  • Compare different AI outputs: ask ChatGPT and Claude the same question
  • The learning happens in the analysis, not just the generation

Assessment & Prompt Logs

  • Keep a log of every prompt you send and every response you receive
  • Document what worked, what didn't, and what you changed
  • Your prompt log IS your evidence of learning and thinking
  • Assessment rubrics focus on: prompt quality, iteration depth, and understanding
  • Can you explain why the AI's code works? That's the real test
  • Process documentation matters more than the final output alone

ChatGPT Limitations to Know

  • It can generate incorrect code that looks plausible — always test
  • It may use outdated APIs or deprecated functions — verify versions
  • It has token limits — very long conversations lose earlier context
  • It doesn't have a live preview — you'll need another tool to see results
  • It can't access the internet or test code — that's your job
  • Think of it as a brilliant but occasionally unreliable colleague
Activity

Debug Challenge

10 min

Your instructor will give you a piece of code with a deliberate bug. 1. Read the code and try to spot the bug yourself first 2. Paste the code into ChatGPT and ask it to find the bug 3. Compare: did you find the same issue? 4. Apply the fix and verify it works Reflect: was the AI's explanation helpful? Was it correct?

Recap

What We
Covered

  • ChatGPT excels at code generation, concept explanation, and debugging
  • The generate → explain → refine cycle builds real understanding
  • Keep prompt logs — they're your evidence of learning
  • Always verify AI outputs — it's brilliant but not infallible
Module 5

Google AI Studio

From idea to live web app in under a minute. Seriously.

05

Google AI Studio

Objectives

What You'll
Learn

  • Build a complete web app using AI Studio's Build mode
  • Refine apps in real-time using chat-based iteration
  • Use multimodal inputs (drawing, voice) to guide AI development
  • Deploy a working app to Google Cloud Run with one click
Getting Started

AI Studio Build Mode

The fastest path from idea to working web app.

What Is Build Mode?

  • AI Studio Build mode creates complete web apps from a single natural-language prompt
  • Powered by Google's Gemini models — among the most capable AI available
  • Type a description, wait about 60 seconds, and get a working app with live preview
  • The AI generates HTML, CSS, JavaScript, and even backend logic automatically
  • You can then refine the app through conversation — just describe changes
  • No installations needed — works entirely in Chrome with a Google account

Your First App Prompt

  • Start simple: 'Create a percent error calculator'
  • Or: 'Create a startup name generator with a text box for industry and a button that shows 10 names'
  • Within a minute, AI Studio generates the entire app with a live preview
  • You can immediately interact with the app — click buttons, enter data, test features
  • If something isn't right, type a refinement: 'Make the button blue and larger'
  • The preview updates in real-time as you refine

Live Demo: Building a Quiz App

  • Prompt: 'Create a multiple-choice quiz app on world capitals with 10 questions'
  • AI Studio generates: question display, answer buttons, scoring, results screen
  • Refine: 'Add a timer that gives 15 seconds per question'
  • Refine: 'Show a progress bar and the current score at the top'
  • Refine: 'Use a dark theme with green accent colours'
  • In 5 minutes, you have a polished, functional quiz app

The quickest way to go from an idea
to a live, shareable web app —
often with a single prompt.

Google AI Studio documentation

Going Deeper

Advanced AI Studio Features

Templates, multimodal input, system instructions, and deployment.

Template Exploration

  • AI Studio offers pre-built templates: quiz, chart, image generator, and more
  • Templates give you a head start — customize them with your own prompts
  • Each template demonstrates a different type of app structure
  • Assign yourself a template, tweak the prompt, and compare results
  • Templates teach common app patterns: forms, data display, interactive elements
  • Use templates for inspiration, then build your own from scratch

Prompt Refinement in Real-Time

  • After your first build, use the chat to make incremental changes
  • Style changes: 'Make the button blue and increase the font size'
  • Feature additions: 'Add user login and save scores to a database'
  • Layout changes: 'Move the navigation to a sidebar instead of the top'
  • The AI preserves your previous work while applying changes
  • This iterative process is how professional apps are built — one feature at a time

Multimodal Inputs

  • Draw directly on the live preview to guide the AI's changes
  • Click on a UI element and type: 'Change this icon to a red circle'
  • Use voice commands to describe what you want — speak instead of type
  • Annotation mode: circle an area and say 'make this section wider'
  • This is the closest to 'pointing and talking' to build software
  • Powerful for visual designers who think in layouts, not code

System Instructions & Personas

  • Set a persistent style for your entire project via System Instructions
  • Example: 'Always use a retro-futurist UI with neon colours and dark backgrounds'
  • Every subsequent prompt inherits this style automatically
  • Create consistent design languages across multiple app screens
  • Other persona examples: 'minimalist Japanese design', 'playful children's app'
  • System instructions teach you about roles and context in AI interactions

Deployment to Cloud Run

  • Click 'Deploy' in AI Studio to publish your app to the live web
  • You get a shareable URL anyone in the world can access
  • Google Cloud Run handles hosting, scaling, and reliability
  • Cost is minimal — typically around $0.10 per month for a simple app
  • A Google account with billing enabled is required for deployment
  • This removes the traditional pain of web hosting — one click and you're live
Activity

Build a Calculator App

15 min

Open AI Studio (aistudio.google.com) and use Build mode. Prompt: 'Create a tip calculator that lets me enter a bill amount, choose a tip percentage (15%, 18%, 20%, 25%), and split the total between 2-10 people.' 1. Review the generated app 2. Refine: add a dark theme 3. Refine: add a 'round up' toggle 4. Share your result with a classmate

Recap

What We
Covered

  • AI Studio Build mode creates complete web apps from a single prompt
  • Refine apps iteratively through natural conversation
  • Multimodal inputs (draw, speak, point) make refinement intuitive
  • One-click deployment to Cloud Run makes your app publicly accessible
Module 6

Bolt & Full-Stack AI

Build complete apps with databases, user accounts, and deployment.

06

Bolt & Full-Stack AI

Objectives

What You'll
Learn

  • Build a full-stack application using Bolt's AI chat interface
  • Navigate Bolt's code editor and understand the generated file structure
  • Add databases, authentication, and integrations to AI-built apps
  • Deploy and publish apps on Bolt Cloud with shareable URLs
Introduction

Meet Bolt

An AI-powered builder for websites, web apps, and mobile apps.

What Is Bolt?

  • Bolt is an AI builder that generates full-stack apps from natural language
  • You type your idea, and Bolt creates a complete project with all files
  • Unlike ChatGPT, Bolt shows both the running app AND the source code
  • Built-in live preview — see your app running as the AI builds it
  • Integrated code editor — peek under the hood when you're ready
  • From StackBlitz — trusted by millions of developers worldwide

Setup and Quickstart

  • All you need: a modern browser (Chrome, Edge) and a free Bolt account
  • Sign up at bolt.new using Google or GitHub — takes 30 seconds
  • No software installations required — everything runs in the browser
  • The quickstart guide walks you through your first app in ~10 minutes
  • Free tier includes ~300K tokens per day — plenty for learning
  • Paid tiers available for larger projects and faster models

Example: Pet Name Picker

  • Prompt: 'Build a pet name picker app with dropdowns for animal types and name categories'
  • Add: 'Include user email signup/login and ability to save favourite names'
  • Bolt generates: React components, database schema, auth flow, and UI
  • Within minutes, a working app appears with full functionality
  • You can see all generated files in the code panel on the left
  • The live preview on the right updates as the AI writes code

You type your idea.
Bolt transforms it into
a working product in minutes.

Bolt documentation

Features

Power Tools Inside Bolt

Code editor, AI agents, databases, integrations, and hosting.

The Code Editor

  • Bolt shows you the complete file structure: components, styles, utilities
  • Click any file to see the AI-generated code — it's clean, well-structured
  • You don't need to read the code to use Bolt — but you can learn from it
  • If you want to make a manual tweak, edit directly in the browser
  • This is the bridge from no-code to understanding code
  • Over time, you'll start recognising patterns and learning what code does

Choosing AI Agents

  • Bolt lets you select which AI model generates your code
  • Options include ChatGPT 5.5, Claude, and other leading models
  • Different models have different strengths: speed, creativity, accuracy
  • ChatGPT 5.5: versatile and reliable for most tasks
  • Claude: excellent for complex reasoning and longer code generation
  • Experiment to find which model works best for your project type

Database & Authentication

  • Bolt automatically creates a database when your app needs one
  • Prompt: 'Add user accounts with saved preferences' — Bolt handles the rest
  • Built-in database UI lets you inspect, add, and manage data
  • Authentication: email signup, login, password reset — all generated
  • This teaches backend concepts without requiring backend knowledge
  • You learn what databases DO by using them, not by configuring them

Integrations

  • Connect Bolt to GitHub for version control and collaboration
  • Import designs from Figma — convert visual mockups into working code
  • Add external APIs: maps, weather, payment processing
  • Bolt can scaffold connections to Firebase, Supabase, and other services
  • Version control teaches professional development practices
  • Integrations show how real-world apps connect to external services

Publishing and Hosting

  • Bolt offers free hosting on bolt.host — your app gets a shareable URL
  • Click 'Deploy' and your app is live on the internet in seconds
  • Share the URL with anyone — they can use your app immediately
  • Custom domains available on paid plans for professional projects
  • This covers the full lifecycle: idea → build → deploy → share
  • Students learn about DNS, URLs, and web hosting as a natural byproduct
Activity

Build with Bolt

15 min

Open bolt.new and try this prompt: 'Build a recipe finder app where I can search by ingredient. Show results as cards with the recipe name, cooking time, and difficulty level. Use a warm colour scheme.' 1. Review the generated app 2. Try the code editor — find the main component 3. Refine: 'Add a favourites feature with a heart icon' 4. Deploy and share your URL

Recap

What We
Covered

  • Bolt creates full-stack apps with databases, auth, and hosting
  • The code editor bridges no-code to code literacy
  • Choose between AI agents for different coding strengths
  • One-click deployment on bolt.host makes sharing instant
Module 7

The Development Loop

The iterative cycle that turns rough ideas into polished applications.

07

The Development Loop

Objectives

What You'll
Learn

  • Understand the iterative development loop: idea → prompt → review → refine
  • Apply effective debugging strategies when AI-generated code fails
  • Use version control basics to manage your project safely
  • Test your apps systematically before deployment
The Cycle

Build. Review. Refine. Repeat.

Professional development is never a straight line — it's a loop.

The Iterative Workflow

  • Step 1: Start with your idea — describe the 'vibe' of what you want
  • Step 2: Write a prompt and send it to your chosen AI tool
  • Step 3: Review the output — does it match your vision?
  • Step 4: Refine your prompt — add detail, fix issues, change direction
  • Step 5: When satisfied, deploy and test with real users
  • This cycle repeats dozens of times in a typical project — that's normal

The Feedback Loop

  • Each iteration teaches you something about how AI interprets your words
  • You learn to be more precise with each prompt you refine
  • The AI learns your context within a conversation — builds on previous work
  • Don't expect perfection on the first try — no developer does
  • The gap between 'almost right' and 'perfect' is where real skill develops
  • Professional developers spend 80% of their time refining, not building

The first version is never the last version.

Iteration is not failure — it's the process.

How every good app gets built

Debugging

When Things Go Wrong

And they will. Here's how to handle it like a professional.

Reading Error Messages

  • Error messages look scary but they're actually helpful — they tell you what broke
  • Key parts: the error type, the file name, and the line number
  • Common errors: undefined variables, missing imports, syntax typos
  • You don't need to understand the error — just copy it accurately
  • AI tools are excellent at interpreting error messages for you
  • Over time, you'll start recognising common errors yourself

Feeding Errors to AI

  • Copy the error message verbatim — don't paraphrase or summarise
  • Include context: 'This error appeared when I clicked the submit button'
  • Paste the relevant code alongside the error for better diagnosis
  • Ask: 'What caused this error and how do I fix it?'
  • If the fix creates a new error, repeat the process — this is iterative debugging
  • One developer reported 45 minutes of back-and-forth to fix a complex bug — that's normal

Version Control Basics

  • Version control saves snapshots of your project — like 'undo' for your whole app
  • Git is the industry standard — Bolt integrates with GitHub directly
  • Save your work before making big changes — you can always go back
  • Bolt Cloud saves your project automatically — but manual saves add safety
  • If something breaks badly, you can restore a previous working version
  • Think of it as insurance for your code

Testing Your App

  • Test every feature yourself before showing anyone else
  • Try to break it — enter unexpected inputs, click things out of order
  • Test on different screen sizes — does it work on mobile?
  • Ask a friend or classmate to test — fresh eyes find bugs you missed
  • Check edge cases: what happens with empty fields? Very long text? Numbers?
  • A tested app is a professional app — this step separates good from great
Activity

Debug an AI-Built App

12 min

Your instructor will provide a broken app (or use one from a previous exercise). 1. Open the app and find the bug (what doesn't work?) 2. Open the browser console (F12) and copy the error message 3. Paste the error into ChatGPT or Bolt and ask for a fix 4. Apply the fix and verify it works 5. Document: what was the bug? How did AI help fix it?

Recap

What We
Covered

  • The development loop: idea → prompt → review → refine → deploy
  • Iteration is the process, not a sign of failure
  • Copy error messages verbatim into AI for effective debugging
  • Test thoroughly before deployment — try to break your own app
Module 8

Capstone Project

Everything comes together: plan, build, deploy, and present your own app.

08

Capstone Project

Objectives

What You'll
Learn

  • Propose and plan a meaningful capstone project with clear milestones
  • Build a working application using a combination of AI tools
  • Deploy your app to the live web with a public URL
  • Present your work, explaining your process, prompts, and learnings
Planning

From Idea to Project Plan

Choose something meaningful, scope it carefully, and set clear milestones.

Choosing Your Project

  • Pick something you actually care about — passion drives better work
  • It should solve a real problem or fill a real need in your life
  • Keep it achievable: one core feature done well beats ten done poorly
  • Consider your audience: who will use this? What do they need?
  • Examples: study tool, club website, booking system, portfolio, game
  • The best projects are personally meaningful and practically useful

The Study Buddy Quiz App

  • Example project: a web-based quiz platform for your favourite subject
  • Users can take quizzes, see their scores, and track their progress
  • Features: multiple question types, scoring, user accounts, progress tracking
  • Tech: built with AI Studio or Bolt, deployed to the live web
  • This example demonstrates all the skills from the course
  • You'll follow a similar structure for your own unique project

Milestone 1: Proposal

  • Define your app's goals: what does it do and who is it for?
  • Write your initial prompts — draft at least three versions
  • Sketch the user interface: what screens does your app have?
  • List the features: must-haves vs nice-to-haves
  • Submit a design document explaining your vision
  • Your instructor reviews and gives feedback before you start building

Milestone 2: Prototype

  • Use AI Studio or Bolt to generate your first working prototype
  • Focus on the core feature — get one thing working well
  • Don't worry about polish yet — functionality first, design second
  • Test the prototype yourself: does the core feature work?
  • Show a working prototype to your instructor and get feedback
  • Document the prompts you used and how the AI responded

Milestone 3: Enhancements

  • Add at least two major features to your prototype
  • Examples: user login, database storage, search, filtering, dark mode
  • Use prompt refinement to iterate on design and functionality
  • Integrate feedback from Milestone 2 review
  • Start polishing: colours, fonts, layout, error handling
  • This is where your app goes from 'working' to 'impressive'

Milestone 4: User Testing

  • Have at least two classmates test your app thoroughly
  • Provide them with a testing checklist: features to try, edge cases to explore
  • Collect their feedback: what worked? What was confusing? What broke?
  • Fix issues using AI-assisted debugging — document each fix
  • Re-test after fixes to confirm everything works
  • User testing always reveals things you never expected

Milestone 5: Final Presentation

  • Deploy your final app to Cloud Run or Bolt Cloud with a public URL
  • Prepare a 5-minute presentation covering your project
  • Explain: your idea, your prompts, AI's role, what you learned
  • Demo the live app — show key features working
  • Discuss: where did AI help most? Where did it struggle?
  • Submit: deployed URL, code, prompt log, and written reflection

Assessment Rubric

  • Functionality (25%): does the app work correctly and reliably?
  • Prompt Design (20%): are your prompts clear, specific, and well-iterated?
  • Complexity (20%): did you implement meaningful features beyond the basics?
  • Creativity (15%): is the app original, thoughtful, and well-designed?
  • Documentation (20%): did you document prompts, iterations, and reflections?
  • The rubric rewards process and thinking, not just the final product
Activity

Draft Your Project Proposal

15 min

Write a one-page project proposal: 1. App name and description (2-3 sentences) 2. Target audience: who is it for? 3. Core features (3-5 bullet points) 4. Tools you'll use (ChatGPT, AI Studio, Bolt?) 5. Your first prompt (draft version) Share with a partner for feedback.

Recap

What We
Covered

  • Choose a project you care about — passion drives quality
  • Five milestones: proposal, prototype, enhancements, testing, presentation
  • Document everything — prompts, iterations, AI responses, reflections
  • The rubric rewards thinking and process, not just the final product
Module 9

Pitfalls & Best Practices

Common traps, proven solutions, and habits that make you effective.

09

Pitfalls & Best Practices

Objectives

What You'll
Learn

  • Identify and avoid the most common vibe coding mistakes
  • Understand AI limitations: hallucinations, token limits, and bias
  • Apply best practices for prompt design, testing, and collaboration
  • Develop a troubleshooting mindset for when things go wrong
Common Pitfalls

Traps That Trip Up Beginners

Knowing these in advance saves hours of frustration.

Pitfall: Ambiguous Prompts

  • Vague instructions yield poor results — the AI has to guess what you mean
  • 'Make a website' could produce literally anything
  • Fix: add specifics — page structure, content, colours, functionality
  • Rule of thumb: if a human couldn't build it from your description, neither can AI
  • The #1 cause of bad AI output is unclear input
  • Spend 5 minutes on your prompt to save 50 minutes of refinement

Pitfall: AI Hallucinations

  • AI can generate plausible-sounding code that is completely wrong
  • It may reference APIs that don't exist or functions with wrong parameters
  • It can write confident explanations of incorrect concepts
  • AI is a prediction engine — it predicts what code SHOULD look like
  • Always test AI-generated code — never deploy without verification
  • Healthy scepticism is your most valuable tool

Pitfall: Error Spiral

  • Fixing one error sometimes creates another — this is completely normal
  • AI-built apps often have runtime errors initially — expect it
  • Don't panic: copy the new error, paste it into AI, get a new fix
  • If you go in circles, try a different approach: rephrase the prompt entirely
  • Sometimes starting from scratch is faster than patching a broken foundation
  • One developer needed 45 minutes of back-and-forth — patience is key

Pitfall: Tool Limits

  • ChatGPT has token limits — very long conversations lose context
  • Bolt's free tier caps at ~300K tokens per day — plan your prompts wisely
  • AI Studio deployment requires billing — set this up early, not at the deadline
  • Save your best prompts in a document — don't waste tokens re-inventing them
  • If you hit a limit, switch tools: use ChatGPT for debugging, Bolt for building
  • Free tiers are generous but not unlimited — use them thoughtfully

AI suggestions are guides, not gospel.

Trust your judgement. Verify everything.

The golden rule of AI-assisted development

Best Practices

Habits of Effective Vibe Coders

These practices separate beginners from professionals.

Practice: Prevent Overreliance

  • Don't let AI do all the thinking — you still need to understand what it builds
  • After AI generates code, ask yourself: 'Can I explain what this does?'
  • If not, ask the AI to explain it — then test your understanding
  • Compare AI outputs: run the same prompt in two different tools
  • Challenge the AI: 'Is there a better way to do this?'
  • The goal is to learn through AI, not to outsource thinking to AI

Practice: Process Documentation

  • Save every prompt you send and every significant response you receive
  • Note what worked, what didn't, and why you made changes
  • Your prompt log is your most valuable learning artifact
  • It demonstrates your thinking process, not just your output
  • Future projects benefit from reviewing past successful prompts
  • Documentation is what separates 'I used AI' from 'I mastered AI'

Practice: Collaborative Development

  • Share successful prompts with classmates — everyone learns faster
  • Pair up: one person prompts, another reviews output, then swap
  • Compare results from different tools for the same prompt
  • Peer-review each other's AI-generated code — fresh eyes catch issues
  • Brainstorm prompts together before building — diverse perspectives improve quality
  • Vibe coding is inherently social — collaboration amplifies results

Practice: Ethics & AI Literacy

  • AI is a partner, not a replacement for human judgement
  • Discuss pitfalls openly: biases in AI output, incorrect code, privacy concerns
  • Require verification of AI-generated content — facts, code, and design
  • Understand that AI reflects patterns in training data — including biases
  • Use AI responsibly: give credit, don't misrepresent AI work as human work
  • Critical thinking about AI is as important as using AI effectively

Troubleshooting Checklist

  • App won't build? Check your prompt for ambiguity — add specifics
  • Error message? Copy it verbatim into AI — don't paraphrase
  • AI going in circles? Start a new conversation with a clearer prompt
  • Deployment failing? Verify your account settings and billing status
  • Feature not working? Break it into smaller prompts — build incrementally
  • Completely stuck? Switch tools — ChatGPT for diagnosis, Bolt for building
Activity

Fix the Worst Prompt

8 min

Each of these prompts is terrible. Pick two and fix them: 1. 'Make an app' 2. 'I need a thing for my business' 3. 'Create something educational' 4. 'Build a website that does stuff' Transform each into a specific, structured prompt that would produce a useful app. Explain what you added and why.

Recap

What We
Covered

  • Ambiguous prompts are the #1 cause of poor AI output
  • Always verify AI-generated code — hallucinations are common
  • Document your process — it's your most valuable learning artifact
  • Balance AI assistance with genuine understanding and critical thinking
Course Complete

What You've Built

From 'I can't code' to 'I shipped an app' — let's look at the journey.

9
Modules Completed
3
AI Tools Mastered
1
Portfolio App Deployed
Ideas You Can Build

Skills You've Gained

  • Write effective prompts that produce working applications
  • Use ChatGPT for learning, debugging, and code generation
  • Build complete web apps with Google AI Studio's Build mode
  • Create full-stack applications with Bolt including databases and auth
  • Debug, refine, and iterate on AI-generated code professionally
  • Deploy apps to the live web and share them with the world

Resources & Community

  • Google AI Studio docs and codelabs — step-by-step app building guides
  • Bolt support site and quickstart guides — comprehensive reference
  • OpenAI documentation — prompt engineering best practices
  • Reddit communities: r/vibecoding, r/boltnewbuilders
  • Discord servers for Bolt and AI Studio — real-time peer support
  • Stack Overflow — search 'vibe coding' for practical discussions

Your Next Steps

  • Build something every week — even small apps keep your skills sharp
  • Share your projects online — portfolio pieces attract opportunities
  • Join the community — help others and learn from their approaches
  • Explore new tools as they emerge — this field evolves weekly
  • Consider paid tiers when you're ready for larger projects
  • Remember: every expert started exactly where you are now
Course Recap

The Complete Journey

  • Module 1: What Is Vibe Coding? — definition, mindset, the paradigm shift
  • Module 2: Your AI Toolkit — ChatGPT, AI Studio, Bolt compared
  • Module 3: Prompt Engineering — the skill that makes everything else work
  • Module 4: Building with ChatGPT — tutor, generator, debugger
  • Module 5: Google AI Studio — from prompt to live app in 60 seconds
  • Module 6: Bolt & Full-Stack AI — databases, auth, deployment
  • Module 7: The Development Loop — iterate, debug, test, deploy
  • Module 8: Capstone Project — plan, build, present your portfolio app
  • Module 9: Pitfalls & Best Practices — avoid traps, work like a pro

You don't need to learn to code.
You need to learn to think clearly,
communicate precisely,
and build fearlessly.

The vibe coding philosophy

Get Started

Ready to Start Building?

Join thousands of non-programmers who are building real applications with AI. Your first app is closer than you think.