🤖 AI Coding Workshop: Learn to Use AI Tools Effectively

Learn to work with AI coding assistants without losing your mind, your job, or your ability to think critically.

This is a hands-on workshop with 6 real coding challenges that teach you to use AI tools like Claude Code, GitHub Copilot, and Codex effectively and safely.

📖 Full Setup Guide (GETTING_STARTED.md) - Detailed instructions for all setup steps

---

🚀 Quick Start

1. Set Up Your AI Coding Tool

You'll need an AI coding assistant - either a code editor extension (like GitHub Copilot) or CLI tool (like Codex).

Popular options with setup guides:

• Claude Code - Setup instructions
• GitHub Copilot - Setup instructions
• OpenAI Codex - Setup instructions
• Or any other AI coding assistant - The principles apply to all tools

2. Clone This Repository

git clone https://github.com/jamiebrown201/AI-Coding-Workshop.git
cd AI-Coding-Workshop

3. Install Dependencies

npm install

4. Verify Everything Works

npm run verify

Note on branches: You'll create a branch for each exercise you work on using the format workshop/your-name/exercise-name. Each exercise README will guide you when to create branches.

✅ If you see green checkmarks, you're ready to start! ❌ If not, check GETTING_STARTED.md for troubleshooting.

---

📚 The 7 Challenges

Each challenge is a real coding task. You'll use AI to help, but you're in control.

Challenge 1: Build an Accessible Component

What you'll do: Build a React article preview component using AI assistance What you'll learn: AI is great at boilerplate but misses accessibility The catch: AI will forget things like alt text and keyboard navigation

👉 Start Challenge 1

---

Challenge 2: Bug Hunt

What you'll do: Fix a broken search feature in a React component What you'll learn: When AI helps vs when it confidently misleads The catch: AI will make confident guesses about browser bugs without real knowledge

👉 Start Challenge 2

---

Challenge 3: Understand Legacy Code

What you'll do: Map the architecture of a messy subscription system What you'll learn: Context quality matters more than prompt quality The catch: Feeding AI too much code makes it worse, not better

👉 Start Challenge 3

---

Challenge 4: Plan a Safe Refactor

What you'll do: Plan migrating jQuery code to React without breaking production What you'll learn: AI loves "rewrite everything" (which is usually a bad idea) The catch: Big-bang rewrites introduce bugs; incremental is safer

👉 Start Challenge 4

---

Challenge 5: Build a Real-Time Dashboard

What you'll do: Build a complete feature from scratch (frontend + backend + tests) What you'll learn: Where AI helps most (boilerplate) and least (architecture) The catch: AI can't make strategic decisions; you have to

👉 Start Challenge 5

---

Challenge 6: Hunt for Security Bugs

What you'll do: Review AI-generated code and find planted vulnerabilities What you'll learn: 45% of AI code has security issues The catch: AI-generated code looks right but is often dangerously wrong

👉 Start Challenge 6

---

Capstone Challenge

What you'll do: Build a trending topics feature with real-time data What you'll learn: Everything from the previous challenges under time pressure The catch: Must pass a security checklist

👉 Start Capstone Challenge

---

🎯 What You'll Learn

By completing these challenges, you'll be able to:

✅ Generate code faster - Without sacrificing quality ✅ Spot AI mistakes - Especially security vulnerabilities ✅ Write better prompts - Context quality > clever wording ✅ Review critically - Trust but verify everything ✅ Work safely - Security is non-negotiable ✅ Know the limits - What AI can and can't do

---

🛠️ What You Need

Required:

• Node.js 18+
• Git
• An AI coding tool (Claude Code, GitHub Copilot, or Codex)
• Basic JavaScript/React knowledge

Don't need:

• Expert coding skills (we'll guide you)
• Prior AI tool experience (that's what you're learning!)
• AWS knowledge (we use mock data)

Setup Instructions: See GETTING_STARTED.md for detailed setup instructions for all AI tools.

---

📖 Two Ways to Learn

Option 1: Self-Paced (Recommended for Solo Learners)

Work through challenges at your own speed. Each challenge has:

• Clear instructions in its README
• Starter code to begin with
• Complete solutions in a solutions directory to check against
• Estimated time to complete

Start here: Self-Paced Guide

Option 2: In-Person Workshop (For Teams/Groups)

Run as a facilitated full-day workshop with:

• Group activities and discussions
• Competitive elements and badges
• Peer learning opportunities
• Facilitator guidance

Start here: Facilitator Guide

---

🔑 Key Principles You'll Learn

1. Understanding > Speed

Fast code you don't understand is a liability. Every challenge requires you to explain what AI generated.

2. Security is Non-Negotiable

45% of AI-generated code has vulnerabilities. Challenge 6 will show you why code review is essential.

3. Skepticism is Healthy

Question everything AI suggests. Challenge 2 will teach you this when AI confidently suggests the wrong fix.

4. AI Augments, Doesn't Replace

AI handles boilerplate. You handle thinking. This distinction becomes clear by Challenge 5.

5. Context Quality > Prompt Quality

Giving AI the right 50 lines beats dumping 5000 lines.

---

📁 Repository Structure

AI-Coding-Workshop/
├── modules/
│   ├── 01-foundations/          # Challenges 1-2: Basic AI usage
│   ├── 02-codebase-understanding/ # Challenges 3-4: Legacy code
│   ├── 03-full-stack/           # Challenge 5: Complete feature
│   ├── 04-code-review/          # Challenge 6: Security review
│   ├── 05-team-practices/       # Team adoption guidelines
│   └── 06-capstone/             # Capstone Challenge
├── docs/
│   ├── security-checklist.md    # Run before committing AI code
│   ├── prompting-guide.md       # Write better prompts
│   └── anti-patterns.md         # Common mistakes to avoid
├── data/
│   ├── articles/                # Article fixtures + schema
│   ├── analytics/               # Engagement + time-series data
│   ├── comments/                # Moderation samples
│   ├── subscriptions/           # Tier & entitlement data
│   ├── trending/                # Capstone datasets
│   └── users/                   # Fake user profiles
└── scripts/
    ├── verify-setup.js          # Cross-platform environment check
    ├── verify-setup.sh          # Shell version of the same check
    ├── generate-fixtures.js     # Refreshes all synthetic data
    ├── dev-server.js            # Boots sample APIs + dashboard
    └── security-scan.sh         # Scan for vulnerabilities

Need a fresh dataset? Run npm run generate-fixtures to recreate everything under data/ and the legacy fixtures.