The Change

Why this matters

This is the developer's core loop: change → commit → push → deploy. Once you run this loop manually, you understand exactly what happens when Claude Code does it for you in Module 5. The loop also introduces version control's most powerful concept: every committed change is reversible. You cannot permanently break something you committed, because you can always revert.

How to do it

1. 1

   Make a small, visible change to your app

   In VS Code, open a component or page file. Change a heading text, a button label, or a color. Something you will see immediately in the browser.

2. 2

   Save the file and confirm the change in your local browser

   With npm run dev running, save the file. The browser should hot-reload and show your change within 1–2 seconds.

3. 3

   Stage and commit the change

   In VS Code Source Control panel: click the + next to your changed file (stage it). Write a commit message. Click the checkmark (commit). Or in terminal: git add . → git commit -m "your message"

4. 4

   Push to GitHub and watch it deploy on Vercel

   git push origin main (or main branch name). Open your Vercel dashboard and watch the deployment happen. Visit your live URL after deploy completes (1–3 minutes).

The prompt

I want to make the following change to my React app:

[DESCRIBE THE CHANGE — e.g. "Change the main heading from 'Welcome' to 'Hello World'"]

I have the following file open:
[PASTE THE RELEVANT FILE OR THE SPECIFIC COMPONENT]

Please:
1. Show me exactly which line(s) to change
2. Show the before and after
3. Warn me if this change could affect anything else in the app

Success criteria

• ✓You made a visible code change in VS Code
• ✓You staged and committed the change with a descriptive message
• ✓You pushed to GitHub and watched the Vercel deployment
• ✓Your change is visible at the live Vercel URL

Common mistakes