Wordle Game

In the previous chapter, we added authentication and authorization to a Convex-backed app. In this chapter we switch to a frontend-only app with a small stack, so we can focus on two skills this coursebook has not covered yet: using an AI coding assistant (GitHub Copilot) and writing unit tests with Vitest.

The starter is a Wordle clone that mostly works. We planted a bug in the guess-evaluation logic, in the rule for coloring duplicate letters. We will use Copilot to understand the codebase, debug that bug, write tests that confirm the correct behavior, and add a new feature without reintroducing regressions. We will also build a discipline for using AI responsibly: what to prompt, what to review, what to paste, and when not to use it at all.

Getting Started

Go to the wordle repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> wordle
cd wordle
code .

Install dependencies and start the dev server:

pnpm install
pnpm dev

You should see a Wordle-style board with a QWERTY keyboard underneath. That is the starter running. Try a few guesses. You may or may not notice the bug yet; we will find it together in a later section.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Set up GitHub Copilot in VS Code, including student access, account settings, and sign-in
  • Use Copilot’s different modes (chat, #-mentions, slash commands, inline chat, agent mode) to explore, understand, and navigate an unfamiliar codebase
  • Apply a review discipline to AI-generated explanations and code changes rather than accepting them at face value
  • Use Copilot to diagnose and fix a bug, and verify the fix manually in the browser
  • Write and run unit tests with Vitest, including using Copilot to generate test cases that guard against regressions
  • Direct Copilot to implement a new feature test-first, and review the resulting diff
  • Place Copilot within the broader landscape of AI coding tools and agentic development practices

Sections

  1. AI Coding Assistants
  2. Claim Copilot Student
  3. Configure Copilot on GitHub
  4. Sign In to Copilot in VS Code
  5. Open the Chat View
  6. Attach Files with #-Mentions
  7. What Copilot Sees
  8. Ask About useMemo Three Ways
  9. Play APPLE Against SPEED
  10. Ask Copilot to Fix It
  11. Why Tests
  12. Set Up Vitest
  13. Ask Copilot to Write the Test Cases
  14. Add Word Validation
  15. Beyond Copilot